Help with coding background colour

JyeThais · ‎06-03-2024

We recently noticed the background colour of the "Notify Me When Available" button on our product page changed to white and our customers are having issues locating the button. does anyone know how to update the background colour of the button to black.

We are using Klaviyo codes for the set-up of "Back in Stock" feature.

BSSCommerce-HDL · ‎06-03-2024

Hi @JyeThais, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

JyeThais · ‎06-03-2024

@BSSCommerce-HDL Is this the information you are after ? https://www.cocowillow.com.au/

JyeThais · ‎06-03-2024

@Jamokay1 Thank you. What do you need from my end?

JyeThais · ‎06-03-2024

Hello @Abdullah43 - Is this the information you are requesting ? https://www.cocowillow.com.au/

BSSCommerce-HDL · ‎06-03-2024

Hi @JyeThais,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

a.btn.klaviyo-bis-trigger {
    background-color: black !important;
    color: #ffff !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

JyeThais · ‎06-04-2024

Hello - Thank you. I'm very appreciative of your help!

Quick question: Step 2. I found theme.css (see screenshot below). Where do
I add step 3 code?

[image: image.png]

BSSCommerce-HDL · ‎06-04-2024

Hi @JyeThais,
Please add my code at the end of the file -> Save

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

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

Hi @JyeThais

You could do that by following this

From your store admin
Open Online Store > Themes
Click ... in the current theme, select Edit code
Open theme.liquid file, add this code below after <head>

<style>
.shop-pay-terms .klaviyo-bis-trigger {
background-color: #212121;
color: #fff !important;
}
.shop-pay-terms .klaviyo-bis-trigger:hover {
opacity: 0.9
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

Help with coding background colour

Help with coding background colour

Community Blog Articles