Features

Every feature of the Shopify Theme App Extension

SectionGuard is a Shopify Theme App Extension: your custom HTML sections, CSS and metafield displays live in the app and render through one theme block. Live data resolves server-side, placement is native, and nothing is copied into your theme — so a theme update has nothing of yours to overwrite. Built for shop owners without a developer who start from one of 35 ready-made templates, merchants and freelancers who write their own code, and agencies who reuse sections across every client store.

Add to Shopify — FreeJump to the features

Free for up to 3 sections · No credit card · Works on OS 2.0 & Horizon.

Live-data tokens

01 Live data, zero Liquid risk

Product, collection and metafield data resolve server-side — no Liquid runs in your theme.

  • Tokens resolve through Shopify's own Liquid. Drop {{ product.title }} or {{ product.price }} into your HTML. Publish compiles the section into an app-owned Metaobject stored in Shopify, and Shopify's own Liquid renders it on the storefront — delivery doesn't depend on our server, and your theme never executes a line of your Liquid.
  • Token autocomplete in the editor. Start typing a token and the editor suggests the live fields available for the current product, collection or shop. Insert the exact one you need without memorising the object graph.
  • One block, real data. The storefront shows the resolved values — the same title, price and metafields your customers see — through a single Theme App Extension block, not a pile of theme files.
HTMLCSSJS
Resolved server-side
123
<!-- resolves before the page ships --><h1>{{ product.title }}</h1><p class="price">{{ product.price }}</p>
yourstore.com/products/aurora-runner-jacket
Aurora Runner Jacket
$168.00Rendered by SectionGuard
Resolved by Shopify's own Liquid — not your theme's.
Metafield display

02 Metafield display with live search

Search every metafield by name and namespace, then insert the exact one in a click.

  • Find the field, not the syntax. The metafield panel lists your definitions with their namespace and key. Search by name, pick the one you want, and it drops into the code as a ready-to-render token.
  • Namespaced and typed. Custom.spec_sheet, reviews.rating, whatever you've defined — each is inserted with its full namespace so the right value resolves, every time.
  • Metafield display without theme edits. Show spec tables, care instructions or badge data straight from your metafields, rendered by the app. No metaobject Liquid pasted into product templates.
SearchInsert
3 matches
123456
search: "spec"custom.spec_sheet → insertreviews.rating → insertcare.instructions<span>{{ product.metafields.custom.spec_sheet }}</span>
Native placement

03 Native section picker

Your sections appear by name in Shopify's own theme editor — pick and place like a built-in block.

  • Registered as Metaobjects. Each section is registered so the theme editor lists it by the name you gave it. No handle typing, no code paste — choose the block and drop it into any section slot.
  • Place it anywhere a section goes. Product pages, the homepage, collection templates — wherever the native editor lets you add a section, your SectionGuard blocks show up alongside the theme's own.
  • Reorder and remove natively. Move it up, move it down, hide it — all through the standard theme-editor controls merchants already know. The app never asks them to leave the editor.
Add section
  • Rich text
  • Image with text
  • Product spec tableApp
  • FAQ accordionApp
  • Collection list
  • Newsletter
Versions

04 Versions, diff and one-click restore

Every save and every publish is a version. Compare two versions with a line diff, then restore either one in a single click.

  • Automatic snapshots on save and publish. There's no separate versioning step to remember. Saving and publishing each record a version of the section's HTML, CSS and JS, kept in order so you can always see where you were.
  • Compare versions with a line diff. See exactly what changed between two versions with a line-by-line diff before you restore — no eyeballing raw code trying to guess which line broke the layout.
  • Ship edits with a safety net. Try a redesign on a live section knowing the last good state is one click away. The confidence to change things is the point.
v14 · restore any
123456
v14 current "add care icons"v13 2h ago "tweak price size"v12 restore ← "stable layout"v11 yesterday// one click restores the section, HTML + CSS + JS
Auto re-sync

05 Survives uninstall and reinstall

Your section source stays saved in your SectionGuard account — reinstall and it auto re-syncs and republishes.

  • Source stored in your account, not just the theme. The HTML, CSS, JS and token bindings for every section are stored with your SectionGuard account. Uninstalling doesn't delete your work.
  • Auto re-sync on reinstall. Reinstall and your sections come back, re-register in the theme editor and republish with their live data — nothing to rebuild by hand.
  • Move between themes without a rebuild. Switch or duplicate a theme and place the extension block once. The sections you built follow you instead of being trapped in the old theme's files.
zsh — reinstall
$ sectionguard reinstallRestoring sections from your account …✓ 7 sections re-synced (code from our side)✓ re-registered in the theme editor by name✓ republished · tokens resolving again
File-based apps

Nothing to restore — the .liquid was already gone with the update.

SectionGuard

Reinstalled and back to live in one command. Nothing rebuilt by hand.

No write_themes

06 Theme stays clean — no write_themes

