Shopify themes, liquid, logos, and UX
I'm trying to change buttons across the homepage (main banner "view products"; "add to cart") hovering style to outlined style. Currently the style of button is solid, while when hovering the button becomes more intense in color, and I would like to hover to a outlined style with inverted color. Is this possible?
In attachment an image for reference.
My website is https://kream.ch, theme is pipeline, and the orange is code: FF763D
thank you for your support
Solved! Go to the solution
This is an accepted solution.
Hi @AhsenZa
You can add this code to theme.liquid file, after <head> in Online Store > Theme > Edit code and check again
<style>
.shopify-product-form button:hover,
.btn:hover {
background: #fff !important;
}
.btn:hover {
box-shadow: 0 0 1px 2px #ff763d;
color: #ff763d !important;
}
.shopify-product-form button:hover { border: 2px solid #ff763d; }
.shopify-product-form button:hover span { color: #ff763d !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.
hello @AhsenZa
Go to online store ----> themes ----> actions ----> edit code ---->assets ---->theme.css...> ...add the code end of the file
.hero__description.rte.body-size-8.aos-init.aos-animate p :hover {
text-decoration: underline;
}
.hero__description.rte.body-size-8.aos-init.aos-animate p:hover {
text-decoration: underline;
text-decoration-color: #FF763D;
}
a.standard__cta.hero__btn.btn.btn--primary.btn--long.aos-init.aos-animate:hover {
background-color: white;
border: 3px solid;
color: #FF763D;
}
button.stain-button-primary:hover{
background-color: white;
border: 3px solid;
color: #FF763D;
}
button.stain-button-primary .btn-state-ready:hover {
color: #FF763D;
}
If this was helpful, hit the like button and accept the solution.
Thanks
This is an accepted solution.
Hi @AhsenZa
You can add this code to theme.liquid file, after <head> in Online Store > Theme > Edit code and check again
<style>
.shopify-product-form button:hover,
.btn:hover {
background: #fff !important;
}
.btn:hover {
box-shadow: 0 0 1px 2px #ff763d;
color: #ff763d !important;
}
.shopify-product-form button:hover { border: 2px solid #ff763d; }
.shopify-product-form button:hover span { color: #ff763d !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.
Works, Thank you very much
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024