Help Center

How to use the promotional grid section

Updated

This section is only available in Impulse, Expanse, Fetch and Gem.

The Promotional grid section is useful for displaying key content on your online store. It offers global settings and a variety of layouts to help you showcase your images, videos, products, collections, and promotions effectively. Here's an overview of the section's global settings and the available layouts.

promotional grid.png

Adding the promotional grid section

  1. Log in to your Theme editor and navigate to the page you would like to display this section.
  2. You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
  3. From the list of available sections, find and select Promotional grid.

Section details

After adding the Promotional grid section, you will be presented with customization options and settings that you can adjust to match your store's style.

  • Full page width: This setting determines whether the Promotional grid section spans the full width of the page or is constrained to a container width of the page
  • Spacing: Configure the spacing above and below the Promotional grid section to control its placement and spacing in relation to other sections on the page.
  • Lazy load images (Impulse): Enable or disable lazy loading for images within the Promotional grid section. Lazy loading defers the loading of images until they are in the viewport, which can improve page load times.
  • Hide all image blocks on mobile (Expanse & Gem): When enabled, removes all image blocks from the mobile layout. 

Blocks / Layouts

The Promotional grid section offers six different blocks/layouts, each designed for different types of content and promotions. Each block includes a width setting that controls its size and how it aligns with the other blocks.

  • Advanced / Hero

    The Advanced layout provides a highly customizable grid for showcasing a variety of content, such as videos, images, text, and links. It allows you to create unique promotional sections with complete creative control.

    advanced block.png

    Content

    • Heading: The largest text in the block.

    • Subheading or Text: Use this field to display supporting text or a brief description above or beneath the heading.

    • Button text: The text displayed on the button. You can add up to two buttons.

    • Button link: The link assigned to the button. When clicked, it directs customers to the selected page.

    • Image: Choose an image to show in the block.

    • Video URL: Enter the YouTube or Vimeo link for the video you want to display. If both a video URL and an image are provided, the video will be shown instead of the image.

    Layout

    • Width: Controls the width of the block.

    • Height: Controls the height of the block.

    • Text size (Impulse): Adjusts the overall text size in the block using a percentage.

    Alignment

    • Text alignment: Controls the position of the text within the block.

    Design

    • Buttons (Impulse): Sets the color of the buttons.

    • Add box (Impulse): When enabled, the text content of the section is displayed inside a box.

    • Add frame (Impulse): When enabled, a frame border is added to the image or video. If Add box is enabled, the border will be applied to the text box instead.

  • Image

    This allows you to showcase a single image with a link. It's a straightforward way to feature a product or image prominently.

    image block.png

    • Image: Choose an image to show in the block.

    • Link: The link assigned to the image. When clicked, it directs customers to the selected page.

    • Width: Controls the width of the block.

  • Sale Collection

    Use the Sale Collection block to highlight specific product collections that are on sale. This layout is ideal for boosting sales of discounted items.

    sale collection block.png

    Content

    • Sale collection: Select the collection you want to display in this block. In Impulse, images from the first two products in the collection are shown, while in Expanse, Fetch, and Gem, the image from the first product is displayed. Clicking the block routes customers to the collection page.

    • Top text: Enter small text to appear at the top of the text area.

    • Middle text: Enter larger text to appear in the middle of the text area.

    • Bottom text: Enter small text to appear at the bottom of the text area.

    Layout

    • Width: Controls the width of the block.

    • Color scheme (Expanse, Fetch, and Gem): Allows you to apply a color scheme from Theme settings > Colors.

    • Image shape (Expanse, Fetch, and Gem): Apply a shape to the image (for example, rounded or square).

    Design

    • Tint (Impulse): Lets you adjust the overlay color applied to the block.

    • Amount (Impulse): Controls how transparent the tint color appears.

    • Add frame (Impulse): When enabled, a frame border is added around the block.

  • Simple

    The Simple block offers a clean and minimalistic design for presenting content. It's suitable for displaying images, text, and links in a straightforward manner.

    simple block.png

    Content

    • Link: The link assigned to the block. When clicked, it directs customers to the selected page.

    • Text: Use this field to add text on top of the image.

    • Image: Choose an image to show in the block.

    Layout

    • Width: Controls the width of the block.

    • Height: Controls the height of the block.

    Design

    • Tint (Impulse): Lets you adjust the overlay color applied to the block.

    • Amount (Impulse): Controls how transparent the tint color appears.

    • Add frame (Impulse): When enabled, a frame border is added around the block.

  • Product

    The Product block lets you feature specific products within the Promotional grid section. This layout is great for highlighting individual products and driving sales.

    product block.png

    Content

    • Product: Select the product you want to display in this block.

    • Heading: The largest text in the block.

    • Subheading or Text: Use this field to display supporting text or a brief description above or beneath the heading.

    • Button text: The text displayed on the button. You can add up to two buttons. Clicking the button routes to the product page.

    • Label: Adds a text label or badge to the product image. In Impulse, the badge appears at the top right of the product image, while in Expanse, Gem, and Fetch, it appears below the product image.

    • Show price: Enable this option to display the product price.

    • Width: Controls the width of the block.

    • Text size (Impulse): Adjusts the overall text size in the block using a percentage.

    Design

    • Color scheme (Expanse, Fetch, and Gem): Allows you to apply a color scheme from Theme settings > Colors.

    • Image shape (Expanse, Fetch, and Gem): Apply a shape to the image (for example, rounded or square).

    • Tint (Impulse): Lets you adjust the overlay color applied to the block.

    • Amount (Impulse): Controls how transparent the tint color appears.

    • Add frame (Impulse): When enabled, a frame border is added around the block.

The Promotional grid section offers powerful ways to create visually appealing and effective promotional content. By selecting the appropriate layout, you can tailor your promotions to meet your store's unique needs and engage your customers effectively.

Note

Any image added within the Promotional grid section will be cropped and enlarged to ensure responsive imagery across various devices and screen sizes. While the section does not have a specific setting for mobile-specific images, this responsive approach ensures that your promotional content maintains a visually pleasing and consistent appearance for all images, regardless of the device they are using.

 

Related articles