Remove the zoom effect on featured collection section

Store Design
,
1

Hi there, I have the new dawn theme, how can I remove the zoom effect on the featured collection section on my home page? There doesn’t seem to be a setting for it.

2

Hi @15love

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.grid__item.product__media-wrapper media-gallery > div + slider-component {
    pointer-events: none !important;
}

I hope this helps

Best,

Daisy

3

Unfortunately, that didn’t work.

if it helps, my website is 15lovestudio.com and password is TEAM15LOVE!

4

Hello @15love , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file.
  5. Open “component-card.css”.
  6. Change the following code at the file.

Find this CSS and set a transform: scale(1) which is (1.03 ) by default.

.card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    /* transform: scale(1.03);  remove or comment this CSS */
    transform: scale(1); /* add this new CSS */
  }
  .card-wrapper:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    /* transform: scale(1.03);  remove or comment this CSS */
    transform: scale(1); /* add this new CSS */
  }

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

5

Hi @15love ,

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

  1. Go to Online Store
  2. Go to customize and select the section you want to disable zoom.

theycallmemakka_0-1732076736318.png
theycallmemakka_0-1732076736318.png1882×603 149 KB

  1. Paste below code on the custom CSS field.

theycallmemakka_1-1732076756637.png
theycallmemakka_1-1732076756637.png1899×548 135 KB

@media screen and (min-width: 990px) {
    .card-wrapper:hover .media.media--hover-effect>img+img {
        transform: scale(1);
    }
}
  1. Save the changes

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

6

Thank you! That was a very easy solution!