How Shopify sections work.
If you've used the theme editor, you've used sections. This page explains what's going on underneath, so you can tell what a new section will and won't be able to do in your store.
The four pieces.
Section
A reusable part of a page, like a hero or a testimonial row. In the theme it's one Liquid file in the sections folder.
Settings
The fields you see on the right of the theme editor: text, images, colors, a product picker. The section's code decides which ones exist.
Blocks
Smaller pieces inside a section that you can add, remove and reorder. A slide in a slider, or a question in an FAQ.
Template
The list of sections on a page type, in order, with their settings. In 2.0 themes this is a JSON file.
What to know before you add one.
What Online Store 2.0 changed
In older Shopify themes, you could only add and rearrange sections on the home page. Product pages, collection pages and regular pages were fixed by the theme's code, and changing them meant editing Liquid.
Online Store 2.0, which Shopify introduced in 2021, moved page templates to JSON. A JSON template is just a list of sections and their settings, so every page type can be built from sections in the theme editor. That's what people mean by "sections everywhere". It's also why a section you install can go on a product page, an about page or a landing page, and not only the home page.
You can also create more than one template for the same page type. A store might have a regular product template and a second one with a size guide and a comparison table, then assign the second to a handful of products.
Theme sections and app blocks
There are two ways an app can put something on your storefront, and they behave differently.
- App blocks and app embeds live inside the app. The theme shows them, but the code stays with the app. If you uninstall the app, the block goes away.
- Theme sections are files inside your theme. Once a section is added, it's part of the theme's code, the same as the sections that came with it.
Abra Sections adds theme sections. That's why you set them up in the normal theme editor and don't have to log into the app to keep them running.
Things worth knowing before you add a section
- Sections belong to a theme. If you switch to a new theme, sections you added to the old one don't move over on their own. Plan to add them again.
- Theme updates. Updating your theme to a new version from the theme store usually creates a fresh copy. Added sections need to be carried over to that copy.
- Work on a duplicate. Add and test new sections on an unpublished copy of your theme, then publish when the page looks right.
- Fewer, better sections. Each section brings its own CSS and sometimes JavaScript. Ten carousels on one page will be slower than two.
Compatibility
The ready-made sections in the Abra Sections library are made for Online Store 2.0 themes. If you're on an older theme, or a heavily customized one, get in touch before you install and we'll tell you what to expect.
Want to see one up close?
Every section in the library has a live demo. The split screen and accordion are good ones to start with, since almost every store uses something like them.
In the theme editor
- Add section, pick it from the list
- Fill in the settings on the right
- Add, remove or drag blocks
- Save, then publish the theme
Still not sure which way to go?
Tell us what you want on the page. We'll say whether a library section covers it or whether it's a custom build.