Sections are reusable components that can be added to any page in your Shopify theme editor. This guide explains how to create, publish, and manage sections in Instant.
Overview
When you publish a section, it becomes available in the Shopify theme editor under "Add section." This allows you to reuse your Instant-built sections across any page in your store.
Benefits of Sections
Benefit | Description |
Reusability | Use the same section on multiple pages |
Theme editor integration | Edit content directly in Shopify |
Localization support | Works with Shopify Markets and translations |
Dynamic content | Connect to product metafields and other dynamic sources |
Creating Sections
There are two ways to create a section:
Method | Steps |
Create new | Click Layouts in the left sidebar → Click Create Section |
Save from page | Right-click a section on an existing page → Click Save as Section |
How to Publish a Section
In the Builder, open the section you want to publish
Click Publish in the top right corner
Once published, your section becomes available in the Shopify theme editor under "Add section."
Shopify Schema Generation
When you publish a section, Instant automatically generates the Shopify "schema" based on your settings and elements. This enables:
Smooth integration with the Shopify theme editor
Reusing sections on any page type
Editing section content directly within Shopify
Managing Section Content
Because sections can be reused across multiple pages, content such as text and links is managed directly in the Shopify theme editor—not in Instant. This ensures that each instance of a section can have its own unique content without affecting other pages using the same section.
Generated Field Types
Field Type | Generated From | Capabilities |
Text | Text elements using "Static" content | Connect dynamic sources, supports translations and Shopify Markets localization |
Images | Image elements using "Static" source | Served from Shopify CDN, supports "Set focal point" feature |
URLs | Interactions on text, buttons, or containers | Auto-formatted based on Shopify Markets settings |
App Island Element
The App Island element allows you to define where Shopify "App blocks" will be inserted when added in the theme editor.
How It Works
Add an App Island element to any Instant section
Publish the section to Shopify
In the Shopify theme editor, add the section to a page
Click Add block to see available app blocks from your installed apps
Where to Find App Island
Insert panel → Advanced → Embed → App Island
Important Notes
Behavior | Description |
Default state | No app blocks are added to a section by default |
Rendering | App Island only renders when app blocks are added in the Shopify theme editor |
Preview mode | App Island is not visible in Instant's preview mode (reflects initial state) |
Best Practices
Section Names
The section name in Instant appears in the Shopify theme editor when clicking "Add section." Give your sections clear, descriptive names before publishing.
Good Names | Poor Names |
"Hero Banner with CTA" | "Section 1" |
"Product Features Grid" | "New section" |
"Customer Testimonials" | "Test" |
Field Names
Field names are based on the layer name of each element. To rename a layer:
Double-click the layer name in the Layers panel
Enter a descriptive name
This name will appear as the field label in the Shopify theme editor
Section Spacing
Instant automatically includes top and bottom spacing fields for each section. These can be adjusted per section instance in the Shopify theme customizer, allowing flexible spacing based on where the section is placed.
Content Preservation
Sections and fields use static IDs for mapping in Shopify:
Action | Result |
Rename section or layer | Content preserved |
Reposition layer on canvas | Content preserved |
Delete existing layer | May result in content loss |
Warning: Be mindful when deleting layers from already published sections, as this can result in loss of content in Shopify.
Quick Reference
Task | Action |
Create a section | Layouts → Create Section |
Save section from page | Right-click section → Save as Section |
Publish a section | Builder → Open section → Click Publish |
Rename a layer | Double-click layer name in Layers panel |
Add App Island | Insert panel → Advanced → Embed → App Island |
Edit section in Shopify | Theme editor → Select page → Click section |
Section Field Types Summary
Element Type | Generated Field | Editable In Shopify |
Static text | Text field | ✓ |
Static image | Image field | ✓ |
Button/link interaction | URL field | ✓ |
Dynamic content | Not generated | Connected to source |