Adding random pictures to a collection grid

[VLMontoro]

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):

I am currently using the Motion theme.

Any help would be greatly appreciated and many thanks!

[malissa-pearl]

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...

[themecaster · Accepted solution]

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!

[MatheWieme]

Hey, were you able to fix it like this? And if so who helped you / should I contact to help me with this issue?

[johndepict]

we built a no-code collection page/grid builder so that you don't have to solve this with custom code: https://apps.shopify.com/depict

works natively, just ping me if you have any questions!