Include media and messaging using the dynamic Grid section.
Use the theme editor to include an optional heading, adjust the section height, customize the section colors, align the text, save space in mobile, add promotional item blocks for the Grid section.
Add Grid to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Grid
- Click the section, then Add
- Save
Include an optional heading
Add a Heading for the section using the provided text field.
Adjust the section height
Control the vertical space occupied by this section with the Section height dropdown. There are three options:
- Small
- Medium
- Large
Customize the section colors
Choose an optional Section heading color and Section background color using the rounded-rectangle swatches.
Align the text
Specify where the text appears on the image with the Text alignment dropdown. There are 9 options:
- Top left
- Top center
- Top right
- Center left
- Center center
- Center right
- Bottom left
- Bottom center
- Bottom right
Images used in this section will be cropped to fit the blocks, but this can be disabled by checking Maintain aspect ratio.
Save space in mobile
Conserve space in mobile views by using the Compress blocks option. This will minimize the blocks, allowing customers to expand the information by clicking the block.
Add promotional item blocks
Include up to 20 Grid blocks by selecting [+] Add promotional item.
Add media and messaging
For each block, assign the desired Image by clicking Select image. Then add a Heading, Text, Link, and Button text using the text fields.
Customize the block's styling
Configure the block’s Text color using the rounded-rectangle swatch, then choose a Button style from the dropdown.
Use the Width dropdown to control the horizontal space occupied by the block. Half width will include two blocks per row, while Full width spreads the block across the width of the section.
Add an overlay
Activate an overlay, by selecting either Solid or Gradient from the Overlay style dropdown. Then determine the Color with the rounded-rectangle swatch and level of Opacity using the slider.
