Shopify Theme Sections

Drop-in Online Store 2.0 sections with complete schema blocks, so a merchant can add and configure them from the theme editor without touching code. No app, no subscription, no external JavaScript.

Maintained by Ecom Swift LLC.

Install

1. Duplicate your live theme first. Always.
2. In Shopify admin go to Online Store → Themes → ⋯ → Edit code, or pull the theme with shopify theme pull.
3. Create the file inside sections/ with the same name and paste the contents.
4. Open the theme editor, click Add section, and pick it from the list.

Every section declares a presets entry, which is what makes it show up in that Add section list.

Sections

Section	Highlights
sections/faq-accordion.liquid	Native details accordion, one block per question, optional FAQPage structured data for rich results
sections/testimonials.liquid	Responsive quote grid, star ratings, avatars, configurable columns and colors
sections/comparison-table.liquid	Us-versus-them feature table, tick or custom text per cell, scrolls horizontally on mobile
sections/countdown-banner.liquid	Live countdown built as a web component, expiry message, optional CTA button
sections/logo-marquee.liquid	Infinite CSS-only logo scroller, pauses on hover, honours prefers-reduced-motion

How these are built

• Blocks over hardcoded content. Anything repeatable is a block with a limit, so merchants add, reorder and delete items themselves.
• block.shopify_attributes on every block wrapper. Without it, theme editor click-to-scroll and live section reloading do not work.
• Settings passed as CSS custom properties. Colors, spacing and speeds are written into a style attribute, which keeps the CSS itself static and cacheable.
• Web components instead of inline handlers. The countdown registers a custom element guarded by customElements.get, so it survives the theme editor re-rendering a section.
• Accessible by default. Real table headers, labels on icon-only cells, keyboard-native disclosure widgets, and reduced-motion fallbacks.

Schema tips that save hours

• The schema must be valid JSON. A trailing comma is the single most common cause of an Invalid schema error on save.
• The schema tag can only appear once per section and cannot contain Liquid.
• Setting ids are permanent. Renaming one wipes the value the merchant already saved.
• A section without presets still works inside a JSON template, it just will not appear under Add section.
• Set the tag and class properties so you get a predictable wrapper element to target with CSS.
• Blocks need a type, and the type string is what you match on in Liquid, not the display name.

Contributing

Pull requests welcome. Please keep sections self-contained, working on a stock Dawn install, and free of external dependencies.

License

MIT - see LICENSE.

shopify-theme-sections

Ready-to-use Shopify Online Store 2.0 theme sections with full schema: FAQ accordion, testimonials, comparison table, size chart, before/after slider and more.