Menu, live search, cart and account in one frosted dock. Drag it by the handle and it snaps to the top, bottom, left or right – a flick is enough. On phones it sits at the bottom, right under the thumb.
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 → Header → Add section → . It sits in the header group, so it shows on every page.
Code
One file. Copy it, paste it, done.
sections/werk-magnetic-nav.liquid
Locked
{%- comment -%} werk · Magnetic Nav · v1.3.0 · werk.build/license – do not remove {%- endcomment -%}{%- liquid assign s = section.settings # 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 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 assign mono_url = s.mono_font_url
2096 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 → Header. The navigation belongs to the header group, so it shows on every page.
2
Add the section
Add section → . It picks up your Main menu right away.
3
Hide the theme’s header
Click the eye icon next to your theme’s own header section. The Magnetic Nav takes no space in the page – it floats over it.
4
Check the edge and the logo
Choose where it starts with Position, pick a Logo image, then save and look at it once on your phone.
Throw it to an edge
Visitors grab the handle at the end of the dock. It lifts a little, four dashed targets show the edges and the one it would land on lights up. Let go – or just flick it – and it snaps to the edge the throw points at, with a soft spring. Arrow keys on the handle do the same. The edge is remembered for the next visit.
Drag the handle · release → snap
Every edge, its own layout
At the top and bottom the dock is a row. At the left and right edge it stands upright: the labels become tooltips, the search becomes an icon and the links move behind the menu button.
Turning is one move: the content blinks out, the empty glass folds into a small round shape, unfolds along the new edge and the new layout flows in.
Bottom · Top · Left · Right
Panels open away from the edge
Sub-menus, search results and country / language open in a glass panel that grows out of the dock – always towards the middle of the screen. At the bottom it grows upwards when its content changes. Esc or a click next to it closes it, and the focus goes back to the button that opened it.
Steps aside for your theme
When your theme opens something over the page – a cart drawer, a picture lightbox, a pop-up – the dock fades out and comes back once it is closed. So it never covers a checkout button.
Too many links for one row
The dock never squeezes itself. When it gets wider than the screen, the search field first shrinks to an icon. If it still doesn’t fit, the links move behind the menu button – the same look as Show links: Behind a menu button.
FitsCrowded – links behind the menu button
Good to know
It stays on top of everything
The dock and its panels sit in the browser’s top layer, so no sticky or animated theme container can cut them off or move them.
Keyboard and screen readers
Real buttons and links with visible focus. ⌘K or Ctrl+K jumps into the search from anywhere, ↓ and ↑ walk through the results, Esc closes every panel.
Calm for those who want it
Visitors who turned on “reduce motion” get no movement – the dock jumps to its edge. “Reduce transparency” gives it a solid background instead of glass.
Takes no space
The section itself is 0 px high. Nothing in your page shifts when it loads.
Position
Position
Default · Bottom
The edge the dock starts at. Visitors who moved it see their own edge instead. On phones it always sits at the bottom.
Bottom
Top
Left
Right
Bottom · Top · Left · Right
Let visitors move it
Default · On
Shows the handle. Off: no handle, the dock stays at Position.
Remember where it was moved
Default · On
Keeps the edge a visitor threw it to for their next visit. Only a real move is saved – just opening the page never overwrites it.
Distance to the edge
Default · 24px
Space between the dock and the edge of the screen, 8–48 px.
Logo
Logo
Default · Inside the navigation
Inside the navigationThe first thing in the dock.
Fixed, top leftStays in the top left corner, the dock moves without it.
Fixed, top centerStays at the top in the middle. Hidden while the dock sits at the top, so the two never overlap.
HiddenNo logo.
In the dock · Fixed, top left · Fixed, top center
Logo image
Default · Empty
Without an image the dock shows your store name as text – upright at the left or right edge only its first letter.
Logo width
Default · 72px
40–200 px.
Link the logo
Default · On
A click on the logo takes visitors to your home page. Off: the logo is just a picture, no link.
Logo link
Default · Empty
Sends the logo somewhere else, e.g. a landing page. Empty = your home page.
Menu
Default · Main menu
Pick a menu from Content → Menus. Three levels are used: the top links, their sub-menus and the links below those. The page a visitor is on gets a small dot in the accent colour.
Show links
Default · In the navigation
On phones and at the left or right edge the menu button is always used.
In the navigationEvery link sits in the dock.
Behind a menu buttonOne Menu button opens a numbered list. Best for menus with many links.
In the navigation · Behind a menu button
Menu button label
Default · Menu
The text on the menu button. On phones only the icon shows.
Show sub-menus as a dropdown
Default · On
Links with a sub-menu get a small arrow and open a short list above the dock. Off: they are plain links to their own page and the sub-menu is not shown. In the menu button’s list the sub-links sit under their parent.
Extra link block
Extra link
A link after the links of your menu – for a campaign or a badge you don’t want in the store’s menu. Up to 4.
SettingWhat it doesDefault
LabelThe text in the dock.Sale
LinkWhere it goes.Empty
BadgeA small pill in the accent colour, e.g. “New” or “-20%”. Empty = no badge.Empty
Search
Show search
Default · On
Visitors type right in the dock and the results grow out of it. Live search from Shopify’s own search: up to four products with image and price, plus collections, pages and blog posts. Results come after the first letter, Enter opens the full search page.
Search style
Default · Search field
When the dock gets crowded, the field turns into the icon on its own.
Search fieldA field in the dock with the placeholder and the ⌘K hint. At the left or right edge it is an icon that unfolds into the page when a visitor clicks it.
Icon onlyA magnifier that opens the search in a panel. Saves room for more links.
Search field · Icon only
Placeholder
Default · Search products
The text in the empty field – in the dock and in the search panel.
Cart & account
Show cart
Default · On
A bag with a live count. It updates the moment something is added anywhere on the page, with a small bump.
Cart opens
Default · The theme's cart drawer
If your theme has no cart drawer, the cart page opens.
The theme’s cart drawerOpens Horizon’s or Dawn’s drawer. Themes without one open the cart page.
The cart pageAlways goes to the cart page.
Show account
Default · On
A person icon, or the customer’s initial once they are logged in. Only shows when customer accounts are turned on in Settings → Customer accounts.
Show country / language
Default · Off
A globe that opens Shopify’s country and language selector. Only shows when your store sells in more than one country or language. On phones it moves into the menu, so the store name keeps its room.
Colors
Default · Own colors
Use theme colors takes the text and background of your page and hides the fields below. It reads them while the page loads, so it follows your colour scheme.
1Background#FFFFFFThe glass of the dock and its panels
4Accent#F2571FCart count, badges, the current page dot
5Text on accent#FFFFFFNumber in the cart count, badge text
Background opacity
Default · 72 %
40–100 %. Below 100 % the page shows through, blurred like frosted glass. 100 % = solid.
Background #1C1B1A · Text #FFFFFF
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: Onest for the dock, Geist Mono for small labels. On: your theme’s body font.
Self-hosted font URLReplaces Onest. Upload a .woff2 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.
Link hover style
Default · Clean
How links react on hover. In the dock they are not underlined at rest – it’s navigation, not body copy.
Clean
Dot to arrow
Rolling text
Fill
Shine
Hover them – click a button for loading → added
JournalCleanGrows a touch, the underline runs out and backJournalDot to arrowThe dot grows into an arrowJournalRolling textThe label rolls up, a copy followsJournalFillColour wipes in from the leftJournalShineA band of light passes over
Animations & easing
Default · On · werk Signature
Off: panels open without motion and the dock jumps to its edge. Easing sets the feel of the snap and every panel.
werk SignatureSlow start, soft landing
SmoothEven and quiet
BounceA small overshoot
SnapQuick start, gentle stop
GlideSlow in, slow out
Menu button labelMenuMenu button on phones, at the side edges and with Show links: Behind a menu button
PlaceholderSearch productsSearch field in the dock and in the search panel
Desktop · at its edge, draggable
Tablet · search shrinks first
Phone · fixed at the bottom
PhoneBelow 750 px the dock sits at the bottom and can’t be moved. Menu button on the left, search as an icon. The search opens at the top of the screen, above the keyboard.
PanelsOn phones every panel opens as a sheet above the dock.
Country / languageMoves from the bar into the menu (last row), with a Back button in its panel.
TabletSame as desktop. With many links the search field becomes an icon first, then the links move behind the menu button.
TouchOnly the handle starts a drag – a swipe on the dock scrolls the page as usual.
Horizon4.2TestedCart drawer and live count
Dawn16TestedCart drawer and live count
Header group only
The section can only be added to the header group, so it is on every page without extra work.
Empty in the theme editor?
Without a menu, search, cart and logo in the dock there is nothing to show – the editor says so in place of the dock.
I see two headers.
Hide your theme’s own header section with the eye icon in the header group.
The dock is at a different edge than I set.
You moved it yourself while testing – it remembers that. Clear the site data in your browser, or turn off Remember where it was moved.
My links are behind a menu button although Show links is In the navigation.
They don’t fit in one row next to search, cart and account. Use Icon only for the search, shorten the link names, or drop an extra link.
A sub-menu doesn’t open.
Show sub-menus as a dropdown is off, or the link has no sub-menu in Content → Menus.
The account icon is missing.
Customer accounts are turned off in Settings → Customer accounts.
The globe for country / language is missing.
Your store sells in one country and one language only – there is nothing to choose.
The cart opens a page instead of the drawer.
Your theme has no cart drawer the section knows (Horizon, Dawn), or Cart opens is set to The cart page.
The cart count doesn’t change after adding.
Horizon and Dawn update right away. Other themes may not send the cart event – the count updates on the next page.
1.3.012 Oct 2026
NewTurning to the left or right edge (and back) is now one move instead of a jump: the content blinks out, the glass folds into a small round shape, unfolds along the new edge and the new layout flows in.
NewSearch: visitors type right in the dock and the results grow out of it – no second field in a panel. At the left or right edge the icon unfolds into a field and the dock widens into the page. Phones, Icon only and a crowded row keep the search panel.
New⌘K / Ctrl+K puts the cursor in the field, ↓ ↑ walk through the results, the hint reads „Ctrl K“ outside macOS.
NewThe dock steps aside while the theme shows something over the page that locks scrolling (Dawn's cart drawer, lightboxes, pop-ups) – before, it sat on top of them and covered the checkout button on phones.
NewThird-level links now also show in the menu list (phones, left / right edge, menu button) – before, only the dropdown had them.
NewPhones: the search opens at the top of the screen and never gets taller than what the keyboard leaves free – before, the keyboard slid over the field. An X closes it (touch screens have no Esc key).
NewThe menu icon turns into an X while the menu is open, and the X closes it – also from a drill-down.
New⌘K / Ctrl+K no longer opens the theme's own search window on top (Horizon).
NewFocus rings are in the text colour instead of the accent.
NewSmall touches: the first results flow in one after the other, thumbnails zoom a little on hover, rows and buttons give on press.
NewA menu taller than the screen scrolls with a thin bar in the text colour instead of the system scrollbar (Windows). Screens with overlay scrollbars – macOS, phones – look as before.
Fixed„No results“ in the search had a dashed frame.
FixedEscape on a search result closed the results and opened them again a moment later.
Fixedmoving from one dropdown to a taller one flashed a scrollbar while the panel grew – on Windows it also squeezed the content for a moment.
1.2.06 Oct 2026
NewLabel font URL (Fonts) – swap Geist Mono, the small labels and 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.1.05 Oct 2026
NewLogo link: choose whether the logo is a link and where it goes – empty = your home page. Before, it always went to the home page.
1.0.02 Oct 2026
NewFirst stable release – stress tested, full docs.
* 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.
Extra link block
SettingWhat it doesDefaultLabelThe text in the dock.SaleLinkWhere it goes.EmptyBadgeA small pill in the accent colour, e.g. “New” or “-20%”. Empty = no badge.Empty
Background#FFFFFFThe glass of the dock and its panelsText#1C1B1ALinks, store name, iconsText muted#85827CPlaceholder, descriptions, numbersAccent#F2571FCart count, badges, the current page dotText on accent#FFFFFFNumber in the cart count, badge text
