Re: Turn dropdown Arrows to +/- icons

Solved

How can I change dropdown arrows to +/- icons on my website?

Official-Kortez
Tourist
16 0 2

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!!

OfficialKortez_1-1711015822374.png

 

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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.

ThePrimeWeb_0-1711017928359.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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.

ThePrimeWeb_0-1711019709730.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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.

ThePrimeWeb_0-1711017928359.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Official-Kortez
Tourist
16 0 2

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 !!!

OfficialKortez_0-1711019103212.pngOfficialKortez_1-1711019114062.png

 

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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.

ThePrimeWeb_0-1711019709730.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Official-Kortez
Tourist
16 0 2

Thank you very much man! I really appreciate your assistance!