How to remove the hove zoom & blur on collection list on Origin theme?

Shopify Discussion
1

Anyone know what I need to tweak in the code to hide this feature, it is making the quality of my images look bad!

https://www.malepoli.sh/products/storm-12

Thanks in advance!

Olly

2

To remove the hover zoom and blur effect on collection list items in the Origin theme, you can follow these steps:

  1. From your Shopify admin dashboard, click on “Online Store” and then click on “Themes”.

  2. Find the Origin theme and click on “Actions” then select “Edit Code”.

  3. In the left-hand sidebar, click on “Assets” and then find the “theme.scss.liquid” file.

  4. Click on the file to open it and then scroll to the bottom of the file.

  5. Copy and paste the following code snippet at the end of the file:

css

.grid-link__image-wrapper:hover .grid-link__image { transform: none; filter: none; }
  1. Save the changes to the file.

This will remove the hover zoom and blur effect on collection list items in the Origin theme. Once you have saved the changes, you can refresh your website to see the effect.

3

Hello @ollyjoshi ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1680679553218.png
GemPages_0-1680679553218.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

4

Amazing, that worked a treat. Thank you!