Batik – Theme documentation

Batik is a Shopify Online Store 2.0 theme for specialty food merchants: Asian, African, Latin-American, Middle-Eastern and other importers, delis and spice shops. It combines warm colour schemes, a library of 15 hand-drawn world patterns (damask, Dayak, kawung, zellige, paisley, kente …) that every section can use, product labels driven by tags (halal, vegan, organic, spice level, bestseller) and everything a grocery store needs: unit prices, best-before dates, allergen and nutrition blocks, quick filters, quick view, a quick order list, a wheel of fortune and a cart drawer with free-shipping progress – all without apps.

Version: 1.0.0 · Support: see Support · Deutsche Version

1. Installation

1. In your Shopify admin go to Online Store → Themes.
2. Add Batik from the Theme Store (or Add theme → Upload zip file if you received a package).
3. Click Customize to open the theme editor. The home page ships with a complete layout (hero slideshow, trust bar, category tiles, featured collection, feature columns, image with text, featured product, second collection, teaser banner, blog posts, FAQ, newsletter). Every text uses a placeholder – replace them with your own content and pick your collections.
4. Set your menus under Online Store → Navigation: Batik uses main-menu (up to three levels, rendered as a mega menu on desktop) and footer; the footer can show any additional menu.
5. Publish when you are happy with the result.

Batik does not require any app. Product reviews, subscriptions, loyalty or wishlists can be added through apps that provide app blocks (see section 8).

2. Theme settings (Customize → Theme settings)

3. Product tags and labels

Batik reads labels from product tags so you do not need metafields or apps:

Tag matching is case-insensitive; you can change the tag names in Theme settings → Product labels. Sold-out, sale, low-stock and "new" badges are computed from inventory, compare-at price and the publish date – no tags needed.

Unit prices (price per kg/l) are shown automatically wherever Shopify provides them: set Unit price on the variant in the product admin.

3a. Best-before dates (metafield)

Create a metafield definition under Settings → Custom data → Products (and optionally Variants): namespace batik, key best_before, type Date. Fill in the date per product or variant. Batik then shows:

• a badge on product cards – neutral when the date is far away (optional), in the accent colour from X days before the date (“Best before 2 Oct 2026”), and “Past best-before date” once it has passed (can be hidden);
• the Best-before date block on the product page (date, days left, a note for short dates that you can edit in the block);
• a line in the cart.

The metafield key, the “soon” window, “always show on cards” and how expired dates are handled are in Theme settings → Product labels. For a “Save me – reduced” collection tag the reduced products (e.g. reduced) and use that tag as an automated collection rule and as a quick filter (section 5a).

3b. Ingredients, nutrition, allergens (metafields)

Three product blocks read metafields you create under Settings → Custom data → Products (namespace batik; the keys can be changed per block):

Blocks that find no value stay invisible on the storefront and show a hint in the editor only.

4. Sections

Home page and every JSON template can use these sections (Add section in the editor):

• Slideshow – full-width hero with up to several slides, content box, optional pattern overlay, wave edge, autoplay with pause control, one or two buttons per slide. Tick Use as H1 on the first slide of the home page.
• Trust bar – three to five icon items (shipping, packaging, questions …).
• Collection tiles – collection cards with image overlay or caption; the collection image or the first product image is used.
• Featured collection – grid or scrollable shelf with product cards (quick add, labels, unit prices).
• Featured product – a single product with blocks: labels, vendor, title, price, text, description, variant picker, buy buttons (dynamic checkout), link. Supports app blocks.
• Image with text, Rich text, Multicolumn (icons, images or cards), Teaser banner, Divider (line, wave or pattern).

• Blog posts, Testimonials, Logo list, Video (Shopify-hosted or YouTube/Vimeo – loaded only after a click), Store location (address, opening hours, directions – no external map scripts), FAQ (accordion with FAQ structured data), Newsletter, Contact form, Custom Liquid.

• Wheel of fortune – discount gamification without an app: up to 12 segments (label, discount code created under Discounts, “no prize”, weight, colour), inline or as a popup after a delay, optional e-mail gate (subscribes to the newsletter), one spin per visitor, result with “Copy code” and “Apply code”.

• Before/after – two images with a draggable comparison handle (keyboard and touch), labels and aspect ratio.
• Shoppable image – dots on an image (position in percent) that open a small product card with price and quick view, or a free text with a link.
• Recently viewed – products the visitor looked at last (stored in their browser); appears only once there is something to show.
• Quick order list – a table of every variant of a collection with quantity fields and one “Add all to cart” button, with a search box for long lists; also available as the product template collection.order-list (assign it to a collection under Theme template).
• Promo popup and Age verification live in the footer group so they are present on every page: the popup opens once per visitor (delay or scroll) with an image, text and newsletter form or button; the age gate blocks the store until the visitor confirms their age (remembered for X days; off by default).
• Header (logo, menu, mega menu with collection images and menu promo blocks, sticky option, wave), Announcement bar (messages with optional links, a countdown block, country/language selector), Footer (text, menu, social, newsletter blocks, payment icons, policy links, localization).

