Hi @LitExtension The code works great, and sorry one last thing
Can I show the banner only on the first page of the collection?
Topic summary
A user seeks to insert banner images within a product grid on a Shopify collection page. The initial attempt using {%- if forloop.index == 1 -%} incorrectly places the banner on the second grid position instead of the first.
Solution provided:
- Change the forloop index value to position the banner correctly (e.g.,
forloop.index == 2for the first visible position after accounting for grid layout) - Use conditional logic to target specific collections:
{% if collection.handle == 'new-arrivals' %} - Restrict banner to first page only:
{%- if forloop.index == 2 and paginate.current_page == 1 -%} - Add text overlays by nesting text elements within the banner image container
Additional developments:
- One participant confirms the solution works with Dawn 8.0 theme, sharing custom code that uses video elements styled to fill product card dimensions
- Multiple users request similar implementations for different themes (Refresh, Impulse)
- The original poster reports the banner stopped working after a theme update, now appearing on the seventh row instead of first
Status: The initial issue was resolved through iterative code adjustments, but a new compatibility problem emerged after theme updates. Several follow-up requests remain unanswered.