Shopify themes, liquid, logos, and UX
Hi everyone,
Recently i adjusted some features of my store, the slideshow being one of them.
The problem i faced is that the pictures used for it are kinda zoomed and cropped and also blurry, even though they're quite big in size (+4000px x +3000 px).
In the demo version inside the Customize page looks perfect, but on the web page looks different and screwed up.
Store link:
Thank you.
Solved! Go to the solution
This is an accepted solution.
@monkee1202 wrote:Why is that image the master and not the first one? It's just for my personal knowledge lol
Could you please tell me the sizes of the image needed for the slideshow?
According to Inspect Element the image is that small, so you could have made a mistake.
Generally this image should be 2000px wide. But 4000px wide is ok.
On you Customize console if you set the Slide height to 'Adapt to first image'. it won't be cropped.
Thank you for your response!
Anyway, tried that out, nothing changed, images still look blurry and "zoomed"
@monkee1202 wrote:Thank you for your response!
Anyway, tried that out, nothing changed, images still look blurry and "zoomed"
Can you copy your bgset.liquid file under snippets here?
The issue could be there.
{%- if image != blank -%}
{% if image.width > 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1728 %}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1950 %}{{ image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2100 %}{{ image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2260 %}{{ image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2450 %}{{ image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2700 %}{{ image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3000 %}{{ image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3350 %}{{ image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3750 %}{{ image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 4100 %}{{ image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{{ image | img_url: 'master' }} {{ image.width }}w {{ image.height }}h
{%- endif -%}
Thanks. This is to confirm the file is not edited.
This is the master image you put in the slider.
As you can see the image is quite small.
So when it is resized to bigger when you put into slider, it becomes a little blurry. Imagine the same dots need to fill in larger space.
So the solution is get a larger image. Best the originals, not resize from this image.
Why is that image the master and not the first one? It's just for my personal knowledge lol
Could you please tell me the sizes of the image needed for the slideshow? Because the size of that image are actually quite big, i think it's more than 4000px x 3000px, so i don't get why it's not big enough for the slideshow.
Thanks for your support anyway!
This is an accepted solution.
@monkee1202 wrote:Why is that image the master and not the first one? It's just for my personal knowledge lol
Could you please tell me the sizes of the image needed for the slideshow?
According to Inspect Element the image is that small, so you could have made a mistake.
Generally this image should be 2000px wide. But 4000px wide is ok.
Solved: the problem was that for no defiend reason the images i downloaded, even being 4000px, got downloaded in smaller sizes.
Thank you for the support!
User | RANK |
---|---|
74 | |
73 | |
68 | |
64 | |
40 |
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023