4a. Section backgrounds

Every content section has a Background group: Transparent (the page pattern shows through), Solid, Pattern or Image – all full width. With Pattern you pick any family from the library (or “same as theme”), the opacity and, optionally, a colour that overrides the colour scheme's pattern colour; with Image you set a background image and how much it is tinted with the scheme's background colour. Slideshow, newsletter and teaser banner have their own pattern choice as well.

4b. Countdown

A countdown block is available in the announcement bar, rich text and on the product page; the teaser banner and every slideshow slide have countdown settings. Enter the end as YYYY-MM-DD HH:MM in your store's time zone (e.g. 2026-12-24 18:00); optionally a label and a text shown after it ends. The product-page block can also read a Date and time metafield batik.offer_ends per product.

Product page blocks (Product information): labels, vendor, title, price (tax note, Shop Pay installments), SKU, stock status with an optional stock bar, text, variant picker (buttons/swatches or dropdown), buy buttons (quantity, quantity rules and volume pricing table, dynamic checkout, pickup availability, gift-card recipient form), delivery estimate (“Order within 2 h – delivery Tue–Thu”: cut-off hour, processing days, transit days, Saturday as a working day), quick order list (all variants as a table), best-before date, description, ingredients/nutrition/allergen blocks (3b), collapsible rows (own text or a page), countdown, share, complementary products, custom Liquid and app blocks. A sticky buy bar with price and “Add to cart” appears at the bottom once the buy button has scrolled out of view (section setting). The Related products section uses Shopify's recommendations.

Blog posts can end with the Shop the recipe block: create a List of products metafield batik.recipe_products on articles (Settings → Custom data → Blog posts), pick the ingredients per recipe, and readers get an order list with quantities and one button.

5. Templates

Templates for products, collections, collection list, cart, search, blog, article, page, 404, password and gift card are included. Additional page templates:

• page.contact – contact page with the contact form section.
• page.faq – FAQ page with an accordion and a contact form below.

Assign a template in the page admin under Theme template. Additional templates: collection.order-list (quick order list for a whole collection) and product.quick (used internally by the quick view – no need to assign it).

5a. Collection page for large catalogs

• Filter groups from tags (what grocery shoppers actually filter by – diet and lifestyle such as vegan, vegetarian, halal, organic, gluten-free, lactose-free; spice level; origin; brand): blocks of the collection section with a heading and one tag | Label per line, shown as checkbox lists or chips at the top of the filter panel. Values combine (AND), only tags that occur in the collection are listed, no app needed.
• Quick filters: blocks with a label and a product tag (e.g. Bestseller → bestseller) as chips above the product grid.
• Filters from Shopify's Search & Discovery app (availability, price, vendor, tags, options, metafields): active filters as chips above the grid, a price slider, a search box inside long filter lists, “show more” for long lists, sidebar or drawer.
• Pagination: page numbers, a “Load more” button or infinite scroll (section setting; also for search results).
• List view switch and the quick order list template for wholesale-style ordering.

6. Cart

The cart drawer opens after adding a product and supports quantity changes, removal, line-level and cart-level discounts, unit prices, selling plans, a note field and a free-shipping progress bar: set the threshold (in your store currency) in the Cart drawer and Cart section settings. Leave it at 0 to hide the bar. The bar is only shown for the store's default currency.

7. Languages and markets

The theme ships with English, German, French, Italian, Spanish and Indonesian translations – for the storefront and for the theme editor. Publish the languages under Settings → Languages; the announcement bar and footer then show a language and country selector automatically. Product content is translated with Shopify's Translate & Adapt app.

8. Apps

App blocks can be added to the product page, the featured product section and to any app-block-enabled section. Product reviews, subscriptions, wishlists and loyalty programs work through their app blocks or app embeds.

9. Frequently asked questions

The mega menu shows no images. Make sure Show collection images in the mega menu is enabled in the header settings and that the linked collections have an image (or at least one product with an image). Only collection links show images.

Labels are not showing. Check the tag spelling against Theme settings → Product labels (case does not matter).

How do I turn the pattern off? Set Pattern → Opacity to 0 or choose None; wave edges can be disabled per section.

The wheel of fortune / popup does not open in the editor. Select the section in the editor's sidebar – popups open only when selected there. On the storefront they open after the delay and are remembered per visitor (clear the browser storage to test again).

Best-before / nutrition blocks are empty. Check that the metafield definition uses the namespace and key shown in the block settings (default batik.…) and that the product has a value.

Right-to-left languages are supported: the theme follows the language's text direction automatically.

Where do the payment icons come from? From the payment providers activated in Settings → Payments.

Can I use my own fonts? Batik uses Shopify's font library only (required by the Theme Store). Choose fonts under Typography.

10. Support

• Documentation: https://javamarkt.com/pages/batik-documentation (German: https://javamarkt.com/pages/batik-dokumentation)
• Support form: https://javamarkt.com/pages/batik-support (please include store URL, theme version and a description; attachments as a reply to our answer)
• Response time: within two business days; critical bugs are handled immediately.

11. Changelog

Version 1.0.0 – first release.