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 with optional text, wave, ornament or pattern strip; line type, thickness, wave height and count, pattern and pattern size, width, alignment, height, spacing, custom colour and opacity are adjustable), Scrolling text (moving messages, speed, direction, separator), Image gallery (tiled grid of images and videos, tiles in standard/wide/tall/large, lightbox), Numbers and facts (key figures with count-up animation), Timeline (milestones with year, text and image, alternating or one-sided), Collection tabs (several collections in one section, switched by tabs).

• 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 (trigger: delay, scroll or exit intent – when the mouse leaves the page towards the top; on touch devices the delay applies), 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, scroll or exit intent) 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 and a separate mobile logo, logo left or centred, menu below the logo, labels next to the icons, transparent header over the first home page section, menu, mega menu with collection images and menu promo blocks, sticky option, wave, country/language selectors in the mobile menu), Announcement bar (messages with optional links, a countdown block, country and language selectors – each can be switched off), Footer (text, menu, social, newsletter blocks, payment icons, policy links, country and language selectors – each can be switched off), Collection banner (image, full description or a short excerpt).

4a. Section backgrounds

Every section – including the trust bar, newsletter and collection banner – has a Background group: Transparent (the page background with its pattern runs through without a break), Solid, Pattern or Image – all full width. Only header, footer and announcement bar are always coloured bands. 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). Media settings: gallery layout on desktop (carousel with thumbnails, stacked or two-column grid – on mobile the gallery always scrolls), thumbnails below or left, image ratio, zoom (lightbox, or magnify on hover with the lightbox on click), and which column stays in view while scrolling (media, product information or both – then the shorter column sticks). A Product rating block shows the rating from the standard reviews.rating metafield. 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.

Product suggestions in the cart (both sections): source Collection (e.g. bestsellers), Same category as the first item (its most specific collection), Related products (Shopify picks them automatically, matching the first item) or Complementary products (assigned per product in the Search & Discovery app); for both recommendation sources the collection acts as fallback. Products already in the cart are skipped; products without variants get a “+” button, others link to the product page. Optionally the suggestions also show for an empty cart (“Our bestsellers”).

Gift wrapping: create a product “Gift wrapping” with a price and select it in the cart sections – customers tick a checkbox in the cart and the product is added or removed.

Pre-order – two flavours (Theme settings → Product labels → Badges, each can be switched off): (1) Pre-order request: when a variant is sold out (stock 0, no continue-selling), the button on cards, product page and sticky bar reads “Notify me” (label, dialog title and text adjustable in the theme settings) and opens a short form – the customer leaves e-mail, quantity and an optional message, you receive the request as a contact-form e-mail (sender under Settings → Notifications) and decide whether you can source the item; nothing is sold; the browser remembers name and e-mail, so further requests are prefilled. If a captcha appears after sending, that is Shopify's spam protection for contact and newsletter forms (Online Store → Preferences → Spam protection) – switch it off there and the request goes through without the extra step. (2) Continue selling: when “Continue selling when out of stock” is on at stock 0, the buy button and badge say “Pre-order” and the item is ordered normally.

The setting Where requests go decides what happens:

• E-mail (contact form) – you receive every request as a contact-form e-mail at the store's sender address. Shopify sets the subject of that e-mail (“New customer message …”) and it cannot be changed, so the first line of the message reads “Subject: Pre-order – ”. A rule in Gmail/Outlook (“message contains: Pre-order –”) files the requests into a folder.
• Customer list with tags (+ Shopify Flow) – the customer is saved through Shopify's customer form with the tags vorbestellung, vb:<variant id> and vb-menge:<quantity>. You find all requests under Customers filtered by tag vorbestellung. Note: technically the customer form is Shopify's newsletter sign-up. With double opt-in enabled (Settings → Customer notifications) the customer stays at “Marketing: pending” and is only subscribed after clicking the confirmation e-mail – the recommended setting; without double opt-in they are subscribed right away and the first Flow workflow should unsubscribe them again (action “Unsubscribe customer from email marketing”).

Two workflows in Shopify Flow (free on every plan, Apps → Flow) turn this into automation:

1. Pre-order received – trigger Customer tags added → condition: one of the added tags starts with vb: → action Get product variant data with the variant id from the tag ({{ tag | remove: "vb:" }}) → action Send internal email to you with a subject such as Pre-order: {{ productVariant.product.title }} and a body with {{ customer.email }}, the quantity from the vb-menge: tag and a link to the product. Optional: Unsubscribe customer from email marketing.
2. Back in stock – trigger Product variant back in stock → action Get customer data with the query tag:vb:{{ productVariant.legacyResourceId }} → For each customer → action Send email to {{ customer.email }} (“ is back – order now: ”) → action Remove customer tags (vb:<id>, vb-menge:…).

This gives you e-mails with your own subject, all open requests under Customers, and customers are notified automatically as soon as you restock.

Product comparison (Theme settings → Product cards): a compare icon on every card collects up to four products in a bar at the bottom; “Compare” opens the table with image, price, availability, labels, Nutri-Score, best-before date, weight, unit price, allergens, nutrition and description. The selection is kept in the browser.

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://illerlabs.com/batik/docs/ (German: https://illerlabs.com/de/batik/docs/)
• Support form: https://illerlabs.com/batik/support/ (please include store URL, theme version and a description; one screenshot or file can be attached)
• Response time: within two business days; critical bugs are handled immediately.

11. Changelog

Version 1.0.0 – first release.