Shopify themes, liquid, logos, and UX
multicolumn images are too blurry
store:https://www.aesthetixme.shop/
theme: craft
Solved! Go to the solution
This is an accepted solution.
Alright! So, to do that, you'll first need to find the file name, it should be something like multicolumn-image.liquid or similar. Once you're in, you'll need to delete the code responsible for the resolutions; this should be located at the beginning of the document and might look something like this:
{%- liquid
if section.settings.image_behavior == 'ambient'
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
else
assign half_width = '50vw'
assign full_width = '100vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
endif
-%}
When you do that, you'll notice lines of code highlighted in orange in the document; you can delete these lines as well.
Hope you can manage it, and if you have any doubts, feel free to ask me!
Before:
After:
In Shopify themes, many people face the same issue, which is image resolution. This is largely because these resolutions are tightly adjusted and edited by code for web optimization and SEO positioning. However, in certain stores or sections like your sample image, this code does more harm than good. To enhance the resolution, you would need to remove the source code. It might affect the store's speed when loading these images, but it would improve their resolution. I can't pinpoint exactly which file and code to remove at first glance. I could do it, but you would have to grant me access to your store's code.
I comfortable with code
You just tell me I will remove the code
Thank you
This is an accepted solution.
Alright! So, to do that, you'll first need to find the file name, it should be something like multicolumn-image.liquid or similar. Once you're in, you'll need to delete the code responsible for the resolutions; this should be located at the beginning of the document and might look something like this:
{%- liquid
if section.settings.image_behavior == 'ambient'
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
else
assign half_width = '50vw'
assign full_width = '100vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
endif
-%}
When you do that, you'll notice lines of code highlighted in orange in the document; you can delete these lines as well.
Hope you can manage it, and if you have any doubts, feel free to ask me!
Before:
After:
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025