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

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

namestolen
Excursionist
44 0 7

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!

Replies 8 (8)

AnneLuo
Shopify Partner
1259 223 258

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.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

namestolen
Excursionist
44 0 7

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

Sweans
Shopify Partner
429 88 125

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

namestolen
Excursionist
44 0 7

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
Shopify Partner
429 88 125

 

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

namestolen
Excursionist
44 0 7

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
Shopify Partner
429 88 125

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

namestolen
Excursionist
44 0 7