Shopify themes, liquid, logos, and UX
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!
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.
Yes of course. What is the code and where should I put it?
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
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.
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
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.
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025