Adding random pictures to a collection grid

VLMontoro
New Member
2 0 0

Dear Community,

I would like to add some random pictures inside if the picture grid when displaying a given collection, like in the following screenshot (first pic in the first row):

Screenshot 2020-12-14 at 16.43.14.png

I am currently using the Motion theme.

Any help would be greatly appreciated and many thanks!

0 Likes
malissa-pearl
New Member
4 0 0

I'm looking to do the same thing. Willing to make something custom, but don't want to go too far in any direction if someone has done this before, or even if there's an app to do this. I've seen it on so many sites, but can't find anything on how to do this in Shopify yet...

0 Likes

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 <li> see code below:

    <!-- Flex Cards -->
      <ul class="list-card-flex">
        <li class="list-card-flex">
          {% assign collection_url = collection.url %}
          {% if collection.metafields.accentuate.product_page_link  != blank %}
          	{% assign collection_url = collection.metafields.accentuate.product_page_link   %}
          {% endif %}
          	<a href="{{ collection_url }}" title="{{ collection.title }}" class="card-link" >
        		{% include 'collection-card-flex', max_height: 205, collection: collection %}
			</a>
        </li>
        {% for product in collection.products %} 
...

 

Our approach was just to slip the image cell in as a <li> 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!

 

  

If my response was helpful please Like and Mark As Solution.