Help with CSS changes for Recently Viewed Products app

Store Design
,
1

Can someone pls help with code to make the changes under “Recently Viewed Products” https://milkymotorsports.com/products/x-hook-tow-hook:

  1. Remove the black border (or just change the color) around the add-to-cart button.

  2. Change the add-to-cart font to not be bold.

  3. Remove the “view more” popup on hover and instead view 2nd image on hover.

  4. Change the image for sold out to https://cdn.shopify.com/s/files/1/0574/6429/1511/files/sold-out-label.png?v=1678944390

  5. Align Recently Viewed Products title to the left.

  6. Add blue border around the add-to-cart button on hover.

Screen Shot 2023-03-15 at 10.13.58 PM.png
Screen Shot 2023-03-15 at 10.13.58 PM.png1280×493 104 KB

2

Hi,

Please add below css code in bottom of assets/base.css file

.AkTopPin__AddCart {
border: none !important;
}
.AkTopPin__AddCart__Text {
font-weight: 400;
}
.AkTopPin__product-content__Item-view-more {
display: none;
}
.AkTopPin .AkTopPin__container__header-title {
display: block;
}

Thank you.

1 Like
3

@Denishamakwana can you please help with these too?

  1. View 2nd image on hover.

  2. Change the image for sold out to https://cdn.shopify.com/s/files/1/0574/6429/1511/files/sold-out-label.png?v=1678944390

  3. Add blue border around the add-to-cart button on hover.

4

HI,

.AkTopPin .AkTopPin__AddCart:hover {
border: 1px solid red !important; (give your color instead of red)

}
Thank you.

1 Like