Solved

Editing Related Products Card on Product Page

WK100
Explorer
55 1 9

Website: https://saintclairescookiedough.com/products/nutty-chocolate-chip-cookie-dough

 

Hey There! I want to edit the card on my product page below. I want it to look like the following:

  • I want the background of the card to be white
  • I want the background of the button to be black
  • I want the text of the button and the arrow to be white 

 

WK100_0-1701292040756.png

 

Let me know if you can help! 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
6962 1318 1342

This is an accepted solution.

Hi @WK100 

Go to your Online store > Themes > Edit code > open theme.liquid, add below code after <head>

<style>
#Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .card--card:after, 
#Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .card--standard .card__inner:after {
background: #fff;
}
.complementary-products__container #Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .quick-add__submit {
background: #000;
color: #fff;
padding: 1.5rem 1rem;
}
.complementary-products__container #Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .card--horizontal .quick-add {
max-width: 23rem;
}

</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 6 (6)

WK100
Explorer
55 1 9

@Dan-From-Ryviu any ideas? 

Dan-From-Ryviu
Shopify Partner
6962 1318 1342

This is an accepted solution.

Hi @WK100 

Go to your Online store > Themes > Edit code > open theme.liquid, add below code after <head>

<style>
#Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .card--card:after, 
#Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .card--standard .card__inner:after {
background: #fff;
}
.complementary-products__container #Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .quick-add__submit {
background: #000;
color: #fff;
padding: 1.5rem 1rem;
}
.complementary-products__container #Slider-b3dd64c0-babd-4ef9-93a3-1dd6fa2840f5 .card--horizontal .quick-add {
max-width: 23rem;
}

</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

WK100
Explorer
55 1 9

The absolute best!! You are a rockstar. THANK YOU

Dan-From-Ryviu
Shopify Partner
6962 1318 1342
You are very welcome,

Best Regards,
Dan from Ryviu: Product Reviews & QA

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

WK100
Explorer
55 1 9

Hey @Dan-From-Ryviu  for some reason this code stopped working for me. I think because I added a new product? Are you able to see if the code needs to be changed? 

WK100
Explorer
55 1 9

Never mind @Dan-From-Ryviu ! I fixed it.