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 Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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!!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024