Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
Solved! Go to the solution
This is an 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!
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...
This is an 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!
Hey, were you able to fix it like this? And if so who helped you / should I contact to help me with this issue?
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025