Liquid, JavaScript, themes, sales channels
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?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024