Dynamic Theme Sections
Use the settings described on this help page to customize dynamic sections to match your store's design. Settings may vary for different sections.
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, Search page, Password page, 404 page, and Pages.
Tip: Use the top drop-down menu to select the desired template and customize it according to your needs.
Each dynamic section can be added, removed, or hidden:
Tip: To add a section, press the "Add section" button and select the necessary one from the list.
Tip: Some sections contain a list of customizable blocks. To add a block, hover over the section title and click the plus button.
Tip: The section will be removed once you press the "Remove section" button at the very bottom of each section.
Tip: 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's 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: A section can be easily found using the Inspector. Activate the Inspector in the top toolbar. Then, press the desired content block to open its settings.
Note! Most text content that cannot be changed in the Theme Editor can be edited under "Edit default theme content".
Note! Each section includes various settings to change its layout. The number of options depends on the section.
Layout options
Use the layout settings in the sections: Before and after, Blog posts, Brand list, Collage, Collection collage, Contact form, Collection list, Collection slider, Collection tabs, FAQs, Featured collection, Image gallery, Image collage, Map, Media, Multicolumn, Newsletter signup, Page content, Promotions, Reels, Rich text, Tag list, and Testimonials.
Layout Most of the listed sections include three layouts: "Split", "Stacked", and "Centered". View the examples below.
Mobile alignment The header elements can be aligned to the left or center.
Vertical alignment View the example of the centered header elements below.
Use swipe on mobile Enable or disable the option in the blocks: Blog posts, Brand list, Collection list, Collection tabs, Image gallery, and Multicolumn.
Content
Image ratio The content layout can be changed in the following sections: Brand list, Collage ("Collection products" block), Collection collage ("Collection" and "Product" blocks), Collection tabs, Collection list, Collection slider ("Collection"), Countdown timer, Featured collections, Image collage ("Image" block), Image gallery, Lookbook, Map, Media, Multicolumn, and Reels.
The "Standard", "Wide", and "Fixed" options (The number of options depends on the section!) can be set in the "Width" picker. The settings are available in the Promotions and Slideshow sections:
Animations
The described settings include the following sections: Collage ("Promotion" block), Collection collage ("Promotion" block), Countdown timer, Image banner, Promotions ("Promotion" block), Multicolumn, and Slideshow. The number of options depends on the section.
Hover animation View the examples of animation effects below.
Image
Gradient Use the setting in such sections: Before and after ("Image" block), Collage ("Promotion" block), Collection collage ("Promotion" block), Image banner, Promotions ("Promotion" block), Popup ("Image" block), and Slideshow ("Slide" block).
In the "Gradient", you can paste your CSS element. 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 of a color-stop point can be set as a percentage or directly within the gradient line. Here, you can paste the specific color hex code into 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. To remove the gradient, click the "Remove gradient" button.
In the following example, you can see the settings that can be applied to a media overlay with a value of 48%.
Video
The video settings can be used in the following sections:
Video from URL: Collage ("Video" block).
Video file/ Video from URL: Image banner, Media, Reels.
Last updated