Trick to incorporate banners within collection pages

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.

Hi ya and how would you add the image to the page?