product card shadow only in homepage only dawn

[sweetchin23]

hi, I want to have a shadow in my featured product only. like in the image. I set it in theme but my problem is the collection page also has a shadow. I only want the shadow on the homepage. can you please help me? Thank you andvance

[Spac-es · Accepted solution]

The class is called .shape--round.

However, there is an incompatibility problem with the original code; the following attribute: clip-path: ellipse(45% 45% at 50% 50%) cuts the box-shadow and does not display correctly. The clip-path is responsible for giving the image a rounded shape.

To solve it we are going to remove that attribute (clip-path: none) and add instead (border-radius: 50% !important;).

This is how the code would look (add it in the theme.liquid):

{% if template == 'index' %}
  <style>
    .shape--round {
      box-shadow: 3px 3px 5px #888888; /* set your values */
      clip-path: none;
      border-radius: 50% !important;
    }
  </style>
{% endif %}

This would be the result, I hope you like it!

[Spac-es]

I don't have access to the store, so I can't see what classes you are using. Basically the code you are looking for should be something like this:

{% if template == 'index' %}
  <style>
    .image-container img {
      box-shadow: 3px 3px 5px #888888;
    }
  </style>
{% endif %}

[sweetchin23]

hi! heres my store.

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

[Spac-es · Accepted solution]

The class is called .shape--round.

However, there is an incompatibility problem with the original code; the following attribute: clip-path: ellipse(45% 45% at 50% 50%) cuts the box-shadow and does not display correctly. The clip-path is responsible for giving the image a rounded shape.

To solve it we are going to remove that attribute (clip-path: none) and add instead (border-radius: 50% !important;).

This is how the code would look (add it in the theme.liquid):

{% if template == 'index' %}
  <style>
    .shape--round {
      box-shadow: 3px 3px 5px #888888; /* set your values */
      clip-path: none;
      border-radius: 50% !important;
    }
  </style>
{% endif %}

This would be the result, I hope you like it!

[Spac-es]

By the way, here are other values for the box-shadow attribute that I think fit more with your original requirement.

box-shadow: 7px -4px 10px 2px #777; /* set your values */

[sweetchin23]

the only problem now is when i hover it the shadows are gone.

[Spac-es]

{% if template == 'index' %}
  <style>
    .shape--round,
    .shape--round:hover {
      box-shadow: 7px -4px 10px 2px #777 !important; /* set your values */
      clip-path: none;
      border-radius: 50% !important;
    }
  </style>
{% endif %}

[sweetchin23]

hi it's still the same if i hover it.

[Spac-es · Accepted solution]

This code now takes image hover into account:

{% if template == 'index' %}
  <style>
    .shape--round,
    .product-card-wrapper:hover .shape--round {
      box-shadow: 7px -4px 10px 2px #777 !important;
      clip-path: none;
      border-radius: 50% !important;
    }
  </style>
{% endif %}

Mark it as a solution too if it helped you!

[sweetchin23]

thank you so much!

[sweetchin23]

thank you so much. it works perfectly!