Change background color of button from Collection list - Refresh Theme

Edgard22 · ‎04-25-2024

Hi

I am sorry for my bad English (i am French)

I would like (on this website : https://f01138-5e.myshopify.com/) to change the "buttons" of my collection list (homepage)

I would like them to look like my other buttons on this website (Gold background)

Could you please Help Me ?

Thanks a lot !

Theme : refresh

Dan-From-Ryviu · ‎04-25-2024

Hi @Edgard22

Please go to Online Store > Themes > Edit code > open theme.liquid file, add this code below after <head>

<style>
.collection-list .card__heading .full-unstyled-link {
    display: inline-flex;
    background-color: rgba(var(--color-button), var(--alpha-button-background));
    padding: 1rem 2rem;
    border-radius: var(--buttons-radius);
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

zack_dev · ‎04-25-2024

<style>
h3.card__heading {
    background: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha-button-background));
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha-button-background));
    background: rgba(184,153,89);
    color: black;
    border-radius: 12px;
    padding: 10px;
}
</style>

hi you can place this code at bottom of theme.liquid .

- Helpful? Like or Accept solution, - Buy me Coffee ☕

-

Contact me

Edgard22 · ‎04-25-2024

Thanks a lot ! It works

Very helpful 🙂

Dan-From-Ryviu · ‎04-25-2024

Hi @Edgard22

Please go to Online Store > Themes > Edit code > open theme.liquid file, add this code below after <head>

<style>
.collection-list .card__heading .full-unstyled-link {
    display: inline-flex;
    background-color: rgba(var(--color-button), var(--alpha-button-background));
    padding: 1rem 2rem;
    border-radius: var(--buttons-radius);
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Edgard22 · ‎04-25-2024

HI !

Thanks a lot it works 🙂

Change background color of button from Collection list - Refresh Theme

Change background color of button from Collection list - Refresh Theme

Contact me

Community Blog Articles