Demo store

A store you can click through

Ember & Oak is an invented coffee brand on my own Shopify dev store. Nothing on it is a mock-up: the catalogue is seeded, the apps are installed, the orders exist. Open it, add things to the cart, break it.

Open the demo store

The store is behind a password. Enter 12345 to get in.

Custom apps

Each app runs on its own Cloudflare Worker and is installed on the demo store through Shopify's managed installation. The storefront side lives in the theme.

The Mix & Match page: categories, sub-tabs and the bar with a slot per pick

Mix & Match BundlesA bundle page where the customer picks 2 to 8 products across categories and the discount grows with the count: 10 % from two, 15 % from four, 20 % from six, plus a free tote. The box is sold as one product and becomes its real components at checkout.

The drawer after adding a coffee: the bar shows how much is left to free shipping

Cart MilestonesA progress bar in the cart drawer and on the cart page: free shipping at €30, a gift at €50, 30 % off an accessory at €80. At each step the customer picks the reward.

One-time purchase selected: the regular price

SubscriptionsA subscribe-and-save widget in the buy box: one-time or every 2, 4 or 6 weeks at −10 %. Checkout is Shopify's own; the app bills the cycles.

The overlay answering "gift under 15 euro"

AI Product SearchA search overlay that understands a question like "gift under 15 euro": a keyword engine answers in milliseconds, a language model re-ranks the results and writes the answer above them.

The Stores page with 20 B2B customers on the map

Store LocatorA map of the shops that stock the brand, built automatically from B2B orders: every company with a fulfilled order in the last six months becomes a pin.

The app's admin: coverage, what needs attention, the sync schedule

Store TranslationsThe whole store in German under /de/: products, pages, blog posts, menus, metafields and theme texts, translated automatically and kept current.

The app's admin: master and replica, what has been synced, the translation engines and the glossary

Product SyncA one-way mirror of the store into a second, Spanish-only shop: products, collections, files, metaobjects, pages, menus and blog posts, translated on the way.

After paying for a coffee: filters at −15 % with a countdown, added to the same order in one tap

Post-Purchase OffersOne extra offer right after payment, chosen by what was bought: a coffee order gets filters at −15 %, a decline gets a downsell. Accepting adds the product to the same order.

Timer and payment logos above the contact form; the upsell card on top of the order summary

Checkout BlocksFour checkout UI extensions placed in Shopify's checkout editor: a cart-reservation timer, payment logos from Shopify's own icon set, a row of trust points and a one-tap upsell card.

Product page and cart

Built on Dawn, but the buy box, the gallery and the cart drawer are custom blocks driven by metafields and metaobjects the merchant fills in the Shopify admin.

Brew Box: three base slots and the first optional one, the button waits for the picks

Product configuratorA "pick N" set built in the buy box: the customer fills the base slots from a side panel, may add optional picks at a bigger discount, and the set goes into the cart as one line. Three sets run on the same block: Cold Drinks Duo (2 + 2), Brew Box (3 + 3) and Breakfast Crate (4 + 4).

Promise badge, the price with the subscription saving, USPs and variant cards

Buy box and galleryVariant cards with badges, a promise line, USPs, stock and delivery notes, add-ons that go into the cart with the product, a sticky add-to-cart bar on mobile, and a gallery with thumbnails and mobile dots.

A coffee in the cart: the rewards bar, the line card and the "Goes well with" slider

Cart drawerThe cart as a side drawer: lines as cards with a square photo, the rewards bar on top, bundle contents as chips, and an upsell slider for the product added last.

Catalogue and pages

Collection filters, finders and the content pages are theme sections ported from client stores and restyled into one brand; every text is editable in the customizer.

The Coffee collection with tag pills and the sort

Collection pageFilter pills from the collection's own tags, a sort dropdown, a price range and a sticky bar; /collections/all shows the whole catalogue grouped by category with an intro card per group.

Five taste cards, each leading to the coffee that fits

