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

Shopify Discussion

Topic summary

A Shopify store owner seeks help changing the “Sold Out” label and button colors in the Prestige theme on both collection and product pages.

Initial Solution Provided:

  • Two community members share CSS code snippets to modify the sold-out colors
  • Code should be added to the bottom of the theme.css file via Online Store > Themes > Edit Code > Assets
  • Specific CSS targets .ProductItem__Label for collection pages and .ProductForm__BuyButtons Button[disabled] for product pages

Additional Requests:
The original poster expands their questions to include:

  1. Standardizing image sizes on collection pages
  2. Changing social share icon colors (Facebook, Twitter, Pinterest)
  3. Adding an Instagram icon to product pages
  4. Highlighting SKU and price colors
  5. Reducing collection tile size on the homepage
  6. Removing the Twitter icon if there’s a limit

Follow-up Response:

  • CSS solutions provided for issues #1, #2, #4, and #5
  • Issue #3 (Instagram icon) requires custom coding and hiring a Shopify Partner/Expert is recommended
  • Discussion remains open for further assistance via private message
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

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.

2

@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?

3

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;
}

Screenshot 2024-02-28 at 09.45.38.png
Screenshot 2024-02-28 at 09.45.38.png1435×490 293 KB

Best Regards,

Dan

4

Thank you!

5

Thank you Dan!

6

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.

7

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

8

@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%;
}