Shopify themes, liquid, logos, and UX
Hello thank you in advance.
I have dawn theme and when I go to product page there is a zoom button how can I disable zooming and hide the zoom icon.
Also there is no button in theme editor that says disable zooming so I need some code snippet thank you guys.
Solved! Go to the solution
This is an accepted solution.
@Souhiiii,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
.product__media-icon.motion-reduce,
.product__media-toggle{
display: none !important
}
</style>
Kind regards,
Diego
This is an accepted solution.
@Souhiiii,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
.product__media-icon.motion-reduce,
.product__media-toggle{
display: none !important
}
</style>
Kind regards,
Diego
Would it be possible to do this (turn zoom off and remove zoom icon) just for mobile? That's where it's more of an issue.
Thanks for the info!
Hello,
Thank you for your solution. But is there a way to prevent product zoom, but not prevent play button of videos uploaded onto product page as "media" ?
When I use the solution listed here, product zoom is stopped yes. And on desktop actually I can still see and use play button on videos. But on mobile, there is no play button. It seems the coding causes the play button to be hid on video as well.
Thanks
Hi @stevrons , @Souhiiii , @Smeelah
I propose a different solution than Diego_ezfy, which is, in my opinion, cleaner and also doesn't disable anything you wouldn't want.
Here are the steps:
<span class="product__media-icon motion-reduce" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>
{% comment %}
<span class="product__media-icon motion-reduce" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>
{% endcomment %}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="product__media-icon motion-reduce" aria-hidden="true">
{%- liquid
render 'icon-play'
-%}
</span>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<span class="product__media-icon motion-reduce" aria-hidden="true">
{%- liquid
render 'icon-3d-model'
-%}
</span>
{%- endif -%}
<button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
{% comment %}
<button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
{% endcomment %}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
{%- endif -%}
I hope my solution is satisfactory.
@diego_ezfy I have custom coding which removed the zoom feature on my products, would you know how I can add this back on?
i've been looking for a solution for so long and this was perfect, thank you so much
User | RANK |
---|---|
73 | |
62 | |
60 | |
48 | |
44 |
We'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, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023