How to change the Sold Out color on the Collection page and on the Product page in Prestige theme?

[vasundhara]

Hi, Could someone help me with changing the color of the Sold Out color on the Collection page and Sold Out button color on the Product page? Appreciate the help.

Here is my website: www.vasundharafashions.com

Thanks,

Radhika.

[NerdCurator · Accepted solution]

@vasundhara Seems like you are using Prestige theme from Shopify themes. For Sold Out on collection page, you need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme.css file.

.ProductItem__Label {
    background: #000000;
    color: #ffffff;
}

 For changing the button color on product page, can you tell us which color you want for the button? 

[Dan-From-Ryviu · Accepted solution]

Hi @vasundhara 

Dan here from Ryviu: Product Reviews & QA.

You can do that by adding this code add the bottom of your theme.css file in Online Store > Themes > Edit code.

.ProductForm__BuyButtons .Button[disabled] {
background: #ddd;
}

Best Regards,

Dan

[vasundhara · Accepted solution]

Thank you!

[NerdCurator · Accepted solution]

@vasundhara Seems like you are using Prestige theme from Shopify themes. For Sold Out on collection page, you need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme.css file.

.ProductItem__Label {
    background: #000000;
    color: #ffffff;
}

 For changing the button color on product page, can you tell us which color you want for the button? 

[vasundhara · Accepted solution]

Thank you!

[vasundhara]

Hello,

Could you also help me resolve these issues for me? Appreciate the help.

1. How to show all the images in same size in the Collection page?

2. Change the colors of the Share Icons for FB, Twitter and Pinterest on the Product page?

3. Can we add Instagram icon to the Product page as well in addition to FB, Pinterest and Twitter? If there is a limit, I can remove the Twitter Icon on the Product page which is located on top of the Quanity dropdown.

4. Highlight the SKU and price color in the Product page.

5.  How do I reduce the size of the square tile in the Home page for the Collections?

Thanks,

Radhika.

[vasundhara]

@NerdCurator @Dan-From-Ryviu could one of you help with the questions above? Thank you.

[NerdCurator]

@vasundhara You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme.css file. This should solve #1, #2, #4, #5. For #3, it will require some custom coding, 

your best bet would be to hire a Shopify Partner/Expert if you'd like to discuss this more, don't hesitate to send me a PM.

.ProductItem .AspectRatio--tall>img{
    object-fit:cover;
}
.ProductMeta__ShareItem svg {
    opacity: 1;
    color: #293155;
}
.features--heading-normal .ProductMeta__Price,
.features--heading-normal .ProductMeta__Sku{
    color: #293155;
}
.CollectionList .CollectionItem{
min-width:25%;
}

[Dan-From-Ryviu · Accepted solution]

Hi @vasundhara 

Dan here from Ryviu: Product Reviews & QA.

You can do that by adding this code add the bottom of your theme.css file in Online Store > Themes > Edit code.

.ProductForm__BuyButtons .Button[disabled] {
background: #ddd;
}

Best Regards,

Dan

[vasundhara · Accepted solution]

Thank you Dan!