Re: Product Description Color

How can I change the color of product descriptions?

banustyle
Tourist
11 0 1

Hi, 

 

I would like to change the product descriptions of all of my items to something like this but each product has a different description and this was done in word and the text is blurry. Please help!  

 

 Image 2-21-24 at 2.00 PM.jpg

Replies 14 (14)

stefansweb2020
Shopify Partner
134 10 5

Why you simply do not add list to your product description in Shopify admin?

banned
banustyle
Tourist
11 0 1

What do you mean? Does that change the background?

ThePrimeWeb
Shopify Partner
2139 616 520

Hey @banustyle,

 

Can you share the link to your store? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
banustyle
Tourist
11 0 1

Yes, https://banustyle.com/. Thank you! Any help would be appreciated

ThePrimeWeb
Shopify Partner
2139 616 520

Hey @banustyle,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.product__description.rte p {
    background: #a8adac !important;
    padding: 20px !important ;
    border-radius: 15px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_1-1708620206391.jpeg

 

 

Result as shown below. This is the best I could do for this one. 

 

ThePrimeWeb_0-1708620201060.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
banustyle
Tourist
11 0 1

Thank you! Can you make the fonts of the product description smaller/bigger? Also, can you also do this grey background for shipping & returns sections?

webwondersco
Shopify Partner
1190 171 174

@banustyle Please add the below line of CSS code at the end of your base.css file.

 

body .product__accordion .accordion__content{
background: #dadada;
    padding: 10px;
}

 

Result will be:

webwondersco_0-1708628987224.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
banustyle
Tourist
11 0 1

I added the line and it is not working and also the background of the product descriptions has gone away now.

webwondersco
Shopify Partner
1190 171 174

@banustyle Could you please share screenshot where did you added the code?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
webwondersco
Shopify Partner
1190 171 174

@banustyle You forgot to close one curly bracket. Please check the screenshot below:

 

webwondersco_0-1708630511955.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
banustyle
Tourist
11 0 1

Thank you!! That worked for the shipping & returns! Now how do I get that same thing for the product description?

banustyle
Tourist
11 0 1

It is every single time I add a bullet then it changes the formatting

webwondersco
Shopify Partner
1190 171 174

Add this line in base.css file at the end

 

body .product__info-container .product__description{
    background: #dadada;
    padding: 10px;
    border-radius: 10px;
}

 

result will be:

webwondersco_0-1708631129235.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram