Dynamic Theme Sections
The sections from this chapter can be applied to templates in a store.
Use the dynamic theme sections to add varied content to pages. The theme supports displaying sections on such webpages: Home page, Products, Collections, Collections list page, Blogs, Blog posts, Cart, 404 page, Password page, Search 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
Image overlay gradient
Use the setting in such sections: Before/after image ("Image" block), Collage ("Image" block), Featured collage ("Image" block), Featured promotions (content blocks), Image with text overlay, Popup ("Image" block), and Slideshow ("Slide" block).
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%:
Video
The video settings can be used in the following sections:
Video from URL: Collage ("Video" block).
Video file/ Video from URL: Image with text overlay, Media, Reels.
Heading
The heading font size can be changed to "Small", "Medium", or "Large". These settings can be configured in such sections: Bedore/after image, Blog posts, Brand list, Collage, Collage of images, Collection list, Collection slider, Countdown timer, FAQ, Featured collage, Featured collection, Featured promotions, Image with text overlay ("Heading" block), Image gallery, Lookbook, Map, Media, Multicolumn, Reels, Rich text ("Heading" block), Tags, and Testimonials.
In the following examples, you can view each heading font size:
In addition to the sections listed above, the Heading and Description options include the following sections Contact form and Email signup ("Heading" and "Subheading" blocks).
Here is how the Heading settings might be displayed in sections:
Check the Paragraph settings below:
Text
Settings from this sub-section are allowed to be set up in the following sections: Before/after image ("Image" block), Collage ("Image" block), Featured collage ("Image" block), Featured promotions ("Content, Text on image" and "Content, Button on image" blocks), Image with text overlay, and Slideshow ("Slide" block).
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%:
Layout
Use the layout settings in the sections: Before/after image, Blog posts, Brand list, Collage, Collection list, Contact form, Email signup, FAQ, Featured collage, Featured collection, Featured promotions, Image gallery, Media, Multicolumn, Reels, Rich text, and Testimonials.
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:
Mobile settings
Find the "Text position" options in the following sections: Featured collage ("Image"), Featured promotions ("Content, Text on image"), Image with text overlay ("Mobile settings"), and "Slideshow".
The "Text alignment" settings can be set in the following sections: Before/after image ("Image" block), Featured collage, Featured promotions, Image with text overlay ("Mobile settings" block), and Slideshow.
In the following examples, you can view each option:
Content
Image ratio
The content layout can be changed in the following sections: Brand list, Collection list, Countdown timer, Featured collage, Featured collection, Featured collections, Image gallery, Lookbook, Map, Multicolumn, and Reels.
Swipe on mobile
Enable or disable the option in the blocks: Blog posts, Brand list, Collection list, Featured collection, Image gallery, and Multicolumn.
Here is how it might display on a mobile view:
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 Featured promotions, Image with text overlay, and Slideshow sections:
Animation
The current settings include such sections: Before/after image, Collage ("Image" block), Collage of images, Featured collage ("Image" block), Featured promotions, and Image with text overlay. The number of options depends on the section.
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:
Buttons
This block is available in the following sections: Before/after image, Brand list, Collage ("Image" block), Collage of images, Countdown timer, Featured collage ("Image" block), Featured promotions (content blocks), Image with text overlay ("Buttons" block), Image gallery, Lookbook, Media, Multicolumn, Popup ("Buttons" block), Reels, Rich text ("Button" block), and Slideshow ("Slide" block).
The "Style" can be changed to "Primary", "Secondary", or "Link style".
Here is how each of the button styles is represented in the theme:
Button "View All"
Find the "View All" button in Blog posts, Collection list, Featured collage, Featured collection, Featured collections, and Testimonials.
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.
Last updated