Coffee finderA taste page instead of a filter: five cards, one per way of drinking coffee (fruity and bright, chocolate and caramel, smooth everyday, after dark, cold and ready), each leading straight to the coffee that fits.

The recipes page with the product filters

Recipes with used productsA recipe blog whose articles carry the products they use and the recipe facts, so the page can filter recipes by product and every recipe links to what to buy.

Home pageHero slider, marquee line, category grid, taste slider, bundle teaser, how-it-works steps, feature rows, FAQ and newsletter: nine custom sections, every one editable in the customizer.

Content pagesFourteen pages built from sections ported from client stores: a timeline, an origins map with a filter bar, a sourcing process with a scale, a help centre with anchored FAQ, careers with open positions, video stories, a launch page, an ambassador programme, wholesale and contact forms.

Theme sections

Every custom section of the theme, 53 of them, ported from client stores and rebuilt to one set of rules and one look. Each has its own settings and blocks in the theme editor; the picture opens the page that uses it.

Countdown bar

Bands above the header, one per countdown: its own text, link, colour scheme and start and end date. A web component counts down and the band leaves when the time is up.

First built for Beauty brand, DE, Food brand, DE, Dental brand, 5 markets

Header with mega menu

Logo, menu, language switcher, AI search and cart. "Shop" opens a panel with the collections and three feature products; the page under it is dimmed and blurred.

First built for Health tests brand, DE, Supplements brand, CH, Hair care brand, DE, Beauty brand, DE, Medical skincare brand, DE, Longevity supplements brand, DE, Store, Down bedding brand, DE, Garden brand, DE, Food brand, DE, Wooden Christmas tree brand, DE, Dental brand, 5 markets

Hero

A slider of image or video slides beside or behind the text: eyebrow, headline, text and two buttons as blocks, with progress dots and a pause button.

First built for Beauty brand, DE, Food brand, DE, Supplements brand, CH, Cosmetics brand club, Medical skincare brand, DE, Longevity supplements brand, DE, Health tests brand, DE, Store · 2, Hair care brand, DE · 2, Store, Down bedding brand, DE, Garden brand, DE, Presentation training brand, DE, Salt brand, DE, Used designer furniture shop, DE, Dental brand, 5 markets

Marquee line

An endless line of short messages, each a block with optional link and image; the speed is set per breakpoint.

First built for Health tests brand, DE, Medical skincare brand, DE, Longevity supplements brand, DE, Store · 2, Presentation training brand, DE

Categories

Collections as photo cards with the name and product count; one card can be featured over two rows, and a promo card joins the grid.

First built for Health tests brand, DE, Beauty brand, DE, Medical skincare brand, DE

Taste slider

Product cards with tasting notes and scales for roast, acidity and body. The list runs to the screen edge while the first card stays on the content edge.

First built for Sleep products brand, DE, Garden brand, DE, Beauty brand, DE

Bundle teaser

An image, a badge, a headline and a button that lead to the Mix & Match box, on a milk-to-caramel gradient.

First built for Food brand, DE, Presentation training brand, DE

Steps

Numbered cards with a photo or a video, a title and a line of text; a row on desktop, a slider on mobile.

First built for Health tests brand, DE, Medical skincare brand, DE, Garden brand, DE, Presentation training brand, DE, Dental brand, 5 markets

Feature rows

Alternating rows of image and text with a button; the full-width images run to the screen edge on any screen.

First built for Health tests brand, DE, Beauty brand, DE

FAQ

An accordion beside its heading. Each instance has an anchor, so the help page links straight to a group of questions.

First built for Health tests brand, DE, Supplements brand, CH, Medical skincare brand, DE, Longevity supplements brand, DE, Store · 2, Hair care brand, DE · 2, Store, Down bedding brand, DE, Presentation training brand, DE, Salt brand, DE

Footer

A card standing on the bottom of the page: menu columns, a contact button, payment icons and the demo note with the storefront password.

