Edit Product Card style

Store Design
, , , , , , ,
1

I’d like to edit the product card style on my website. I’d like to make it so there’s a blue outline (#06A0D2) and add a slight space between the outline and content inside (product picture/title/price,etc..)

Website for reference:https://zuieqqdwx311oifx-87026893093.shopifypreview.com

Example of something similar I am trying to attain:

Screenshot 2024-07-21 at 3.46.15 AM.png
Screenshot 2024-07-21 at 3.46.15 AM.png410×525 166 KB

2

@sibouss -

please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.card-wrapper {border: solid #06A0D2 1px;    padding: 5px;}
3

Hi @sibouss

Please add the following CSS to your theme. You can adjust the padding based on your requirements.

.product-card-wrapper.card-wrapper {
    border: solid #06A0D2 1px;
    padding: 10px;
}
.porduct-card-wrapper .card__content {
    padding-top: 10px;
}

Thank you.

4

Hi @sibouss

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

theycallmemakka_0-1721554442233.png
theycallmemakka_0-1721554442233.png1851×611 252 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

5

Thanks! Do you also know how I can capitalize letters of the product titles? for some reason theyre all in lower case

6

Thanks! Do you also know how I can capitalize letters of the product titles? for some reason theyre all in lower case