How can I change the background and text color of collapsible row titles?

Store Design
1

Looking to change the background, and text colour for the titles of my collapsible rows on product pages. Hoping for the background colour to go full width as well. Im a little stuck

Here is the current code i use for the background of the content.

.product__accordion .accordion__content {
             background: #242833 !important;

when i attempt to recreate this for the “title” it will only cover the text and not fill in the box itself.

2

8bd0a6c582edd0358ff31c451c858344.png
8bd0a6c582edd0358ff31c451c858344.png684×413 28.3 KB

3

Hi @RRobichaud

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

www.smalltechgaming.ca

5

Thank you for sharing, I just like to clarify this is what you want to achieve?

Made4uoRibe_1-1696196819338.png
Made4uoRibe_1-1696196819338.png560×305 15.1 KB

If it is try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.summary__title h2, svg.icon.icon-caret  {
    color: #ffff;
}
.accordion .icon-accordion {
    fill: #ffff;
}
product-info#ProductInfo-template--16801509441787__main details {
    background: #242833;
    padding: 0px 10px;
}
  • And Save.
6

f1cdfe32cafb479e8ba09fe2178d49c6.png
f1cdfe32cafb479e8ba09fe2178d49c6.png671×298 4.77 KB

7

Got it now, removed the restricted template and now its good. Awesome!