First built for Health tests brand, DE, Beauty brand, DE, Supplements brand, CH, Longevity supplements brand, DE, Store · 2, Store, Down bedding brand, DE, Garden brand, DE, Dental brand, 5 markets

Collection hero

Breadcrumbs, the product count, the title and the description, which shows everything when shortening would hide only a few lines.

First built for Food brand, DE, Medical skincare brand, DE, Health tests brand, DE, Garden brand, DE

Collection grid

Tag pills, a price range, a sort dropdown and a sticky bar over the product cards; a promo tile can sit in the grid.

First built for Supplements brand, CH, Beauty brand, DE, Health tests brand, DE, Hair care brand, DE, Dental brand, 5 markets

Media with content

An image beside an eyebrow, a headline, text and a check list; either side can come first, per breakpoint.

First built for Beauty brand, DE, Supplements brand, CH, Medical skincare brand, DE, Health tests brand, DE, Salt brand, DE, Dental brand, 5 markets

Taste profile

Bars scored one to five for acidity, body, sweetness and roast; each bar is a block that reads its value from a product metafield.

Info tabs

Tabs for origin, roast and brew guide; a tab takes its content from a product metafield or from its own text.

First built for Beauty brand, DE, Inner and outer beauty brand, DE, Longevity supplements brand, DE, Mobility aids shop, DE, Hair care brand, DE

Us vs. them

Two columns, each in its own colour scheme: what the brand does and what the alternative does, as check and cross lists.

First built for Hair care brand, DE, Food brand, DE, Longevity supplements brand, DE, Health tests brand, DE, Home fragrance brand, DE, Dental brand, 5 markets, Salt brand, DE

Routine

A text column beside a slider of numbered product cards with price and an add button; the slider bleeds off the outer edge.

First built for Beauty brand, DE, Medical skincare brand, DE

Quote and media

A quote with its attribution and an image or video as one card, the media flush against the quote.

First built for Medical skincare brand, DE

Product journal

Articles from the chosen blogs on the product page, recipes included.

First built for Medical skincare brand, DE

Mega bundle

The Mix & Match builder as one section: category tabs, product cards with steppers, the details panel and the fixed bar with slots.

First built for Food brand, DE, Inner and outer beauty brand, DE

Info split

An image and a text column split in two: eyebrow, headline, paragraphs, a highlighted line and a link.

First built for Hair care brand, DE · 2, Medical skincare brand, DE, Longevity supplements brand, DE, Health tests brand, DE, Down bedding brand, DE, Garden brand, DE, Dental brand, 5 markets, Store, Store · 2, Salt brand, DE

Timeline

A slider of chapters, a year, a title, a text and a photo each, with the neighbouring cards faded and a progress line.

First built for Food brand, DE, Medical skincare brand, DE, Home fragrance brand, DE, Hair care brand, DE

Person

A portrait, a check list of points and a quote with its attribution in a side card.

First built for Hair care brand, DE · 2, Medical skincare brand, DE, Longevity supplements brand, DE, Health tests brand, DE, Presentation training brand, DE, Salt brand, DE

Cards

Image cards with a kicker, a title, a text and a link; the header can sit above or beside the grid.

First built for Hair care brand, DE · 2, Beauty brand, DE, Food brand, DE, Supplements brand, CH, Medical skincare brand, DE, Health tests brand, DE, Store · 2, Store

Figures

A row of numbers with a label and a note each, beside an image: here the four brew parameters.

First built for Hair care brand, DE · 2, Beauty brand, DE

Benefits

A grid of cards with a line icon, a title and a text.

First built for Beauty brand, DE, Inner and outer beauty brand, DE, Medical skincare brand, DE, Longevity supplements brand, DE, Store · 2, Hair care brand, DE · 2, Store, Down bedding brand, DE

Gallery

A mosaic of photo and video tiles in several shapes, with optional captions.

First built for Beauty brand, DE

Open positions

An accordion of roles with team, place and type tags and a button per role, closed by a "Nothing that fits?" card.

First built for Beauty brand, DE

Finder

