Shopify themes, liquid, logos, and UX
We're using the Escoot Shopify theme and the collection page uses the "collection-template" section. The section is loading the product images that have an intrinsic size of 100x100 and then scales up to 586x586. This is causing blurred and stretched images.
On the product page we have high-quality images, so why does Shopify insist on using, what appears to be, a downscaled photo then upscaling - any way to fix this?
Eg.
Solved! Go to the solution
This is an accepted solution.
The solution is to remove the image-size multiplier of 0.8, so it's at 1. I haven't the slightest clue how a 0.8 modifier tells the store to load a 100x100px photo as opposed to the high-quality, uploaded photo - but it works.
Original:
{% if collection.products.size > 0 %}
{% for product in collection.products %}
{% include 'product-grid-item', product: product, imageSize: imageSize*0.8 %}
{% endfor %}
Solution:
{% if collection.products.size > 0 %}
{% for product in collection.products %}
{% include 'product-grid-item', product: product, imageSize: imageSize %}
{% endfor %}
Hello @FrillyLama ,
You can try to follow these steps:
Go to Online Store -> Themes -> Actions -> Edit code
Go to Sections -> collection-template.liquid file
look for the section that displays the product images. It might look something like this:
{% for product in collection.products %}
<!-- Display product image -->
<img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.featured_image.alt }}">
{% endfor %}
To display higher-quality images, you can modify the code to use a larger image size. For example, you can replace 'master' with 'grande' or 'large':
{% for product in collection.products %}
<!-- Display product image -->
<img src="{{ product.featured_image | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
{% endfor %}
Save changes
Let us know if you can make it.
Ali Reviews team.
I believe I found the section in collect-tempalte.liquid and changing the img_url to master/grande did not alter the photo. Any more ideas?
This is an accepted solution.
The solution is to remove the image-size multiplier of 0.8, so it's at 1. I haven't the slightest clue how a 0.8 modifier tells the store to load a 100x100px photo as opposed to the high-quality, uploaded photo - but it works.
Original:
{% if collection.products.size > 0 %}
{% for product in collection.products %}
{% include 'product-grid-item', product: product, imageSize: imageSize*0.8 %}
{% endfor %}
Solution:
{% if collection.products.size > 0 %}
{% for product in collection.products %}
{% include 'product-grid-item', product: product, imageSize: imageSize %}
{% endfor %}
Thanks for this contribution! I having a hard time finding this code for my site. Maybe the code has changed for the latest theme versions. Can you help me find it so I can change the blurry images on my collection page? It's killing my sales. Thanks in advance!
Hi there, Just figured how to fix this so commenting here if anyone still needs help. I exported the image in SVG format through Canva and it became crystal clear. You can see it in our website, we are a coffee store specializing in coffee blends specially made for Gamers for improving their performance - https://hpbrew.com/ You can see in here that images are super sharp. If this answer helped you please help us back as well. You can help us by following our Instagram https://www.instagram.com/hpbrewofficial/ and yes only if you like what you see.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024