Disabling zoom effect when hovering over swatches.

technase · ‎01-31-2024

I'm looking for help in disabling the hover-over zoom effect on color swatches. I am attaching a screenshot for reference. The zoomed variant-image is poorly stretched out and it does interfere when navigating through the variants so I think it will be better if this is disabled.
There is an issue with the main image as well but I am more concerned about the swatch problem.
Any assistance in fixing this would be highly appreciated.

I am using a theme called Ella with very poor customer support.
Link: https://testingstoresandthemes.myshopify.com/products/600ml-shaker
store front password: test

screencapture-testingstoresandthemes-myshopify-products-600ml-shaker-2024-02-01-00_42_49.png

technase

ThePrimeWeb · ‎01-31-2024

Hey @technase,

Please try this and let me know if it works 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.product-form__label:hover .expand {
    display: none !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎01-31-2024

Hey @technase,

Please try this and let me know if it works 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.product-form__label:hover .expand {
    display: none !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Made4uo-Ribe · ‎01-31-2024

Hi @technase

We can remove by adding this code.

.product-form__label .expand img {
    display: none;
}

But there will still white box remaining when you hover it. The design also have a script that developer can remove.

On my screen it is working well.

Its not stretch.

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

technase · ‎01-31-2024

it does look fine on one of my browser (Firefox) as well. But its all stretched out on both the Chrome (PC and mobile) and Microsoft Edge. I've also tested it in incognito mode, but its the same issue. Any idea what's causing it ?

technase

Made4uo-Ribe · ‎01-31-2024

Here an SS on my incognito,

Im using chrome. It depends there are a lot of reason. Different interpretation or image format.

Check this one, it changes the hieght of other browser.

.product-form__label .expand img {
    height: 80px;
}

Paste it on the component-prodcut-form.css.

And Save.

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

Disabling zoom effect when hovering over swatches.