Kissa, roasted for Shopify.

Getting started

1. Add the theme from the Theme Store, then choose Customize.
2. Set your colors and fonts under Theme settings (see Theme style).
3. Add your coffees as products. For the lot sheet, freshness bar and roast stamp, create the coffee metafields described in Coffee details.
4. Create collections for your coffees, seasonal lots and brewing gear, and choose them in the Product showcase section on the home page.
5. Set your roast and ship days in Theme settings → Coffee. The announcement bar, product pages and cart then show the next roast and the order deadline.

Sections that have no content yet show placeholder artwork in the theme editor, so you can see the layout before you fill it in.

Theme style

Kissa ships with one style, also called Kissa: a roaster's lot sheet in warm paper and ink with a terracotta accent, Work Sans with data set in a monospaced face, square corners and 4:5 product cards. Every color scheme meets WCAG AA contrast for text, secondary text, accent and buttons.

Make it your own under Theme settings: five color schemes, heading and body fonts, corner radius, card shape and the animations.

Coffee details with metafields

Kissa reads coffee details from product metafields. Create them in Settings → Custom data → Products → Add definition, with these exact namespace and keys. All are optional: a missing field is simply not shown.

Freshness

With a roast date, Kissa shows where the coffee is in its life: resting, at its peak or still good, on a bar with today marked. It appears on product cards, on the product page and in the hero. The number of days in each phase is set in Theme settings → Coffee (default: 7 days resting, at its peak until day 28, good until day 45). The page works the phase out on the server, and a small script keeps it current on cached pages.

Theme settings

• Colors: five color schemes. Sections and blocks pick a scheme.
• Typography: heading and body fonts, a bold heading option, heading and body size, and the face used for data (monospaced or the body font).
• Layout: page width.
• Animations: reveal on scroll and image parallax. Everything also respects the visitor's reduced motion setting.
• Buttons and corners: radius for buttons, media and inputs.
• Product cards: image ratio and fit, what shows above the title, tasting notes, roast meter, second image on hover, quick add and badges.
• Coffee: freshness windows, the roast stamp, roast day, ship day, order cutoff day and hour, a pause date (holidays), and the roast note in the cart.
• Cart: drawer or page, and cart notes.
• Prices, Favicon, Social media, Search behavior.

Home page sections

• Hero — kana poster: a word set huge across the stage (カフェ, "café" in Japanese, by default) with the selected lot's bag floating in front of it. Altitude, score, varietal and process are pinned to the bag with thin lines, a red seal shows the roast date, and a row of lot cards switches lots. Each lot is a block with a product and, optionally, a floating image: a PNG with a transparent background floats in front of the word; without it the product's first photo shows as a tilted print. The word, its outline (none, last character, all), its size, the seal text and the contour lines are editable. Katakana, hiragana and digits use the bundled Dela Gothic One face; other characters use the visitor's system font, so you can also write the name of your shop.
• Hero — lot sheet: a headline beside one lot sheet over contour lines.
• Hero: an editorial hero with one or two images.
• Roast calendar: the coming days with the order deadline, roast day and ship day.
• Statement: a large sentence with a side label. Under Background art you can add a sumi ink stroke: a wide dry-brush stroke drawn across the top of the section, a word knocked out of the ink, a red brush stroke under the emphasised words and a red seal beside the link. The stroke measures where the words sit and stays above them. Each stroke variation number draws a different stroke.
• Product showcase: up to five tabs, each a collection.
• Origin story: chapters about a farm or region, with details in label | value rows.
• Editorial image with text, Collection list, Multicolumn, Testimonials, Email signup, Scrolling text, Custom Liquid.
• Storefront: a photo of your shop with menu tickets floating over it and a live "open now" status worked out from the opening hours.
• Café gallery: a strip of photos and a list of stores, each with its own menu link.
• Café menu: a printed-style menu board.
• Apps: a place for app blocks on any page.

Product page

Blocks in Product information: vendor, title, price, SKU, tasting notes, roast schedule, freshness, roast meter, origin details, variant picker, subscription planner, buy buttons, description, collapsible tabs, share, custom Liquid and app blocks.

• Variant picker: pills or dropdowns. Option values with swatches (colors or images set in the product's options) show the swatch.
• Subscription planner: the customer says how many cups a day and how they brew, and the planner suggests the bag size, the delivery interval and the number of bags from your selling plans, then applies them to the form. It reads the interval from the plan names ("Delivery every 2 weeks", "Monthly"). It needs a subscriptions app; without selling plans it stays hidden.
• Brew guide (section): recipes for each method with a cup scaler and a timer that follows the steps. Write steps as 0:40 | Pour up to [150] ml; the numbers in brackets scale with the cups. With custom.brew_method the matching recipe opens first.
• Product recommendations: choose Related or Complementary products. Complementary products are set per product in the Search & Discovery app.

Café pages: stores and menu

• Stores (page.stores template): each store with photo, address, hours, directions and a menu link.
• Menu (page.menu template): the first section, Menu: stores, lists your stores with address and hours and shows a store picker with country, city and store. Each Menu category section holds up to 50 items with photo, name, description, note, price and the stores that serve it. Switching store hides the items it does not serve. Link to a store's menu with ?store=store-name. The Photo style can be cut-out (for PNGs without a background) or framed.

To use them, create a page in Online Store → Pages and choose the template.

Other pages

Collection pages with filters and sorting (including color swatch and image filters), search with predictive results, cart page and drawer, blog and article with comments, contact page, customer account pages, 404 page, password page and gift card page, all in the lot sheet style.

Selling features

• Shop Pay Installments banner under the price.
• Local pickup: availability for the selected variant, with every store and its pickup time.
• Gift cards: the buyer can send a gift card straight to someone, with their name, a message and a send date.
• B2B: quantity rules (minimum, maximum, increments) on the product page and in the cart, with steppers that follow them, and a volume pricing table.
• Subscriptions: purchase options from any subscriptions app, plus the planner.
• Dynamic checkout buttons, cart notes, discounts, unit prices, country and language selectors.

Accessibility and performance

• Keyboard navigation with visible focus, a skip link, labelled controls and live regions for cart and variant updates.
• Motion respects the visitor's reduced motion setting and the theme's animation settings.
• Scripts load per section and only on pages that use them. The ink art and the hero poster draw on canvas after the page has loaded.

FAQ

The freshness bar does not show. The product needs a value in custom.roast_date (type Date).

The planner says it cannot read the interval. Name your selling plans with the interval, for example "Delivery every 2 weeks" or "Monthly".

The hero poster shows a photo instead of a floating bag. Add a PNG with a transparent background in the lot's Floating image.

The menu shows no items for a store. Check the store names in each item's Only at these stores field: they must match the store blocks in Menu: stores. Leave the field empty for items served everywhere.

Something else? Write to contato@studiodigi.com.br with your store URL and a screenshot.

Support

Write to contato@studiodigi.com.br. We answer within two business days, Monday to Friday.

To help us answer in one reply, include:

• your store URL (the .myshopify.com address),
• the page and section where you see the problem,
• a screenshot, and the browser and device you use.

Support covers setting up and using the theme's own features and settings. It does not cover custom code changes, third-party apps or Shopify features outside the theme; for those, the Shopify Help Center is the best place to start.

Credits

• Dela Gothic One, © The Dela Gothic Project Authors, SIL Open Font License 1.1 (https://openfontlicense.org). Bundled as a subset of kana, digits and a few kanji.
• Demo images are original 3D renders made for Kissa.