Shopify themes, liquid, logos, and UX
Looking to add these star icons to the left and right of links in the menu/navigation pane when the page link is hovered over (see mockup below).
Star icon .pngs: right of text: left of text:
Website: https://6af6dc-42.myshopify.com/
Password: mitten
Solved! Go to the solution
This is an accepted solution.
Hi @GLL2024
You can add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.list-menu__item:before,
.list-menu__item:after {
content: '';
width: 20px;
height: 20px;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
opacity: 0;
}
.list-menu__item:after {
background: url(https://community.shopify.com/c/image/serverpage/image-id/518133i9FCFB7236FEEBBD1/image-size/large?v=v2&px=999);
}
.list-menu__item:before {
background: url(https://community.shopify.com/c/image/serverpage/image-id/518134iCF71093009155FF3/image-size/large?v=v2&px=999);
}
.list-menu__item:hover:before,
.list-menu__item:hover:after {
opacity: 1 !important;
}
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi, @GLL2024
I can help you with it. But it needs to add some custom code. If you need my help, please let me know.
@GLL2024 ,
Yes possible but not without customization.
This is an accepted solution.
Hi @GLL2024
You can add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.list-menu__item:before,
.list-menu__item:after {
content: '';
width: 20px;
height: 20px;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
opacity: 0;
}
.list-menu__item:after {
background: url(https://community.shopify.com/c/image/serverpage/image-id/518133i9FCFB7236FEEBBD1/image-size/large?v=v2&px=999);
}
.list-menu__item:before {
background: url(https://community.shopify.com/c/image/serverpage/image-id/518134iCF71093009155FF3/image-size/large?v=v2&px=999);
}
.list-menu__item:hover:before,
.list-menu__item:hover:after {
opacity: 1 !important;
}
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
@Dan-From-Ryviu
Need it, on hover.
Yeah, it only appear on hover menu item
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
ohh yes there is opacity
This worked perfectly - thank you so much!!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024