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 subtle SVG pattern engine (kawung, damask, diagonal, grid), product labels driven by tags (halal, vegan, organic, spice level, bestseller) and everything a grocery store needs: unit prices, low-stock and sold-out badges, quick add, pickup availability, gift cards with recipient form, faceted search and a cart drawer with free-shipping progress.
Version: 1.0.0 · Support: see section 10 · Deutsche Version
1. Installation
- In your Shopify admin go to Online Store → Themes.
- Add Batik from the Theme Store (or Add theme → Upload zip file if you received a package).
- 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.
- Set your menus under Online Store → Navigation: Batik uses
main-menu(up to three levels, rendered as a mega menu on desktop) andfooter; the footer can show any additional menu. - 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)
| Group | What it does |
|---|---|
| Colors | Four colour schemes are included: Batik (light, earth tones – default), Kawung (dark, gold accent), Pasar (bright, warm red) and Neutral (white/grey, for stores that prefer no pattern). Every scheme defines background, text, accent, accent text, pattern and border colours. Each section has a Color scheme setting, so you can mix schemes on one page. |
| Typography | Heading and body fonts from Shopify's font library, plus a scale (percent) for headings and body text. |
| Pattern | Pattern family (kawung, damask, diagonal, grid), size, opacity and whether the background pattern stays fixed while scrolling. The same pattern is used for the page background, drawer overlays, wave edges and the free-shipping progress bar. Set the opacity to 0 to switch the background pattern off. |
| Product labels | Which product tags trigger the label chips: halal, vegan, organic, bestseller, and the prefix for spice levels (default spicy → tags spicy-1, spicy-2, spicy-3). Also the low-stock threshold (badge "Only X left") and how many days a product counts as "New". |
| Product cards | Image aspect ratio, show vendor, second image on hover, quick add button. |
| Layout | Maximum page width, page margin, section spacing, corner radius for cards, buttons and inputs, wave height. |
| Cart | Cart type: drawer (default) or page. |
| Social media | Links for Instagram, Facebook, TikTok, YouTube, Pinterest, X and WhatsApp – shown by the footer's social block. |
| Favicon | Square image, at least 96 × 96 px. |
3. Product tags and labels
Batik reads labels from product tags so you do not need metafields or apps:
| Tag (default) | Result |
|---|---|
halal |
Halal chip on cards and product page |
vegan |
Vegan chip |
organic |
Organic chip |
bestseller |
"Bestseller" badge |
spicy-1 / spicy-2 / spicy-3
|
One to three chili icons (mild – medium – hot) |
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.
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.
- Header (logo, menu, mega menu with collection images, sticky option, wave), Announcement bar (one or more messages with optional links, country/language selector), Footer (text, menu, social, newsletter blocks, payment icons, policy links, localization).
Product page blocks (Product information): labels, vendor, title, price (tax note, Shop Pay installments), SKU, stock status, text, variant picker (buttons/swatches or dropdown), buy buttons (quantity, dynamic checkout, pickup availability, gift-card recipient form), description, collapsible rows (own text or a page), share, complementary products, custom Liquid and app blocks. The Related products section uses Shopify's recommendations.
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.
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 and Indonesian storefront translations. 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 the Neutral colour scheme; wave edges can be disabled per section.
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
- Support form: https://javamarkt.com/pages/batik-support – please include your store URL (.myshopify.com), theme version and a description; screenshots can be sent 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.