Trick to incorporate banners within collection pages

Store Design

Topic summary

A user shares a custom code solution for inserting promotional banners between products on Shopify collection pages, specifically for the Debut theme. The technique involves modifying the collection-template.liquid file to add <li> elements at specific positions using conditional logic based on page number, product index, and collection title.

Key implementation details:

  • Banners can occupy single or double product grid spaces
  • Position controlled via forloop.index, current_page, and paginate.pages variables
  • Images stored as theme assets and inserted using Liquid templating

Community responses:

  • Multiple users request adaptations for different themes (Brooklyn, Prestige, Dawn, Impulse)
  • One user successfully adapted the code for Dawn theme but encountered sizing issues with double-width banners
  • An alternative solution using custom blog posts with metafields for dynamic banner placement is shared, offering more control over timing, positioning, and sizing
  • A no-code Shopify app alternative is mentioned

Current status: The discussion remains open with some users reporting implementation challenges, particularly with newer themes and Shopify 2.0 architecture. No definitive solutions provided for all theme variations.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
3

Hi,

I think that should be even easier that what I described. If you want the same banner to appear on every collections page, the collection-template.liquid file can be edited to include it. You can either make the banner an image and include a link to that image, or you could do it with code if it’s a simple one-color background.

Let me know if that made sense. I’m happy to chat and explain more.