Guide · 2 minutes
How to add a custom section to your Shopify theme
To add a custom section to Shopify without an app: duplicate your theme, open Edit code, create a new Liquid file in the sections folder, paste the section code and save. Then open Customize, click Add section and choose it. The steps below work for any Online Store 2.0 theme.
Install in four steps
Prefer a walkthrough? See the full installation guide.
- STEP 01
Duplicate your theme
In Shopify admin go to Online Store → Themes. Next to your current theme click ⋯ → Duplicate. Make every change on the copy.
- STEP 02
Create the section file
On the copy, click ⋯ → Edit code. In the sections folder click “Add a new section”, choose Liquid, give it the file name shown on the component page, delete the starter code, paste ours and click Save.
- STEP 03
Add it to a page
Click Customize, open the template you want, click “Add section” and pick the new section. Edit the text, blocks and colours in the sidebar, then Save.
- STEP 04
Check it, then publish
Preview on mobile and desktop. When you are happy, publish the duplicate theme.
Common questions
Do I need an app to add a custom section to Shopify?
No. Online Store 2.0 themes let you add section files in the code editor. Once saved, the section appears under “Add section” in the theme editor.
Will a custom section slow down my store?
Our sections load no external libraries or fonts, use Shopify's image CDN, and keep JavaScript to a few lines, only where a section needs interaction.
What happens when I update my theme?
Theme updates install a fresh copy of the theme, so custom files are not carried over. Keep a copy of the code and add the file again after updating.
Does this work with the Horizon theme?
Our sections are self-contained section files with their own blocks, a format every Online Store 2.0 theme supports, including Dawn and Horizon.
Pick a section to install
FAQ Accordion
Copy-paste FAQ accordion section for Shopify. Keyboard accessible, adds FAQPage structured data, works on Online Store 2.0 themes. No app needed.
Logo Marquee
Free scrolling logo bar for Shopify — "as seen in" or partner logos. Pure CSS animation, pause button, reduced-motion friendly. Copy, paste, done.
Trust Badges
Free trust badge section for Shopify: shipping, returns, secure checkout and support icons. Lightweight inline SVG, no JavaScript, no app.
Countdown Timer Bar
Free countdown timer bar for Shopify sales that ends at a real date and time you set, then hides or shows a message. Liquid code, no app.
Announcement Marquee
Free scrolling announcement bar for Shopify with multiple messages, links, a pause button and reduced-motion support. Paste the Liquid, no app.
Shipping Progress Bar
Free shipping progress bar for Shopify that shows how much more to spend, updates when the cart changes, and hides for other currencies. No app.
Comparison Table
Free "us vs them" comparison table section for Shopify with check marks, text values and a highlighted column. Accessible HTML table, no app.
Size Chart Popup
Free size chart popup for Shopify product pages: a size guide button that opens an accessible dialog with your measurements table. Liquid code, no app.
Before/After Slider
Free before and after image slider for Shopify. Drag the handle or use the keyboard to compare two photos. Accessible, lightweight Liquid, no app.
Testimonials Carousel
Free testimonials carousel section for Shopify with star ratings, photos and swipeable cards. No autoplay, keyboard friendly, no slider library.
All free Shopify sections
Get a Shopify theme built around your brand
Custom sections, a full theme build, or changes to the theme you already have. Tell us what your store needs and we'll scope it with you.
Not affiliated with or endorsed by Shopify Inc. Shopify is a trademark of Shopify Inc.