A collection becomes a walk. While visitors scroll, the products travel along a curved trail, small and soft on the way in, sharp and big at the stop. The one at the stop shows its name, price, options and add to cart in a calm dock beside it, then moves on for the next. Snap or one product per scroll, three trail shapes, and a plain row for visitors who prefer less motion.
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-collection-trail.liquid
Locked
{%- comment -%} werk · Collection Trail · v1.3.0 · werk.build/license – do not remove {%- endcomment -%}{%- liquid assign s = section.settings # Demo pictures and fonts load from the werk demo store's Files (Shopify CDN), so the section looks the same in any store. # The demo reuses the twelve objects of Product Canvas (“Things for slow days”), on their tone backdrop (-b). assign werk_cdn = 'https://cdn.shopify.com/s/files/1/0954/8303/5932/files/' assign font_url = werk_cdn | append: 'werk-onest.woff2' assign mono_url = werk_cdn | append: 'werk-geist-mono.woff2' if s.font_url != blank assign font_url = s.font_url endif if s.mono_font_url != blank
2943 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 → open the page → Add section → . It comes with four demo objects, so you see the whole trail right away.
2
Pick your products
Choose a Collection – or add Product blocks to hand-pick the products and their order.
3
Set how many walk the trail
Products shown takes 2 to 24. Four to eight feel best: every product adds a stretch of scrolling.
4
Scroll it
Preview the page and scroll through the section: every product stops next to its name, price, options and add to cart.
On the way: the last product leaves towards the visitor, the next ones come in small and soft
The stop
The section is one screen high and stays put while the page scrolls through it. Products come in small and soft from far away, grow all the way and are sharp and big at the stop. The one at the stop stands in front; then it grows on, leaves the screen and makes room for the next.
The info dock
Next to the stop sits the dock with everything for the product standing there: name, short description, price, options, add to cart and a link. It appears once the first product stands at the stop – before that the stage belongs to the heading and the cards coming in. It changes halfway between two stops, so the new text has arrived together with its card. The name rises word by word.
Getting around
•Scroll – the trail follows every pixel. See Scrolling for snap and one product per scroll.
•Click a card on the way – the page scrolls until it stands at the stop. The cursor says Bring here.
•Click the card at the stop – it opens the product.
•Keyboard – ← and → move one product. ↑ ↓ and Page keys scroll the page as always.
Without the trail
With Animations off, for visitors who prefer reduced motion and without JavaScript the products show as a plain row: picture, name, price, link.
The same products as a row – for visitors who prefer less motion
Collection
Default · Empty
The products of the collection, in its order. Until you pick one, the section shows our demo objects.
Products shown
Default · 4
How many products of the collection walk the trail. The section grows with every product – see Scroll per product.
Theme editor
Collection Trail
Product: Bud Vase
Product: Pour-over Dripper
Product: Tea Cups, Pair
Product
Hand-picked products, in the order of the blocks. As soon as one block has a product, the blocks replace the collection. Up to 24.
SettingWhat it doesDefault
ProductThe product for this stop.Empty
Card pictureReplaces the product's first picture on the card – e.g. a mood shot instead of the packshot.Empty
Heading
Default · Things for slow days
Stays at the top while the products pass. Bold, italic and links work. Empty takes the title of the collection.
Background word
Default · Slow days
One big, faint word behind everything – it scales to fit the screen, on phones in up to two lines. Keep it short.
Trail shape
Default · S-curve
Where the products come from and where they leave.
Every screen size has its own trail, so cards never stretch. The wave needs width: below 990 px the section uses the S-curve.
S-curve
Arc
Wave
S-curveS-curve – in from the top, out at the bottom
ArcArc – a wide bow from the side
WaveWave – level from the side, in a swing
Show the trail
Default · On
The dotted line the products follow.
Space between cards
Default · 28%
How far the products are apart on the trail. Small: several cards are in the picture at once. Large: one product at a time.
18 %40 %
Card size
Default · Medium
The size of the card at the stop. On small screens the card shrinks by itself when the dock needs the room.
Small
Medium
Large
SmallSmall
MediumMedium
LargeLarge
Card format
Default · Portrait 4:5
The format of every card.
Portrait 4:5
Square
Tall 2:3
PortraitPortrait 4:5
SquareSquare
TallTall 2:3
Pictures
Default · Fill the card
Fill the card crops the picture to the card's format; Show whole picture fits it in.
Fill the card
Show whole picture
Fill the cardShow whole picture
Numbers on cards
Default · On
A small number in the corner of every card – 01, 02 …
Blur cards on the way
Default · On
Products far away are soft and get sharp at the stop. Tablets, phones and touch screens fade the cards instead – blur costs them too much.
Scrolling
Default · Snap to each product
Snap: the trail settles on the nearest product when visitors stop scrolling. One product per scroll: each wheel or trackpad gesture moves exactly one product (wide screens with a mouse; phones snap).
Snap to each productvisitors scroll freely; when they stop, the trail settles on the nearest product.
One product per scrollevery turn of the wheel or swipe on the trackpad moves exactly one product, however hard. At the first and the last product the page scrolls on. Phones and touch screens snap.
Freeplain scrolling, the trail stops wherever the visitor does.
Scroll per product
Default · 70vh
How far visitors scroll from one product to the next, in screen heights (70 = 70 % of the screen). The section is one screen plus this stretch per product: eight products at 70 are a little over six screens of scrolling.
Position
Default · Left
Left or right of the stop on wide screens – Right mirrors the whole trail. Tablets and phones show the dock at the bottom.
Left
Right
Position: Right – the trail runs mirrored
Short description
Default · On
The first lines of the product description, cut after 40 words. When the dock gets too tall for the screen, the description steps aside first.
Add to cart
Default · On
Add to cart with the price in the button. Off, the dock shows name, price and the link only.
After a click: the button confirms, the cart count in the header goes up
Options
Default · On
Every option of the product as a line of chips. The dark choice glides from one value to the next. Phones, options with more than six values and docks that run out of room use dropdowns instead. The choice is kept per product while the trail moves on.
ChipsChips – the price follows the variant
Sold outA value that can't be bought is crossed out
DropdownMore than six values become a dropdown
Link to the product
Default · On
A text link to the product page next to the button (wide screens). The card at the stop links to the product everywhere.
After add to cart
Default · Stay on the trail
Stay on the trail keeps visitors scrolling; Open the cart opens your theme's cart drawer – or goes to the cart page when the theme has none.
Stay on the trail
Open the cart
Fonts
Default · Design fonts
Onest and Geist Mono from werk's CDN. Use theme fonts swaps every font at once. Or swap each one with its own URL – Self-hosted font URL replaces Onest; Label font URL replaces Geist Mono (the option labels and the numbers on the cards). Empty keeps werk's font.
1Background#EDECE9The whole stage
2Text#1C1B1AHeading, names, prices, chips
3Small text#85827COption labels and the trail
4Accent#F2571FThe hover of the button styles Dot to arrow and Fill
Use theme colors takes the text and background colour of the page around the section. Button and Button text give the button its own colours – empty keeps the design: the text colour with the background colour on it.
Background, text and small text changed – the button follows
Buttons
Default · Clean
Use theme buttons gives Add to cart your theme's style. Button style sets how button and link react on hover.
Hover them – click a button for loading → added
View productCleanGrows a touch, the underline runs out and backView productDot to arrowThe dot grows into an arrowView productRolling textThe label rolls up, a copy followsView productFillColour wipes in from the leftView productShineA band of light passes over
Easing
Default · werk Signature
How the trail settles on a product and how the dock's text comes in.
werk Signature
Smooth
Bounce
Snap
Glide
werk SignatureSlow start, soft landing
SmoothEven and quiet
BounceA little past the stop and back
SnapQuick start, gentle stop
GlideSlow in, slow out
Animations
Default · On
Off: no trail – the products show as a row. Visitors who turned on “reduce motion” on their device always see the row.
Add to cartAdd to cartThe button – the price follows by itself
AddedAddedThe button after a successful add
Sold outSold outThe button and the dropdown for variants that can't be bought
Choose an optionChoose [option]The button when the chosen combination doesn't exist – [option] becomes the option's name
ErrorCouldn't add it to the cart. [message]Under the button when the shop refuses – [message] is the shop's reason
Link to the productView productThe link next to the button and the button of subscription-only products
Cursor on other cardsBring hereThe cursor label on cards that are on their way
Screen reader: trailProduct trailName of the section for screen readers
Screen reader: show productShow [product]Label of the cards on the way
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.
Desktop · dock beside the stop
Tablet · dock along the bottom
Phone · a compact sheet
The name, options as dropdowns, the price in the full-width button
DesktopTabletPhone
DockLeft or right of the stopAlong the bottomA sheet at the bottom
OptionsChipsChipsDropdowns
DescriptionShownShownHidden
Link to the productNext to the buttonOn the cardOn the card
Trail shapeS-curve, arc, waveS-curve, arcS-curve
Far-away cardsBlurredFadedFaded
ScrollingSnap, one per scroll or freeSnap or freeSnap or free
The trail keeps clear of the dock: on tablets and phones it only uses the room above the tallest dock of all products, so nothing jumps while scrolling. A header or a bar docked at the bottom of the screen is measured too.
The editor follows you
Click a Product block in the theme editor and the trail brings it to the stop.
The cart stays your theme's
Add to cart tells your theme, so the cart count in the header updates without a reload.
Nothing loads on the way
Names, prices and variants of every product come with the page – a product reaching the stop never waits for the network.
Light on the page
One loop, and only while the section is on screen and something moves. No libraries.
AI label
Using an AI-generated picture? Switch on AI label under that picture and pick a corner. The text and the look – pill, info dot or upright along the edge – are set once for the whole section, under AI label. Only for own card pictures – product pictures never get one.
Horizon4.2TestedAdd to cart with every kind of product (cart count updates), theme fonts, colours and buttons
Dawn16TestedAdd to cart with every kind of product (cart bubble and drawer update), theme fonts, colours and buttons
The section shows demo objects.
No collection is picked and no Product block has a product yet. Pick a Collection or add Product blocks.
A product is missing.
It is a draft or not published in the online store – or the collection has more products than Products shown. Raise the number (up to 24).
A picture is cut in the wrong place.
Only when Pictures fills the card. Set a focal point on the picture in Shopify (Products → the product → click the picture → Edit) – the card keeps that spot in view. Or switch Pictures to Show whole picture.
The page feels very long.
Every product adds a stretch of scrolling. Show fewer products or lower Scroll per product.
One product per scroll doesn't work on my phone.
That mode needs a mouse wheel or a trackpad. Phones and touch screens snap to the nearest product instead.
I see a row instead of the trail.
Animations is off – or your device asks for reduced motion (on a Mac: System Settings → Accessibility → Display → Reduce motion).
The wave looks like the S-curve.
The section is narrower than 990 px there – tablets and phones always use the S-curve.
A product has a View product button instead of Add to cart.
It can only be bought with a subscription. Visitors pick their plan on the product page.
The cards have a grey background.
The picture is missing or has a transparent background. The card shows a soft tone of your text colour behind it.
1.3.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.
1.2.011 Oct 2026
NewAI label per picture (EU AI Act). Under every own picture and video a switch with the corner; the text and the look – pill, info dot that opens on hover, or upright along the edge – are set once under AI label. Off by default, nothing changes until you switch it on. Product and collection pictures from Shopify never get one.
NewThe old single note (Show AI label) is replaced by the labels per picture. Its setting stays, but only shows in the editor while it is on – turn it off and switch the label on at the picture. AI label is now the text of the labels.
1.1.111 Oct 2026
FixedFix: with a bar docked at the bottom of the screen (a nav dock, a sticky bar) the cards were tiny while the section scrolled into view and grew once it stood – the room above the bar is now measured against the stage where it sticks. Cards keep their size on the trail from the first pixel.
NewNames are never cut any more: they wrap, long ones step down in size. The ellipsis of a cut name stayed behind while the words moved on to the next product.
NewPhones: the sheet slides up from below once the first product stands at the stop (tablets too); the price beside the name steps aside while the button carries it; dropdowns with long names or values sit one per line.
1.1.011 Oct 2026
NewThe info dock stays away until the first product stands at the stop – no name, price or button for a product that isn't there yet.
NewOption chips use the shared werk option preset “Glide”: the dark choice glides to the new value, hover shows a soft ghost, pressing squashes the chip a little.
ImprovedCalmer focus: dropdowns show a quiet line in the text colour around the whole field (not an orange box around the bare select), and every focus ring is the text colour instead of the accent. Accent now only colours the hover of the button styles Dot to arrow and Fill.
NewThe “No products yet” note only shows in the theme editor.
1.0.010 Oct 2026
NewFirst stable release. Same code as 0.4.0.
* 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.
Background#EDECE9The whole stageText#1C1B1AHeading, names, prices, chipsSmall text#85827COption labels and the trailAccent#F2571FThe hover of the button styles Dot to arrow and Fill
