Product card shadow only in homepage only dawn

Topic summary

Goal: Add a box-shadow to featured product cards only on the homepage (Shopify Dawn) without affecting collection pages.

Key approach:

  • Scope styles to the homepage using a Liquid conditional (template == ‘index’), so the shadow applies only on the home template.
  • Target the .shape–round class used on product images/cards.

Root cause and fix:

  • The existing clip-path (ellipse) rounded the image but also clipped the box-shadow, making it invisible.
  • Solution: remove clip-path and use border-radius: 50% !important to preserve rounded appearance while allowing the shadow to show.

Styling details:

  • Add box-shadow to the product card/image; alternative shadow values were suggested to better match the desired look.

Hover issue:

  • Shadow disappeared on hover due to hover-specific styles overriding or not including the shadow.
  • Resolution: extend the homepage-scoped CSS to include hover states so the shadow persists when hovering.

Notes:

  • Images were shared to illustrate the before/after results.

Outcome:

  • User confirmed the solution works, including on hover. Issue resolved; no open questions.
Summarized with AI on January 13. AI used: gpt-5.

hi! heres my store.

https://halo-m.com/password
yiflow