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
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' %}
{% endif %}
hi! heres my store.
https://halo-m.com/password
yiflow
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' %}
{% endif %}
This would be the result, I hope you like it!
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 */
thank you so much. it works perfectly!
1 Like
the only problem now is when i hover it the shadows are gone.
{% if template == 'index' %}
{% endif %}
hi it’s still the same if i hover it.
This code now takes image hover into account:
{% if template == 'index' %}
{% endif %}
Mark it as a solution too if it helped you!
thank you so much!
1 Like