Solved

product card shadow only in homepage only dawn

sweetchin23
Excursionist
43 0 6

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 andvanceScreen Shot 2023-11-08 at 8.13.54 AM.png

Accepted Solutions (2)
Spac-es
Shopify Partner
327 98 111

This is an 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!

 

Captura de pantalla 2023-11-14 192208.png

 

 

View solution in original post

Spac-es
Shopify Partner
327 98 111

This is an 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!

View solution in original post

Replies 10 (10)

Spac-es
Shopify Partner
327 98 111

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
Excursionist
43 0 6

hi! heres my store.

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

Spac-es
Shopify Partner
327 98 111

This is an 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!

 

Captura de pantalla 2023-11-14 192208.png

 

 

Spac-es
Shopify Partner
327 98 111

 

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 */

 

Captura de pantalla 2023-11-14 194244.png

 

sweetchin23
Excursionist
43 0 6

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

Spac-es
Shopify Partner
327 98 111
{% 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
Excursionist
43 0 6

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

Spac-es
Shopify Partner
327 98 111

This is an 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
Excursionist
43 0 6

thank you so much!

sweetchin23
Excursionist
43 0 6

thank you so much. it works perfectly!