[Dawn Theme] How do I modify collapsible rows? Background color, border, etc.

[namestolen]

On my product page I want to have a collapsible row that is automatically open for my "Product Specifications". I want to change the background color, the border size, and border color.  Thanks!

[AnneLuo]

Hi, @namestolen 

I can help you with it. But it need to add some custom code. If you need my help, please let me know.

[namestolen]

Yes of course.  What is the code and where should I put it?

[Sweans]

Hi @namestolen ,

You can make the mentioned changes by adding a simple line of css.

.product__accordion{
background-color: #3a3aa6 !important;
border-top:1px solid #fff !important;
border-bottom:1px solid #fff !important;
}

You can change the color by replacing the #color to your hex code and adjust the thickness of border by increasing the px value in border-top and bottom

Paste this code to your base.css

Go to your online store> themes > Click on three dots of current active theme > edit code > search base.css in the left sidebar > open it and paste the code.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[namestolen]

Posting this code in base.css did not work.  Posting your code in the Custom CSS of the Product information section of the Default product page did work.

[Sweans]

Hi @namestolen ,

It must be due to some overide issue can you add the code below.

.product__info-wrapper .accordion {
background-color: #3a3aa6 !important;
border-top:1px solid #fff !important;
border-bottom:1px solid #fff !important;
}

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[namestolen]

Yea, it still doesn't work when added to base.cc but it works when adding it to the "Custom CSS" of the individual page.  It doesn't have the first collapsible row open either.

[Sweans]

Hi @namestolen,

Can you try using this css may be it could fix the issue

#shopify-section-template--16117602779203__main .product .product__accordion {
    background-color: black !important;
    border: 1px solid #fff !important;
}

change the background color and border color as you like.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,

Sweans

[namestolen]

https://rttrove.com/