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, Password page, 404 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:
Note! The same 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: Drag and drop sections to arrange them in the desired order on a page:
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: Collage ("Image" block), Featured promotions (content blocks), and Image with text overlay.
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 of each 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. Transparency of the gradient changes with the second color slider or in the percentage input box. If you need to disable the gradient, click the "Remove Gradient".
In the following example, you can see how changing the Image overlay opacity from 0 to 100%:
Heading
The heading font size can be changed to "Small", "Medium", or "Large". These settings can be configured in such sections: Blog posts, Brand list, Collage, Collection list, FAQ, Featured collection, Featured promotions, Image with text overlay ("Heading" block), Image gallery, Map, Media, Multicolumn, Rich text ("Heading" block), 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 display in sections:
Check the Paragraph settings below:
Text
Settings from this sub-section are allowed to be set up in the following sections: Collage ("Image" block), Featured promotions ("Content, Text on image" and "Content, Button on image" blocks), and Image with text overlay.
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: Blog posts, Brand list, Collage, Collection list, Contact form, Email signup, FAQ, Featured collection, Featured promotions, Image gallery, Media, Multicolumn, 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 layout
The "Text alignment" settings can be set in the following sections: Featured promotions and Image with text overlay ("Mobile settings" block).
In the following examples, you can view each option:
Content
Image ratio
The content layout can be changed in the sections: Brand list, Collection list, Featured collection, Image gallery, Map, Multicolumn.
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" and "Fixed" options can be set in the "Width" drop-down. The settings are available in the Featured promotions and Image with text overlay sections:
Animation
The current settings include such sections: Collage ("Image" block), Featured promotions, and Image with text overlay.
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: Brand list, Collage ("Image" block), Featured promotions (content blocks), Image with text overlay ("Buttons" block), Image gallery, Media, Multicolumn, and Rich text ("Button" block).
The "Style" can be changed to "Primary", "Secondary", "Third", "Fourth", "Fifth" 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 collection, 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