Collapsible Row on product page. Change border line colour and remove right side arrow

Solved

Collapsible Row on product page. Change border line colour and remove right side arrow

JSFMC
Tourist
17 0 1

Hello.

 

I have Dawn theme (if that helps). On the product page I am using Shopify's Collapsible Row block.

 

1. I want to change the border line colour to black

2. And remove the up/down arrows on the right side

 

See attached print screen.Screenshot 2024-09-19 112226.jpg

 

If anyone could assist with a code to do these changes, please.

 

J

Accepted Solutions (2)
Tech_Coding
Shopify Partner
333 91 82

This is an accepted solution.

@JSFMC 
Add This code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .accordion {
      border-top: .1rem solid #000 !important;
      border-bottom: .1rem solid #000 !important;
  }
  .product__accordion.accordion.quick-add-hidden svg.icon {
       display: none !important;
  }
</style>

Tech_Coding_0-1726743974671.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Moeed
Shopify Partner
5519 1496 1787

This is an accepted solution.

Hey @JSFMC 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.accordion {
    border-top: solid 1px black !important;
    border-bottom: solid 1px black !important;
}
.accordion .summary__title+.icon-caret {
    display: none !important;
}
</style>

RESULT:

Moeed_0-1726744522863.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 12 (12)

Tech_Coding
Shopify Partner
333 91 82

Hello @JSFMC 

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
JSFMC
Tourist
17 0 1

I am trying to send you link to my website and password. But the message doesnt stick.

JSFMC
Tourist
17 0 1

----------

Tech_Coding
Shopify Partner
333 91 82

This is an accepted solution.

@JSFMC 
Add This code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .accordion {
      border-top: .1rem solid #000 !important;
      border-bottom: .1rem solid #000 !important;
  }
  .product__accordion.accordion.quick-add-hidden svg.icon {
       display: none !important;
  }
</style>

Tech_Coding_0-1726743974671.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
JSFMC
Tourist
17 0 1

Thank you, Tech_Coding.

 

It worked.

Moeed
Shopify Partner
5519 1496 1787

Hey @JSFMC 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


JSFMC
Tourist
17 0 1

Did you get my first message? I am new to this. 

JSFMC
Tourist
17 0 1

Can you DM me and I will send website link and password

Moeed
Shopify Partner
5519 1496 1787

This is an accepted solution.

Hey @JSFMC 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.accordion {
    border-top: solid 1px black !important;
    border-bottom: solid 1px black !important;
}
.accordion .summary__title+.icon-caret {
    display: none !important;
}
</style>

RESULT:

Moeed_0-1726744522863.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


JSFMC
Tourist
17 0 1

Thank you, Moeed.

 

It worked.

Made4uo-Ribe
Shopify Partner
8410 2011 2466

Hi @JSFMC 

Would you mind sharing your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
JSFMC
Tourist
17 0 1

Can you DM me for this. Thanks.