I want to include an additional wide banner section in the middle of a product grid to upsell products in a collection on my custom built theme.
https://www.wallart.co.uk/collections/tree-wall-stickers
Something like this:
This page implements a scroll-down-to-load-more system for showing more products.
Immediately I recognized a whole set of problems with this new section…
Firstly, the entire collection grid is a single Section and you can’t have nested Sections…
So I could divide each row into its own Section, however due to variable width devices, some devices may show 2 items per row, 3 or 4, and this then becomes a problem with CSS if I want the grid to flow correctly.
Also, this would not work with Shopify’s limited pagination capabilities.
Ignoring Shopify’s limitations - let’s say the new section is added dynamically with some Javascript - another problem arises when you consider the wrapping of grid items.
If I position the new banner section after the 8th element (2 rows down on a widescreen) then for a medium-width screen (3 items per row) it would appear 3 rows down, and the last row would contain only 2 items, so the 2 last items would need to stretch to fill the gap.
Perhaps I could design it so the section appears after n rows rather then after the nth item, but this would require changing the DOM on resize events.
And there’s also the issue of layout shift on adding the new section dynamically with Javascript.
I’m curious how others might approach this problem.
Has anyone got any helpful advice or an idea how to implement something like this that doesn’t come with a plethora of issues?
I look forward to your responses.