To get started with sections, click “Layouts” in the left side navigation in the builder, and click on “Create section” to create your first section. Alternatively, you can right click a section on an existing page and click “Save as section” to convert a part of your page to a section.
App island element
The new “App island” element can be added to any Instant section. With the app island, you define where the “App blocks” will be inserted when added in the Shopify theme editor. Based on the apps that you have installed in your Shopify store, you will see the available app blocks when you click “Add block” after adding the Instant section that uses the app island in the Shopify theme editor.
Note: By default no app blocks will be added to a section, resulting in the app island not being rendered when a section is initially added in the Shopify theme editor. Because of this, the app island will not be visible in the preview mode of the builder to reflect the initial state of a section.
Shopify schema generation
Based on the settings of your sections and the used elements on the canvas, the Shopify “schema” will automatically be generated when you publish a section. Syncing this schema results in a smooth integration with the Shopify theme editor, making it possible to re-use sections on any page type, and to edit the content of a section directly within Shopify.
Field types
Currently there are 3 types of fields that will be generated when publishing a section:
Text: For each used “Text” element that uses “Static” content, a text field will be added to the schema. In the text fields, you can select “Connect dynamic source” in the Shopify theme editor to use dynamic content such as product metafields. The text fields also support translations and localized content using Shopify Markets.
Images: For each used “Image” element that uses a “Static” source, an image field will be added to the schema. When images are added in the Shopify theme editor, the images will automatically be served from the Shopify CDN. Also the advanced features like “Set focal point” are supported.
URLs: For each used “Interaction”, either on text elements, buttons or containers, a URL field will be added to the schema. When selecting a link in the Shopify theme editor referencing an internal page, such as a product page or collection, the URLs will automatically be formatted based on the Shopify markets settings.
Best-practices
Section names: The name of the section in Instant will be shown in the Shopify theme editor when you click “Add section”. Make sure to give you sections clear names before publishing so it’s easier to find them in Shopify.
Field names: The name of each field will be based on the “Layer name” of the related element. You can rename a layer by double clicking the name in the layer panel. Properly naming your layers will make it easier to edit the fields Shopify.
Section spacing: Since section spacing can be dependent on te placement of the section on the page, we automatically include a spacing top and bottom field which can be adjusted in the Shopify theme customizer per added section.
Note: Both sections and fields use a static ID for the mapping in Shopify, so you don’t need to worry about losing content when you rename a section or layer, or when you position a layer somewhere else on the canvas. Deleting existing layers can result in loss of content, so be mind-full when working on already published sections.