Adding random pictures to a collection grid

Technical Q&A

Topic summary

A user wants to insert random promotional images into product collection grids, similar to what’s commonly seen on other e-commerce sites. They’re using the Motion theme and seeking implementation guidance.

Current Solutions:

  • No existing Shopify app appears to handle this functionality
  • One contributor built a custom solution involving:
    • Storage: Used the Accentuate app to store image, link, and caption data
    • Grid layout: Set pagination to 8 items to create a 3×3 grid (including the custom image)
    • Implementation: Inserted the image as an <li> element before the product loop, tracking its position via index
    • Styling: Created custom CSS card layouts for both image and product cells

Code snippet provided shows the basic structure using Liquid templating to inject the custom image cell into the collection grid.

Status: The discussion remains open with another user seeking clarification on implementation details and requesting direct assistance.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
3

We were unable to find a plugin for this so we built a custom collection page where the first slot was an image.

Here are the relevant issues:

  1. Where to store the image, link and caption information - we used Accentuate app to store the info.
  2. Paging - we set the paging to 8 so the result was a 3x3 grid including the picture.
  3. CSS Styles - we created 2 custom ‘card layouts’ for both the image cell and products cell. Both cell types are just
  4. see code below:

      
        - {% assign collection_url = collection.url %}
            {% if collection.metafields.accentuate.product_page_link  != blank %}
            	{% assign collection_url = collection.metafields.accentuate.product_page_link   %}
            {% endif %}
          	
          		{% include 'collection-card-flex', max_height: 205, collection: collection %}
			
        
        {% for product in collection.products %} 
...

Our approach was just to slip the image cell in as a

  • just before the product loop starts but it would be possible to add anywhere in the gallery by just tracking the index in the loop.

    This is defiantly doable.

    Good luck!

    • 2 Likes