add arrow in the collapsible row

[Daria18]

Hello,

I would like to add arrow in the collapsible content, it's should be by default but it doesn't. Does anyone know how I can do this?

https://18sparrows.com/products/false-mirror-sweatshirt

[thescriptflow]

Hey @Daria18 this require a custom code in order to show on Collapsible row.

[pawankumar]

Hi @Daria18 
I hope you are doing well
Please put this css in theme.liquid before body closing tag </body>

<style>
summary .icon-caret {
    height: .6rem !important;
}
</style>

 Please like and accept the solution if it works for you

Thanks!

[LizHoang · Accepted solution]

Hi @Daria18 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.accordion .summary__title+.icon-caret {
    height: .6rem !important;
}

Result: 

Best,

Liz

[Daria18]

Thank you 😊

[arslananwer03]

Hi @Daria18 it looks like your icon height is making it very small

.product__accordion svg.icon.icon-caret {
height: 10px !important;
width: 10px !important;
}

you can add this code inside your base.css or custom.css asset file in the code it will show the icon on the accordion