How to remove the arrows from my collapsible content?

[leegoog]

Hello. I was wondering how to remove the arrows from the collapsible content, such as the image below：

how to change and add new icon to it?

Thanks for the help!

[BSSCommerce-HDL]

Hi @leegoog, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

[leegoog]

Hi there, I didn't publish the shop now. 

https://b3ae64-c3.myshopify.com/

Are you able to see it? Thanks

[BSSCommerce-HDL]

@leegoog, Your site have protected password

[leegoog]

Hi there, I managed to removed password, can you see it now? Thanks

[sahilsharma9515]

Hi @leegoog 

As you need to remove the unused icon code, then upload the new icon in the assets and call that icon where do you want to show it, and later on customize it with the help of css.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best regards

Sahil

[leegoog]

This is the Collapsible content in the shopify systerm, do you mean after I publish the website then I can change the icon? but first how to remove the arrow for the collapsible fuctiom?

[sahilsharma9515]

Hi @leegoog It's not related to publishing the site first, you can do it even your theme is in draft mode.

Can you please provide your store URL and password as well if applicable, so that I can provide you the code that will remove the existing icon.

Best Regards

Sahil

[sahilsharma9515 · Accepted solution]

Hi @leegoog Please add the below code to remove the icon.

<style>
svg.icon.icon-caret {
    display: none;
}
</style>

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

Result:

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[leegoog]

Thanks a lot, all sorted. 

[Dan-From-Ryviu]

Hi @leegoog 

You can change or remove that icon from your Online Store > Themes > click "..." in the current theme > Edit code > open collapsible-content.liquid file, find 

{% render 'icon-caret' %}, remove it, or change 'icon-caret' with another icon file. 

[leegoog]

Thanks for the help, but I need to remove the arrow from the Collapsible content first.