Putting lines under Collapsable rows

[ProBrew]

Does anyone have any code to add some grey lines between drop downs and change the arrow to a + Sign?

[MianZohaib]

Hey @proBrew

can you please share the store url i will do this for you.

[Moeed]

Hey @ProBrew

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 summary {
    border-bottom: solid 1px black !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[daniel01dylan]

Hi there,

Yes, I can definitely help with that. Changing the arrow to a “+” sign and adding grey lines between your dropdown sections is a common request and can be done with some CSS and potentially a small bit of Liquid code, depending on your theme.

I’d be happy to provide you with the custom code you need. Since every theme is a little different, the best way to do this is for me to take a look at your store’s specific setup.

Feel free to send me a private message and we can discuss the details there!

[tim_1]

“Custom CSS” refuses this CSS, so add a “Custom liquid” section to your product template and paste this code there.
Since you already have some code to hide borders on accordion tabs I had to use !important.

Code:

<style>
  accordion-tab {
    border-top: 1px solid rgb(var(--color-border)) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  accordion-tab:first-of-type {
    border-top: none !important;
  }
  
  summary .icon {
    display: none;
  }
  summary:after {
    content: "+";
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    transition: transform 0.2s linear;
    display:inline-block;
    font-family: monospace;
  }
  
  [open] summary:after {
    transform: rotate(135deg);
  }
</style>

Result:

[namphan]

Hi @ProBrew,

Please go to Customize > Theme settings > Custom CSS and add code:

.product__accordion.accordion {
    border-bottom: .1rem solid rgb(var(--color-border)) !important;
    border-radius: 0 !important;
}

If I helped you, then a Like would be truly appreciated.

[Elroy1]

This needs to be further checked by accessing this web page. Please share the store URL here for further look.

[ProBrew]

@tim_1

<style>
  accordion-tab {
    border-top: 1px solid rgb(var(--color-border)) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  accordion-tab:first-of-type {
    border-top: none !important;
  }
  
  summary .icon {
    display: none;
  }
  summary:after {
    content: "+";
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    transition: transform 0.2s linear;
    display:inline-block;
    font-family: monospace;
  }
  
  [open] summary:after {
    transform: rotate(135deg);
  }
</style>

Thank you, this worked!