Shopify themes, liquid, logos, and UX
Hey guys, I've noticed this seems to be a big issue in the community. I know Shopify has put out a tutorial for this but it just doesn't work for a lot of people, myself included.
Here's the solution that worked for me. I was able to find these solutions from a couple of different people within this thread. I just wanted to post the full, cleaned-up versions here to hopefully make it easier for folks to find and implement.
I use the Debut theme but I've seen others say it worked for them using other themes as well. I don't know anything about code so I won't be able to help you troubleshoot things but hopefully others will.
*Please be sure to duplicate your theme and try this code out on a copy of your theme before you implement it on your live theme just so you can see that everything works as it should.
Step 1
Copy and paste this at the end of your theme.css.liquid (or .scss.liquid) file:
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
}
@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
}
.grid-view-item__title {
margin-top: 10px;
}
Step 2
Next, replace all the code in product-card-grid.liquid file with this:
{% unless grid_image_width %}
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% if product.images.size > 1 %}
<img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
{% endif %}
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price', variant: product %}
</div>
</a>
</div>
This will display your last image on hover, you can replace product.images.last with product.images[1] if you want the second photo to display instead.
Thanks guys!
Hi,
I don't find product-card-grid.liquid ? My theme is Venture.
Thanks,
Sam
@Messa57fr , from the Shopify tutorial I linked to in my original post:
If your theme doesn't have a product-grid-item.liquid file, then look for one of the following:
Hopefully, this will help you out!
works like a charm! thanks!
Hello
I followed your instructions and for some reason it changes my grid view. My pictures are now a lot bigger and the prices are gone.
Can someone help me with this please?
Thanks
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
thanks for url
yes please add tutorial code if doesn't work so let me know i will check code
In step 2:
"Next, replace all the code in product-card-grid.liquid file with this:"
I had an issue with the product vendor duplicating. It was showing the product vendor twice as I believe it was conflicting with the product vendor (on/off button) in the theme customiser.
To resolve the issue I removed the line (shown below) from the code.
<div class="grid-view-item__vendor">{{ product.vendor }}</div> {% endif %}
After doing this it worked perfectly, hope this may help others. Thanks Brittany 🙏
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024