Horizon Theme Hover Effect

[PoolTree_System]

Help please! Using Horizon theme, have the “Scale” card hover effect on (says it should work for collection and product cards). Working well on all pages except the page I created a custom section for. Section has 3 blocks - collection card, product card, collection card. The 2 collection cards work great, the product card does nothing. How do I fix this? Thanks so much!!

[devcoders]

Hi @PoolTree_System

Inspect a working product card (from your homepage / collection page) in the browser dev tools.

Look for the wrapping

and its classes, e.g. something like:

<div class="card-wrapper product-card-wrapper">
  <div class="card card--standard card--media ...">

Notice the classes like card–media or card-hover-scale.

Compare it to your custom section’s product card block.

If your custom block is missing card, card–media, or card-hover-scale, then the hover effect won’t trigger.

Solution: Add the same classes. For example:

<div class="card-wrapper product-card-wrapper">
  <div class="card card--standard card--media card-hover-scale">
    {% render 'product-card',
      product: block.settings.product,
      media_aspect_ratio: section.settings.image_ratio,
      show_secondary_image: section.settings.show_secondary_image,
      show_vendor: section.settings.show_vendor
    %}
  </div>
</div><div class="card-wrapper product-card-wrapper">
  <div class="card card--standard card--media card-hover-scale">
    {% render 'product-card',
      product: block.settings.product,
      media_aspect_ratio: section.settings.image_ratio,
      show_secondary_image: section.settings.show_secondary_image,
      show_vendor: section.settings.show_vendor
    %}
  </div>
</div>

If Horizon has a snippet like product-card or card-product, always use that instead of writing raw HTML. That ensures all effects (hover, quick add, badges, etc.) work.

Note: If you’d like my help with these improvements, feel free to contact me at devcodersp@gmail.com.

[Ukuqalisa]

Hi there,

You’re right — in the Horizon theme, the Scale hover effect is built into the theme’s CSS and JavaScript. By default, it applies to collection cards and product cards. The reason it’s not working in your custom section is usually one of these:

1. Missing class reference – The theme applies the hover effect to elements with specific class names (e.g., .card, .card--product, .card--collection). If your custom section’s product block isn’t using the same markup or class as the theme’s standard product card, the effect won’t trigger.

2. Custom section isolation – Since you created a custom section, Shopify might not automatically attach the hover animation script to that block unless the correct structure is followed.

How to fix it:

• Inspect your custom section’s product card markup and make sure it matches the same HTML structure/class names as the default product card in Horizon. For example:

  <div class="card card--product card--standard card--hover-scale">
    <!-- product image & details here -->
  </div>
  
  

• Ensure the product card has the .card--hover-scale class. That’s what triggers the hover animation.

• If you want to force it with CSS (quick fix), you can add something like:

  .custom-section .card--product img {
    transition: transform 0.3s ease;
  }
  .custom-section .card--product:hover img {
    transform: scale(1.05);
  }
  
  

  This mimics the built-in Scale effect, even if the theme’s JS isn’t attaching to your custom block.

If you’d like, I can review the code of your custom section and align it with Horizon’s native card structure so the built-in hover effects work seamlessly without relying on extra CSS.

[rajweb]

@PoolTree_System

Help please! Using Horizon theme, have the “Scale” card hover effect on (says it should work for collection and product cards). Working well on all pages except the page I created a custom section for. Section has 3 blocks - collection card, product card, collection card. The 2 collection cards work great, the product card does nothing. How do I fix this? Thanks so much!!

Hey @PoolTree_System ,

Thanks for sharing the details! The reason the “Scale” hover effect is not working on the product card inside your custom section is likely because the Horizon theme’s hover animation is applied through specific classes that are automatically added when using the theme’s default product grid/sections. Since this is a custom section, the product card block might be missing the correct wrapper class (usually something like card–scale or card-hover–scale) or the JavaScript that triggers the animation isn’t targeting it.

To fix this, you’ll need to:

1. Inspect your product card block in the custom section and confirm if it has the same card and hover-effect classes as the collection cards.

2. If not, add the same classes that Horizon uses for hover effects (compare with a working product card in a native collection page).

3. Ensure the markup structure of your product card matches the theme’s default structure, since the scaling effect is tied to that hierarchy.

Once the product card has the same wrapper + class names as the default, the hover effect will work consistently across your custom section.

No worries at all - if you’d like me to implement this fix for you, feel free to reach out. You can also check out my past work here: https://rajatweb.dev/ - you’ll find my contact details there as well.

Best Regards,

Rajat | Shopify Expert