Dynamic Theme Sections
The sections from this chapter can be applied to templates in a store.
Last updated
The sections from this chapter can be applied to templates in a store.
Last updated
Use the dynamic theme sections to add varied content to pages. The theme supports displaying sections on such webpages: Home page, , , page, , , , , page, page, and Pages.
Tip: Use the top drop-down menu to choose a page and set it up according to your needs.
Each dynamic section can be added, removed, or hidden:
Tip: To add a section, press the "Add section" button and decide on the necessary one from the list:
Tip: Some sections contain a list of customizable blocks. To add a block, simply hover over the section title and click the plus button.
Note! The identical list of Theme sections can be used in the Header and Footer:
Tip: The section will be removed once you press the "Remove section" button at the very bottom of each section:
Tip: If you need to hide a section, press the eye icon next to the section name:
Tip: To duplicate a section, open the related one and press the dotted [...] button next to the section name. Then, you can choose the "Duplicate" option from the list:
Tip: Drag and drop sections to arrange them in the desired order on a page:
Tip: If you need to edit, hide, or remove a section, you can easily find it using the Theme Inspector. Activate the Inspector in the top panel of the Theme Editor. Then, hit the desired section to open its settings:
Note! Each section includes various settings to change its layout. The number of options depends on the section.
Image overlay gradient
In the "Image overlay gradient", you can paste your CSS elements. Or use the built-in Gradient, which can be changed to linear or radial. You can set the angle of a gradient in the percentage input box. If you need a complex set of colors for special effects, create up to 10 color-stop points by simply pressing on a gradient line or using the "+" and "-" symbols.
Press each color-stop point on a gradient line to apply color settings. The position and color value per color-stop point can be set as a percentage or within a gradient line itself. Here you can paste the specific color hex code to the corresponding field. Or change the color on a color slider. Change the gradient transparency with the second color slider or the percentage input box. If you need to remove the gradient, click the "Remove Gradient" button.
In the following example, you can see how changing the Image overlay opacity from 0 to 100%:
The video settings can be used in the following sections:
In the following examples, you can view each heading font size:
Here is how the Heading settings might be displayed in sections:
Check the Paragraph settings below:
In the "Desktop text position", control the text position in the banner to display on the "Top left", "Top", "Top right"; "Center left", "Center", "Center right", or "Bottom left", "Bottom", "Bottom right".
In the following examples, you can view a few text positions:
The "Desktop text alignment" is available to set on the "Left", "Center", or "Right" sides:
In the following example, you can see how changing the Text box desktop opacity from 0 to 100%:
Here is how the Text box desktop width works if to change settings from 0 to 100%:
Most of the listed sections include three layouts: "In-grid heading", "Heading on top", and "Heading top center".
Let's review each of them:
The following settings you can find in each section, except the Custom Liquid:
The "Dividing line" is available to set up at the "Top" or "Bottom" of a section:
Here is how the "Top spacing" and "Bottom spacing" might display in a section:
In the following examples, you can view each option:
Image ratio
Swipe on mobile
Here is how it might display on a mobile view:
Use the "Desktop hover animation" to configure: "Zoom in", "Zoom out", "Zoom in, add overlay opacity", "Zoom out, add overlay opacity", or "Add overlay opacity".
In the following examples, you can view the difference in changing animation settings:
The "Style" can be changed to "Primary", "Secondary", or "Link style".
Here is how each of the button styles is represented in the theme:
If you need to edit texts for the "View All" buttons, press the dotted [...] menu next to the theme name to open the "Edit default theme content" chapter in your Shopify admin:
Here you can press the tab "Sections":
Then, scroll down and edit texts for the required sections under the "View all" fields:
Note! Under the "Edit default theme content", you can edit most of the texts that are not allowed to change in the Theme Editor.
Use the setting in such sections: Before/after image ("" block), Collage ("" block), Featured collage ("" block), (content blocks), , Popup ("" block), and Slideshow ("" block).
Video from URL: Collage ("" block).
Video file/ Video from URL: , , .
The heading font size can be changed to "Small", "Medium", or "Large". These settings can be configured in such sections: , , , , , , , , , , , , Image with text overlay ("" block), , , , , , , Rich text ("" block), , and .
In addition to the sections listed above, the Heading and Description options include the following sections and Email signup ("" and "" blocks).
Settings from this sub-section are allowed to be set up in the following sections: Before/after image ("" block), Collage ("" block), Featured collage ("" block), Featured promotions ("" and "" blocks), , and Slideshow ("" block).
Use the layout settings in the sections: , , , , , , , , , , , , , , , , and .
Find the "Text position" options in the following sections: Featured collage (""), Featured promotions (""), Image with text overlay (""), and "".
The "Text alignment" settings can be set in the following sections: Before/after image ("" block), , , Image with text overlay ("" block), and .
The content layout can be changed in the following sections: , , , , , , , , , , and .
Enable or disable the option in the blocks: , , , , , and .
The "Standard", "Wide" and "Fixed" options (The number of options depends on the section!) can be set in the "Width" drop-down. The settings are available in the , , and sections:
The current settings include such sections: , Collage ("" block), , Featured collage ("" block), , and . The number of options depends on the section.
This block is available in the following sections: , , Collage ("" block), , , Featured collage ("" block), (content blocks), Image with text overlay ("" block), , , , , Popup ("" block), , Rich text ("" block), and Slideshow ("" block).
Find the "View All" button in , , , , , and .