No write_themes scope, no files copied into your theme. A theme update has nothing of yours to overwrite.

  • No write_themes scope. SectionGuard is installed without the write_themes access scope. We can't edit your theme code even if we wanted to — the guarantee is architectural, not a promise.
  • Nothing pasted into .liquid. Unlike file-based section apps, we never copy .liquid into your theme. There are no orphaned files left behind on uninstall and none to be wiped on the next update.
  • Custom HTML and CSS, kept out of the theme. Write full custom HTML sections with your own CSS and JS in the app editor. It renders through the extension block, so your theme files stay exactly as the vendor shipped them.
install manifest
1234567
scopes: ["read_products","read_metaobjects","write_metaobjects"]// no write_themes → we cannot touch your theme
Scheduling

07 Show and hide sections on a schedule

Set a “Show from” and “Hide after” date per section — the storefront enforces the window, not just the admin screen.

  • Show from / hide after. Pick the exact start and end for a section — a weekend sale banner that appears Friday and disappears Monday, without you touching the theme editor twice.
  • Enforced on the storefront. The window isn't a note to remind yourself — the published section checks it on every render, so an expired section simply stops showing, automatically.
  • No code, no cron job. Set both dates as plain fields in the section settings. There's nothing to script and nothing to remember to switch off.
Target templates

08 Sections stay on the template they belong to

Every section is tied to a product, collection or page template, so the block simply doesn't show up where it doesn't fit.

  • Assign a target when you build it. Pick Product, Collection or Page as the section's target template — the theme-editor block picker only offers it where that target applies.
  • Misplacement explained, not silent. Drop the block on the wrong template anyway and it explains why, in German or English, right there in the theme editor — no blank space to debug.
  • Fewer “why is this empty” tickets. A product-only section can't quietly end up on a blog page. The mismatch is visible at placement time, not discovered by a confused customer.
Security lint

09 Risky code gets blocked before it publishes

Publish checks every section's HTML, CSS and JS and stops the ones that would put your storefront at risk.

  • Blocks external scripts and styles. Remote <script> and <link> tags, inline event handlers and document.write are flagged and blocked at publish time — not discovered later on the live storefront.
  • Catches insecure http:// links. Any hardcoded http:// URL is caught before it can trip a mixed-content warning on your live store.
  • Size limits protect performance. Sections are capped to a sensible size, so nothing you publish can quietly turn into a slow-loading storefront.
Duplicate & portability

10 Duplicate a section, or move it to another shop

Clone a section as a starting point, or export it as a JSON file and import it straight into the next store.

  • Duplicate in one click. Clone an existing section to use as the starting point for a variant, without touching the original.
  • Export a section as JSON. Download any section — settings, tokens and code included — as a single portable JSON file.
  • Import into the next shop. Build a section once in shop A, then import the same file into shop B, C and D. It's the agency workflow the app is built to support.
Global code

11 Shop-wide CSS and JS, without touching the theme

Add CSS or JS that runs across the whole storefront as an app embed — activated with a deeplink, not a theme edit.

  • One app embed, not a theme snippet. Turn shop-wide CSS or JS on from the theme editor's app-embeds panel — no snippet file added to the theme.
  • Survives updates the same way sections do. Because it's an app embed and never a theme file, a theme update or switch can't strip it out.
  • One place for shop-wide styling. Ship a shared font, a small utility script or a sitewide banner style once, instead of repeating it inside every section.
Placement & preview

12 Place it from the app, preview it before you do

A deeplink drops you straight into the theme editor's block picker, and a live preview shows the section on desktop and mobile before you publish.

  • “Place in theme editor” button. Jump straight from a section in the app to the exact spot in the theme editor's block picker — no manual navigation to the right template.
  • Desktop / mobile preview toggle. Switch the live preview between desktop and mobile while you edit, so you catch a layout problem before a customer does.
  • Sandboxed, with real tokens resolved. The preview renders your HTML, CSS and JS in a sandbox with sample token data — what you see is what ships.
Admin language

13 The admin speaks German and English

The whole editor — labels, tooltips, and the security-lint explanations — follows the language of your Shopify admin automatically.

  • Matches your Shopify admin language. Set your Shopify admin to German or English and SectionGuard's editor follows — no separate language toggle to find.
  • Errors and lint messages, too. Blocked-publish explanations and validation messages are localized, not just the menu labels.
  • Built with German-speaking merchants in mind. From field labels to help text, the admin is a first-class German experience, not an English tool with a translated skin.
Pro

Start from 35 finished templates, then edit the code

Pro unlocks the full template library: 35 ready-made sections across product, collection and page templates, fully localized in German and English, each starting with real example content instead of empty fields.

35 templates in 3 categories

13 for product pages, 11 for collection pages, 11 for standalone pages — a gallery with a live mini-preview of every one, not a placeholder image.

Editable, not locked

Every template is real HTML, CSS and JS wired to live tokens — a starting point you own and change, not a locked widget.

Browse all 35 templates on the templates page, see where the library lands in the Pro plan, or read the honest trade-offs on the comparison page.

Build sections that outlast your theme

Custom sections that survive every theme update.

Start free with up to three sections. No write_themes scope, billed through Shopify, cancel anytime.

Add to Shopify — FreeSee pricing

Free for up to 3 sections · No credit card · Works on OS 2.0 & Horizon.