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

Topic summary

On a Dawn theme product page, the Collapsible Row (accordion) needed styling changes: make the divider lines black and remove the right-side up/down arrow icons.

Early replies asked for the store URL and password to inspect the issue, but the poster had difficulty sharing them via DM. A generic code fix was then provided.

Solution implemented (in theme.liquid, added just above ):

  • .accordion { border-top: .1rem solid #000 !important; border-bottom: .1rem solid #000 !important; }
  • .product__accordion.accordion.quick-add-hidden svg.icon { display: none !important; }

The CSS sets the accordion’s top/bottom borders to black (#000) and hides the SVG arrow icons on the right.

Screenshots were shared to illustrate the result, but they aren’t necessary to apply the fix. The original poster confirmed the changes worked. Status: resolved; no further action needed.

Summarized with AI on December 19. AI used: gpt-5.

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.

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

J

1 Like

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.

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

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

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


Hi @JSFMC

Would you mind sharing your store URL? Thanks!

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

Can you DM me for this. Thanks.

@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 on theme.liquid

.accordion { border-top: .1rem solid #000 !important; border-bottom: .1rem solid #000 !important; } .product__accordion.accordion.quick-add-hidden svg.icon { display: none !important; }

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

1 Like

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 tag


RESULT:

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

Best Regards,
Moeed

1 Like

Thank you, Tech_Coding.

It worked.

Thank you, Moeed.

It worked.