Taste cards, a product or a collection behind each, with a title, a text and an optional badge.

First built for Medical skincare brand, DE

Service hero

An eyebrow, a headline and a line of text beside a round image, for the help, contact and wholesale pages.

First built for Health tests brand, DE

Form

A form built from blocks (text, number, phone, select and more) that posts to Shopify's contact form, beside an info card with the address and hours.

First built for Longevity supplements brand, DE, Garden brand, DE

Support topics

Topic cards that link to a page or to an anchor of an FAQ below, closed by a "Still stuck?" bar with the contact button.

First built for Hair care brand, DE, Longevity supplements brand, DE, Medical skincare brand, DE

Trust badge

A single line of assurances with a mark or a logo, right under a hero.

First built for Health tests brand, DE, Beauty brand, DE, Store, Down bedding brand, DE, Presentation training brand, DE, Salt brand, DE, Dental brand, 5 markets

Clear insights

A large headline, then an eyebrow, a sub-heading, text and a button beside an image.

First built for Health tests brand, DE, Medical skincare brand, DE

Media slider

A text column beside a slider of images or videos with captions; the slider runs to the screen edge.

First built for Health tests brand, DE, Beauty brand, DE, Medical skincare brand, DE, Presentation training brand, DE, Home fragrance brand, DE

Product highlight

One product with benefits, its price, a button and a large image, with a row of badges under it.

First built for Health tests brand, DE, Beauty brand, DE, Food brand, DE, Store · 2, Dental brand, 5 markets, Store, Cosmetics brand club

Text and video

A centred headline, text and button over a video that loads on click, with a poster per breakpoint.

First built for Health tests brand, DE, Beauty brand, DE, Food brand, DE, Store · 2, Store, Down bedding brand, DE, Home fragrance brand, DE, Drinks and lifestyle brand, DE, Supplements brand, CH, Used designer furniture shop, DE, Dental brand, 5 markets

Filter bar

A row of icon tabs that jump to an anchor or switch the spotlight below it.

First built for Hair care brand, DE · 2, Store · 2, Store

Spotlight

A slider of panels, one origin each: name, claim, text, three facts with icons, a photo and a product button, with a numbered list on the side.

First built for Hair care brand, DE · 2

Process

Numbered steps with an icon, a title and a text in one row, beside the section heading.

First built for Hair care brand, DE · 2, Beauty brand, DE

Scale

A graded bar of stages on a dark band, each with a name, a tag and a text: here how green coffee is scored.

First built for Hair care brand, DE · 2

Testimonials

Three customer cards with the product photo, stars, a short quote, the name and a link to the product, under a heading with the overall rating.

First built for Hair care brand, DE, Food brand, DE, Supplements brand, CH, Longevity supplements brand, DE, Garden brand, DE, Presentation training brand, DE, Medical skincare brand, DE, Salt brand, DE

Image with scales

A photo beside a headline and text, with percentage bars that fill when they scroll into view: here how many tasters agreed.

First built for Hair care brand, DE, Food brand, DE, Dental brand, 5 markets

Three comparison cards, our own in the dark tone

Compare

Our coffee side by side with the usual alternatives, one card per option, with a points list on each.

First built for Dental brand, 5 markets, Presentation training brand, DE

Four problems, each with a photo, a title and a line of text

Painpoint

Picture cards for the problems customers know from ordinary coffee, a slider on mobile and a grid on desktop.

First built for Dental brand, 5 markets, Presentation training brand, DE

Authority bar

A row of proof points, each with a round photo, a big figure and a short line of text.

First built for Dental brand, 5 markets, Salt brand, DE

Icons

A row of overlapping round icon badges that spread on hover and show a tooltip with the caption.

First built for Dental brand, 5 markets

Green to roasted and cherry to dried bean, drag the handle

Before / after

A banner with a heading and text over before/after sliders, each with its own caption.

First built for Dental brand, 5 markets

Four hand-picked coffees with their own badges and notes

Want something like this in your store?

Write to me me@taras-slovak.com