The gallery shows exactly the images of the chosen colour and crossfades in the direction you move. Next to it, the label is built from blocks in your order – title, price, options, stock, delivery promise and more. When the buy button scrolls away, a sticky bar rises and sweeps open.
In your theme code editor (Online Store → ⋯ → Edit code), click the sections folder, then “New File”, name it and hit Enter.
02
Paste the code
In the file that just opened, paste the code below. Then hit Save (top right corner).
Note: Shopify shows no confirmation when a section saves – that’s normal.
03
Add it in the theme editor
Saved? Then reload the theme editor – otherwise the new section sometimes doesn’t show up. After that: Edit theme → Add section → . Everything else is in the sidebar – the Docs below explain every setting.
Code
One file. Copy it, paste it, done.
sections/werk-product-buy-box.liquid
Locked
{%- comment -%} werk · Product Buy Box · v1.4.0 · werk.build/license – do not remove {%- endcomment -%}{%- liquid assign s = section.settings # Demo images and fonts load from the werk demo store's Files (Shopify CDN), so the section looks the same in any store. assign werk_cdn = 'https://cdn.shopify.com/s/files/1/0954/8303/5932/files/' assign demo_img = werk_cdn | append: 'werk-product-buy-box-' assign demo_title = 'Vessel Three' assign serif_url = werk_cdn | append: 'werk-instrument-serif.woff2' assign serif_i_url = werk_cdn | append: 'werk-instrument-serif-italic.woff2' assign sans_url = werk_cdn | append: 'werk-instrument-sans.woff2' assign mono_url = werk_cdn | append: 'werk-geist-mono.woff2' if s.font_url != blank
3455 lines · Liquid, CSS & vanilla JS
Free – just add your email
Every section is free during launch. Enter your email once and copy any code you like.
Edit theme → Products → Default product, or the template your products use.
2
Add the section
Add section → . The preset brings every block in a sensible order.
3
Hide the theme’s product information
Otherwise the product shows twice. The section takes the page’s product on its own.
4
Set the delivery promise
Delivery promise block → Order cut-off, Ships on and the transit days. Leave the cut-off empty if you don’t want it.
5
Tag your images per color
In the product admin, add #sage – your color as spelled in the option – to each image’s alt text. Then the gallery follows the chosen color.
The gallery follows the color
An image belongs to a color through the variant image or a #tag at the end of its alt text. Images without a tag show for every color. Pick a color and the gallery shows only its images, starting at 01.
Sage chosenIron chosen
Alt text
Products → your product → Media → click an image → alt text.
Sage — front #sageShows for Sage. The caption under the image reads “Sage — front”.
Detail of the glazeNo tag: shows for every color.
A label, not a form
Blocks stack in the order you set in the theme editor. On desktop the label sits next to the image, on tablets below it in two columns – eyebrow, title, subtitle, text and price left, the rest right. On phones it’s one column.
Tablet · two columns · Phone · one column
After “Add to cart”
A spinner, then a check that draws itself. With Split on, the dark button shrinks to the right and becomes Checkout while View cart wipes in from the left. No cart drawer – the theme hears about the new item, so cart counts that listen update.
Add to cart → Added → View cart / Checkout
Placeholders
Words in brackets fill themselves. Use them in any text setting that lists them.
[count]Items left of the chosen variant[count] left in [variant]→3 left in Sage / M
[variant]The chosen options – left out with the word in front of it when a product has noneLast one in [variant]→Last one in Iron / S
[n]QuantityQty [n]→Qty 2
[h] [m]Hours and minutes to the cut-offOrder within [h] h [m] m→Order within 3 h 12 m
[day]Weekday it shipsShips [day]→Ships Monday
[date] [from] [to]Arrival date, or first and last day of a window→ [from] – [to]→→ Wed 30 Sep – Fri 2 Oct
[weekday] [d] [month]Parts of a date[weekday], [d]. [month]→Mi., 30. Sep.
[Word]In the shipping note: links the word to your shipping policy[Shipping] calculated at checkout.→Shipping calculated at checkout.
Look
Look
Default · Classic
Two ways to hang the work. The blocks, the buy buttons and the sticky bar are the same in both.
ClassicOne image at a time in its frame, a counter and caption below. Click the left or right half to move on.
LookbookEvery image of the chosen color stands large, one below the other, each with its caption in the corner. The label stays beside them while you scroll; a thin rail on top of it shows where you are – 01 / 05 – and jumps to an image on click. Picking another color swaps the images in place and scrolls back to the first one. On tablets and phones the images become a swipe row where the next one peeks in, with the rail below.
Show images 3 and 4 side by side
Default · On
Lookbook on desktop, with 4 or more images: the third and fourth image share a row – full, full, pair, full. Off: every image full width.
Only visible in the Lookbook look
Gallery
Product
Leave it empty on product pages – the section takes the page’s product. Pick one for landing pages or the home page. Without any product it shows the demo vase.
Image ratio
Default · 4:5
The frame’s shape. Images are cropped to fit.
4:5Portrait, like a print.
3:4A little wider.
1:1Square.
Original (first image)The ratio of the product’s first image.
4:5 · 1:1
Only show images of the chosen color
Default · On
Filters the gallery by color – see How it works. Off: every image, always.
Preview a color on hover
Default · On
Hovering a color word shows its image before the click, with a small Preview tag. Leaving the word goes back. Mouse only.
Hover “Iron”
Image captions
Default · On
The alt text of each image, without the #tag, next to the counter 01 / 05. In Lookbook also small in the corner of each image on desktop.
Layout
Label position (desktop)
Default · Bottom, like a wall label
How the label lines up with the image on desktop. Classic only – in Lookbook the label sticks at the top.
Bottom, like a wall labelThe label ends where the image ends.
CenterCentered next to the image.
TopStarts at the top of the image.
Only visible in the Classic look
Bottom · Center · Top
Fold into a bar on scroll
Default · On
When the buy buttons scroll out of view, a slim bar sweeps in at the bottom – right to left, the button first. Scrolling back, it wipes away left to right and takes the button last. On phones it spans the full width.
Animations & easing
Default · On · werk Signature
The gallery crossfades, prices roll and the sticky bar sweeps. Visitors who turned on “reduce motion” on their device see no animation. Easing sets the feel of every movement.
werk SignatureSlow start, soft landing
SmoothEven and quiet
BounceA small overshoot
SnapQuick start, gentle stop
GlideSlow in, slow out
Fonts
Default · Own fonts
Use theme fonts swaps every font at once – or leave it off and swap each one with its own URL. Empty keeps werk’s font.
Use theme fontsOff: Instrument Serif for title and italic line, Instrument Sans for text, Geist Mono for labels. On: your theme’s heading and body fonts.
Self-hosted font URL (.woff2)Replaces Instrument Sans. Upload the file to Content → Files and paste its URL.
Heading font URL (.woff2)Replaces Instrument Serif – the headings and the italic lines. Upload the file to Content → Files and paste its URL.
Label font URL (.woff2)Replaces Geist Mono – the small labels and numbers. Upload the file to Content → Files and paste its URL.
Colors
Default · Own colors
Use theme colors takes the text and background of the page around the section and hides the fields below. Muted text and the image background are then mixed from them. Button and Button text give the buttons their own colours – empty keeps the design.
Buttons
Default · Clean
Use theme buttons gives Add to cart your theme’s style – then only the text links follow the style below. Button style sets how buttons and text links react on hover.
Hover them – click a button for loading → added
Read moreCleanGrows a touch, the underline runs out and backRead moreDot to arrowThe dot grows into an arrowRead moreRolling textThe label rolls up, a copy followsRead moreFillColour wipes in from the leftRead moreShineA band of light passes over
Padding top / Padding bottom
Default · 110 px
Space above and below the section, 0–200 px. Scales down on smaller screens.
DefaultTranslated · German
Cursor: nextNext →The cursor pill on the right half of the image (Classic) Only in Classic
Cursor: previous← PrevThe cursor pill on the left half (Classic) Only in Classic
Hover preview tagPreviewTop right in the image while a color is previewed. Empty = no tag
Gallery nameProduct imagesScreen readers only
Previous imagePrevious imageScreen readers only Only in Classic
Next imageNext imageScreen readers only Only in Classic
Eyebrow
A small line above the title, e.g. a catalogue number. Also shows in the sticky bar.
SettingWhat it doesDefault
TextPlain text. Connect a metafield with the database icon to fill it per product.Nº 03
Title
The product title, set in the serif. It’s the page’s heading on product pages. No settings.
Subtitle
The italic line under the title – material, year, maker.
SettingWhat it doesDefault
TextPlain text, set in italics. Metafield possible.Glazed stoneware, 2026
Text
A short text under the title. Add it as often as you like.
SettingWhat it doesDefault
TextRich text. Empty = the block stays hidden.Empty
Price
The price of the chosen variant. When it changes, only the digits that differ roll. A compare-at price shows crossed out.
SettingWhat it doesDefault
Show tax and shipping noteA small line under the price. Required in Germany and many EU countries.On
Prices include taxShown when your prices include tax.Tax included.
Prices exclude taxShown when they don’t.Tax excluded.
Shipping noteThe [word] in brackets links to your shipping policy.[Shipping] calculated at checkout.
Options
Every product option as a row of words. The chosen one is dark, sold-out values are crossed out. Products without variants show nothing. No settings.
Quantity
Minus, number, plus. Stops at the stock of the variant when you don’t sell beyond it.
SettingWhat it doesDefault
LabelThe word in front of the number.Qty
Minus buttonScreen readers only.Decrease quantity
Plus buttonScreen readers only.Increase quantity
Low stock
Five dots and a short line when few items are left of the chosen variant. Only for variants whose inventory is tracked and that stop selling at 0.
SettingWhat it doesDefault
Show fromShows at this many items or fewer, 1–20.5
Few left[count], [variant][count] left in [variant]
Last oneWhen exactly one is left.Last one in [variant]
Sold outWhen the variant is sold out.Sold out in [variant]
Receipt line
Sums up the choice in mono above the button. Only the part that changed fades. Errors from the cart show here for a moment.
SettingWhat it doesDefault
Quantity[n] = quantity. Empty = left out. The shipping day comes from the Delivery promise block.Qty [n]
Buy buttons
Add to cart with the price in the button, optionally Shopify’s dynamic checkout below. The sticky bar uses the same texts.
SettingWhat it doesDefault
Show dynamic checkout buttonShopify’s Buy it now / express checkout, in an outline.On
Split into View cart / Checkout after addingOff: the button goes back to Add to cart after 2.4 s.On
Add to cartButton label.Add to cart
Sold outLabel for sold-out variants.Sold out
AddedRight after adding.Added
View cartLeft half after the split.View cart
CheckoutRight half after the split.Checkout
Delivery promise
When the order leaves and arrives, with a week strip up to the arrival. Counts in your shop’s time zone and updates every 30 seconds. Transit days count only days you ship on, minus the days off.
SettingWhat it doesDefault
Order cut-off24 h, e.g. 14:00. Empty = block hidden.14:00
Ships onMonday to Friday, Monday to Saturday or Every day.Monday to Friday
Delivery takes at leastDays, 1–14.2
Delivery takes at mostDays, 1–14. More than at least = a window.2
No shipping onDays off as MM-DD, separated by commas.12-24, 12-25, 12-26, 12-31, 01-01
Before the cut-off[h], [m]Order within [h] h [m] m
Last hour before the cut-off[m]Order within [m] min
Ships todayAlso in the receipt line.Ships today
Ships tomorrowAfter the cut-off.Ships tomorrow
Ships later[day] – full name here, short in the receipt line.Ships [day]
Arrival[date]→ [date]
Arrival window[from], [to]. Same month: it shows once.→ [from] – [to]
WeekdaysStarting with Sunday, separated by commas.Sunday, Monday, …
Weekdays, shortFor dates and the receipt line.Sun, Mon, …
Weekdays in the stripTwo letters each.Su, Mo, …
Months, shortJanuary to December.Jan, Feb, …
Collapsible
A heading with a plus that opens its text inline. Collapsibles next to each other form one row, only one open at a time.
SettingWhat it doesDefault
HeadingThe word in the row.Details
ContentRich text. Empty = the product description.Empty
Side padding
Default · Match theme
Match theme (the default) lines the section up with your theme's page margin – in Horizon the same edge as header and footer. Themes without one, like Dawn, keep the werk edge. werk default always uses the werk edge, Custom takes your own values in px (desktop and tablets / phones), None runs the content to the edge. On desktop the two columns stay centred with their own space – the side padding sets the edge on tablets and phones.
Desktop · label next to the image
Tablet · label below, two columns
Phone · one column, swipe
TabletBelow 990 px the label moves under the image, in two columns: eyebrow to price on the left, the rest on the right.
PhoneBelow 750 px everything stacks in one column. Swipe to browse the gallery.
LookbookBelow 990 px the stacked images become a swipe row – the next image peeks in, the rail sits under the row.
Sticky barFull width on phones, with the choice, the price and the button.
No cart drawer
After adding, the section sends two cart events. Horizon listens and updates right away; in Dawn and the themes built on it the section refreshes the cart count and drawer itself. Other themes catch up on the next page.
shopify:cart:lines-update · cart:refresh
One sticky bar per page
With several buy boxes on one page, the bar belongs to the last one scrolled past and hides while any buy buttons are on screen.
Fast on big galleries
Only the image on show and its neighbours load. The rest loads when visitors get there.
Not supported yet
Subscription-only products, gift card recipient fields, B2B quantity rules, unit prices and store pickup. Videos and 3D models are skipped – the gallery shows images.
A picture is cut in the wrong place.
Every gallery picture fills its frame. Set a focal point on the picture in Shopify (Products → the product → click the picture → Edit) – the gallery keeps that spot in view.
The product shows twice.
Hide or remove your theme’s own product information section on the same template.
The gallery shows all images for every color.
The #tag must match the option value – #sage for Sage – and sit at the end of the alt text. Or switch off Only show images of the chosen color if you want all images.
The delivery promise doesn’t show.
Order cut-off is empty or not a time like 14:00.
The countdown is an hour off.
It uses your shop’s time zone – check Settings → General → Time zone.
Low stock never shows.
The variant’s inventory must be tracked and set to stop selling at 0, and the stock must be at or below Show from.
The cart count doesn’t change after adding.
Horizon and Dawn-based themes update right away. Other themes may not listen to the cart event – the item is in the cart, the count updates on the next page.
1.4.012 Oct 2026
NewSide padding. Match theme (the default) lines the section up with your theme's page margin – in Horizon the same edge as header and footer. Themes without one, like Dawn, keep the werk edge. werk default always uses the werk edge, Custom takes your own values in px (desktop and tablets / phones), None runs the content to the edge. On desktop the two columns stay centred with their own space – the side padding sets the edge on tablets and phones.
1.3.16 Oct 2026
NewCropped pictures keep the focal point you set on the image in Shopify (Content → Files or the product media) in view – the gallery pictures. Before, they were always cut around the centre.
1.3.06 Oct 2026
NewHeading font URL and Label font URL (Fonts) – swap Instrument Serif (headings, italic lines) and Geist Mono (labels, numbers) for your own .woff2. With Self-hosted font URL every font can now be swapped on its own; Use theme fonts still swaps all of them.
1.2.06 Oct 2026
NewButton and Button text colours (Colors). Empty = as designed – nothing changes until you pick one. Hidden while Use theme colors or Use theme buttons is on.
1.1.15 Oct 2026
NewColours with accents or umlauts (Grün, Écru …) show their own images and the hover preview: the #tag in the alt text is matched the way Shopify writes it (“#grün” becomes “grun”). Found while testing the Product Showcase, which shares this code.
1.1.02 Oct 2026
NewNew look Lookbook (setting Look, preset “werk · Product Buy Box – Lookbook”): every image of the chosen colour stacked large with its caption, the label sticky beside it, a progress rail that follows the scroll and jumps to an image. Below 990 px a native swipe row with the next image peeking in. New setting: Show images 3 and 4 side by side.
NewThe existing preset is now called “werk · Product Buy Box – Classic”. Classic looks and works as before.
NewTablet: long option names no longer push the low stock line out of the section (the label column for the option names is measured in its own column).
* Built for Online Store 2.0 and tested in Shopify's Horizon and Dawn themes. Heavily customised or older themes can still clash with it – if something looks off, write us and we'll take a look.
Cursor: nextNext →The cursor pill on the right half of the image (Classic) Only in ClassicCursor: previous← PrevThe cursor pill on the left half (Classic) Only in ClassicHover preview tagPreviewTop right in the image while a color is previewed. Empty = no tagGallery nameProduct imagesScreen readers onlyPrevious imagePrevious imageScreen readers only Only in ClassicNext imageNext imageScreen readers only Only in Classic
SettingWhat it doesDefaultTextPlain text. Connect a metafield with the database icon to fill it per product.Nº 03
SettingWhat it doesDefaultTextPlain text, set in italics. Metafield possible.Glazed stoneware, 2026
SettingWhat it doesDefaultTextRich text. Empty = the block stays hidden.Empty
SettingWhat it doesDefaultLabelThe word in front of the number.QtyMinus buttonScreen readers only.Decrease quantityPlus buttonScreen readers only.Increase quantity
SettingWhat it doesDefaultShow fromShows at this many items or fewer, 1–20.5Few left[count], [variant][count] left in [variant]Last oneWhen exactly one is left.Last one in [variant]Sold outWhen the variant is sold out.Sold out in [variant]
SettingWhat it doesDefaultQuantity[n] = quantity. Empty = left out. The shipping day comes from the Delivery promise block.Qty [n]
SettingWhat it doesDefaultShow dynamic checkout buttonShopify’s Buy it now / express checkout, in an outline.OnSplit into View cart / Checkout after addingOff: the button goes back to Add to cart after 2.4 s.OnAdd to cartButton label.Add to cartSold outLabel for sold-out variants.Sold outAddedRight after adding.AddedView cartLeft half after the split.View cartCheckoutRight half after the split.Checkout
SettingWhat it doesDefaultOrder cut-off24 h, e.g. 14:00. Empty = block hidden.14:00Ships onMonday to Friday, Monday to Saturday or Every day.Monday to FridayDelivery takes at leastDays, 1–14.2Delivery takes at mostDays, 1–14. More than at least = a window.2No shipping onDays off as MM-DD, separated by commas.12-24, 12-25, 12-26, 12-31, 01-01Before the cut-off[h], [m]Order within [h] h [m] mLast hour before the cut-off[m]Order within [m] minShips todayAlso in the receipt line.Ships todayShips tomorrowAfter the cut-off.Ships tomorrowShips later[day] – full name here, short in the receipt line.Ships [day]Arrival[date]→ [date]Arrival window[from], [to]. Same month: it shows once.→ [from] – [to]Date[weekday], [d], [month]. German: [weekday], [d]. [month][weekday] [d] [month]WeekdaysStarting with Sunday, separated by commas.Sunday, Monday, …Weekdays, shortFor dates and the receipt line.Sun, Mon, …Weekdays in the stripTwo letters each.Su, Mo, …Months, shortJanuary to December.Jan, Feb, …
SettingWhat it doesDefaultHeadingThe word in the row.DetailsContentRich text. Empty = the product description.Empty
