All sections free during launch

Recently copied

    How it works

    Forget this device?

    You’ll need your email again to copy code here. Your email and newsletter settings stay as they are.

    How it works

    From copy to live
    in two minutes.

    No app, no developer. Copy the code, paste it into your theme, add the section. That’s it.

    1. 01Copy
    2. 02Paste
    3. 03Add

    (01) Before you start

    Three things. That’s all.

    Theme

    An Online Store 2.0 theme

    Dawn, Sense, Craft, Refresh – and almost every theme sold since 2021. Vintage themes won’t work.

    Access

    Permission to edit themes

    You’re the owner, or your staff account can open “Themes” in the Shopify admin.

    Safety net

    Duplicate your theme first

    Themes → ⋯ → Duplicate. Work on the copy, publish when you’re happy. Zero risk.

    (02) The tutorial

    Five steps. Two minutes.

    Scroll through the steps – the video jumps along. After every step it pauses, so you can follow along in your own admin.

    One short clip per step – it plays as you scroll to it and stops at the end. Do the step in your admin, then scroll on.

    01Copy the code

    00:00 / 00:49

    1. Step 01 · 00:000:05

      Copy the code

      0:00 / 0:05

      Open any section and hit “Copy code”. First time? Drop your email – done.

      Browse sections →

    2. Step 02 · 00:050:08

      Open the code editor

      0:00 / 0:08

      In your Shopify admin, go to your theme’s code.

      Online Store⋯Edit code

    3. Step 03 · 00:140:11

      Create the section file

      0:00 / 0:11

      Copy the file name, click the sections folder, then “New File” at the top of the file list, and paste it in:

      werk-hotspot-panel.liquid

    4. Step 04 · 00:250:11

      Paste & save

      0:00 / 0:11

      Copy the code again, click into the new, empty file, paste it and hit Save.

      ⌘ V⌘ S

    5. Step 05 · 00:370:12

      Add the section

      0:00 / 0:12

      Open the theme editor and add it wherever you like. Pick a look under “Style”.

      Edit themeAdd sectionHotspot Panel

    (03) Styles & settings

    One file.
    Multiple looks.

    Most of our sections ship with more than one look. Switch it in the theme editor – no second file, no new code.

    Edit themeProduct StageStylePortrait

    (04) Updates & removing

    Change your mind? Easy.

    Update

    When we ship an update

    Open the file, replace everything with the new code, save. Your content and settings stay where they are.

    Edit codewerk-hotspot-panel.liquid⌘ A⌘ V⌘ S

    Remove

    Taking a section out

    Remove it from your page in the theme editor first, then delete the file in the Sections folder.

    Edit themeRemove sectionEdit codeDelete file

    Stuck?

    The four things that go wrong – and the fix for each.

    • Check the file sits in the Sections folder and the name matches exactly. Some sections only appear on the page types they’re made for.

    • Part of the code went missing. Copy it again and replace everything in the file – not just the top.

    Still stuck?
    We’re one message away.

    Send us your store link and a screenshot. A human answers – usually the same day.

    Write usBrowse sections