Dynamic Theme Sections

The sections from this chapter can be applied to templates in a store.

Last updated 1 month ago

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, , , 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

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%:

Video

The video settings can be used in the following sections:

Heading

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:

Text

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

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

In the following examples, you can view each option:

Content

Image ratio

Swipe on mobile

Here is how it might display on a mobile view:

Animation

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

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"

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.