This section can be applied to all of the theme's templates.
Use the Promotional grid section to highlight promotional content with customizable layouts for images, products, and collections.
Check out the rest of the guide for examples of the Banner and Simple blocks.
Customize section settings
Click the Promotional grid section to open its general settings.
When Full page width is enabled, the section displays across the entire width of the page.
The Spacing slider controls the amount of pixel space between each block.
Hide all image blocks on mobile removes all image blocks from the mobile layout.
Customize blocks
The Promotional grid section includes four different block types you can add and customize
Each of the blocks can be rearranged by clicking, holding, then dragging the block with the mouse cursor. Add more by selecting (+) Add Block.
Product and Banner blocks also include the Color scheme feature to customize the section’s background and text colors. You can modify your color schemes in Theme settings > Colors.
-
Banner block
Ideal for bold banners with a call to action, perfect for highlighting offers or announcements.
Heading: Adds a title to the block. Adjust its size using the Heading size setting.
Text: Add details to your promotion using the Text field.
Button: Enter the button’s destination URL in the Link field. The Link label specifies what text appears on the button.
Width: Controls the block’s size and its layout relative to other blocks. Available options are 25%, 50%, and 100%.
-
Image block
Highlight a single image and make it clickable with a link.
Image: Click Select image to pick the image you want to display.
Link: Specifies the URL the image directs to.
Width: Adjusts the block’s size and how it aligns with other blocks, with options for 25%, 50%, or 100%.
-
Product block
Use the Product block to highlight specific products inside the promotion grid.
Select product: Choose the Product to display in this block. The block pulls the first image assigned to that product in your admin.
Subheading : Displays a short line of text above the main heading.
Heading: Adds a title to the block.
Text: Provides additional information or descriptive content below the heading.
Use Button text to set the button label. The button will take customers to the product page.
Label: Use this to show a label or tag above the subheading.
Enable Show price to display the product price.
Width: Controls the block’s size and its layout relative to other blocks. Available options are 25%, 50%, and 100%.
Use the Image shape option to keep the product image’s natural size or crop it into square, portrait, landscape, or rounded.
Here's an example of a Product block in mobile view:
-
Simple block
This block offers a minimal layout for showing images, text, and links.
Link: Defines the destination URL for the block.
Text: Adds a title to the block.
Image: Click Select image to pick the image you want to display.
Width: Adjusts the block’s size and how it aligns with other blocks, with options for 25%, 50%, or 100%.