Disable zoom ella theme 3.0.0-sections-ready

Highlighted
New Member
3 0 1

Hi Guys (and girls),

 

Hope you good, who ever reads this message :).

 

I want to disable my zoom on Ella theme 3.0.0-sections-ready theme. Who knows a quick hack or solution? The theme does not allow to disable the zoom with a click on a button, so I need to edit the code somehow.

 

My site is: www.raw-925.com.

 

Cheers,


Sascha

1 Like
Shopify Partner
644 132 152

Hello Sascha,

You have to edit 2 sections ( home-blog-posts and home-custom-block-spotlight ) may be little variation in section name.
Once you find these 2 sections search this class name  ( class="animate-scale" ) once you find this remove it or rename it.
Or you can create option in scheme to enable and disable it from theme settings.
Alternatively you can remove css of this class from theme-styles-responsive.scs.liquid

Thanks


Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted
New Member
1 0 0

Hi Guleria,

 

This is great, thanks for the post. I need to remove the zoom feature on my Ella themed site as well, so this should hopefully help me out. 

 

Before I jump into this, can you confirm that this will only affect the product image zoom feature on the project page? Or will these changes affect other aspects of my site?

 

Thanks!

0 Likes
Highlighted
New Member
3 0 1

Hi Mave,

 

I tried to update the code myself, however unsuccessfully. 

 

Next week I will do some custom coding by a developer. Maybe we can get a better deal when you jump into the action? :)

 

Cheers,

 

Sascha 

0 Likes
Highlighted
New Member
1 0 0

To remove the hover zoom on the product pages in the Ella Shopify Theme, find the images for loop in the product template you are using.
(ie. sections/product-template-grouped.liquid or sections/product-template-full-width.liquid) and remove "data-zoom":

{% for image in product.images %}
<div class="thumb" id="variant-img-{{forloop.index }}">
<a data-zoom class="fancybox" rel="gallery1" href="{{ image | img_url: 'original' }}"

Remove:  data-zoom (in orange above)

Example (with no data-zoom):

{% for image in product.images %}
<div class="thumb" id="variant-img-{{forloop.index }}">
<a class="fancybox" rel="gallery1" href="{{ image | img_url: 'original' }}"

 

 

 

0 Likes