New Shopify Certification now available: Liquid Storefronts for Theme Developers

Collapsible content customization. Dawn theme.

Solved
GalaxyGlowz
Tourist
6 1 4

So I want to get rid of the gray lines that divide the rows of my collapsible content on my product page. And, I want to make the heading of each row bold. Plus, I want to make icon of each row a "+" and when you press on the row the icon changes to "-". Any ideas on how i can achieve that? I have dawn theme on my store.

 

The perfect style that I want to achieve for my collapsible content is provided in the attached photo, but i don't think its achievable, but if it is, please let me know 😉Screenshot 2023-11-14 191214.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
4229 978 1190

This is an accepted solution.

Hi @GalaxyGlowz 

To remove the grey lines and bold the text. 

Check 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:
  • And Save.

 

.accordion {
    border-top: 0rem !important;
    border-bottom: 0rem !important;
}
.accordion__title {
    font-weight: 700;
}

 

  • And save. 
  • Result:
  • Made4uoRibe_0-1699986463609.png
  • To change the icon to plus +, youll need a developer to change the code in your store. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Reply 1 (1)
Made4uo-Ribe
Shopify Partner
4229 978 1190

This is an accepted solution.

Hi @GalaxyGlowz 

To remove the grey lines and bold the text. 

Check 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:
  • And Save.

 

.accordion {
    border-top: 0rem !important;
    border-bottom: 0rem !important;
}
.accordion__title {
    font-weight: 700;
}

 

  • And save. 
  • Result:
  • Made4uoRibe_0-1699986463609.png
  • To change the icon to plus +, youll need a developer to change the code in your store. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com