Re: Turn dropdown Arrows to +/- icons
Helo everyone,
I recently set up my Shopify website and I would like to turn those dropdown arrows into plus and minus icons. I have followed multiple tutorials, here and on YouTube, but without any success. I would be more than grateful if any of you is able to help me with my problem.
My website is: https://official-kortez.com/
Theme: Dawn (Latest)
For more information please to do not hesitate to ask me!
Thank you in advance!!
Hey @Official-Kortez,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.product__accordion summary[aria-expanded="false"]:after {
content: '+' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 10px !important;
}
.product__accordion summary[aria-expanded="true"]:after {
content: '-' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 12px !important;
}
.product__accordion summary svg {
display: none !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
I can change the icons, but it will still open the menu into another page, it won't turn into a dropdown kind of menu.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.menu-drawer__menu summary[aria-expanded="false"]:after {
content: '+' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 10px !important;
}
.menu-drawer__inner-submenu button {
position: relative !important;
}
.menu-drawer__inner-submenu button:after {
content: '-' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
left: 20px !important;
}
.menu-drawer__menu summary svg,
.menu-drawer__inner-submenu button svg {
display: none !important;
}
.mobile-facets summary[aria-expanded="false"]:after {
content: '+' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 10px !important;
}
.mobile-facets button {
position: relative !important;
}
.mobile-facets button:after {
content: '-' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
left: 20px !important;
}
.mobile-facets summary svg,
.mobile-facets button svg {
display: none !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey @Official-Kortez,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.product__accordion summary[aria-expanded="false"]:after {
content: '+' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 10px !important;
}
.product__accordion summary[aria-expanded="true"]:after {
content: '-' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 12px !important;
}
.product__accordion summary svg {
display: none !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Thank you for your help!! It worked like a charm 🙂
Do you think this same approach would also work on the arrows in the menu & filter drawer?
Thank you in advance !!!
I can change the icons, but it will still open the menu into another page, it won't turn into a dropdown kind of menu.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.menu-drawer__menu summary[aria-expanded="false"]:after {
content: '+' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 10px !important;
}
.menu-drawer__inner-submenu button {
position: relative !important;
}
.menu-drawer__inner-submenu button:after {
content: '-' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
left: 20px !important;
}
.menu-drawer__menu summary svg,
.menu-drawer__inner-submenu button svg {
display: none !important;
}
.mobile-facets summary[aria-expanded="false"]:after {
content: '+' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
right: 10px !important;
}
.mobile-facets button {
position: relative !important;
}
.mobile-facets button:after {
content: '-' !important;
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
left: 20px !important;
}
.mobile-facets summary svg,
.mobile-facets button svg {
display: none !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hi @ThePrimeWeb . I saw this solution and tried it. It worked but the icon beside the DETAILS disappeared. What can I do? I'm using DAWN theme. Thank you!
Community Blog Articles
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025