Adding Grid Interrupters 

What is a Page Interrupter?

Grid Interrupters are customizable content blocks that appear within a Product Listing Page . They help break up the product grid with promotional, branded, or informational content, allowing you to capture shopper attention without disrupting the browsing experience. There are two types of Grid Interrupters available on the PLP 

• Story Block
• Carousel

Both Story Blocks and Carousels can link shoppers to

• A product page
• A collection page
• Another screen within your mobile app

How to Add Grid Interrupters

For this guide, we will use story block as a grid interrupter. You can follow the same steps for setting up a carousel. 

Step 1: Add a Story Block component to the Product Listing Page where you want promotional content to appear.

• Start by selecting the Story block (or carousel) component from the left side menu.
• Drag and drop it into the grid where you want it to appear.
• You can place it:
  • on top of the grid
  • inside the grid
  • at the bottom of the grid

Step 2: Set the display rules for where it appears in the PLP

• The grid interrupter includes display rules that only appear when used on a PLP. 
• These rules control where the component appears in the grid:

• • Top: Displays the Grid Interrupter directly below the filter controls and before the first row of products.

  • After: Displays the Grid Interrupter after a specified number of product rows.
    

  • Bottom: Displays the Grid Interrupter after the final row of products.

Step 3: Configure the Story block content and layout

• Add the content you want to display in the Story block.

• Depending on your layout, you can configure:

  • Header
  • Title
  • Description
  • Quote
  • Image
• Choose the image size/layout that fits your design:
  • portrait
  • landscape
  • social portrait (square-like)

Step 4: Link the Story block to a destination (optional)

• Add a destination link to turn the Story Block into a navigational element. For example, linking to the "T-Shirts and Jerseys" collection allows shoppers to tap the Story Block and browse that collection directly.

Step 5: Hide the component when filters are applied (optional)

• To keep the filtered product experience focused, you can choose to hide the Grid Interrupter whenever a shopper applies filters. When enabled, the component will automatically disappear until filters are cleared.

Step 6: Publish

• Once everything is configured, click Save.
• Publish. Now your changes are live! 

---

Adding Unique Interrupters to Different Collection Pages

The steps above will display the same grid interrupters across all collection pages. If you'd like different collections to display different promotional content, create separate PLP templates and assign them to specific collections or collection groups.

Instructions for creating PLP templates can be found here.

Once your templates have been created, you can add different content blocks to each template. This allows each collection page to display unique grid interrupter content within your app. 

---

Best Practices

• Use Grid Interrupters to promote seasonal collections, campaigns, or featured products.
• Avoid placing too many interrupters on a single page, as this can distract from product discovery.
• Place promotional content after the first few rows of products to maintain a strong browsing experience.
• Hide interrupters when filters are applied if you want shoppers to focus solely on filtered results.