Styling Dawn 3.0 Klaviyo Back In Stock Button

[BrookeASI]

Hi there,

I am trying to style my Klaviyo Back In Stock Notification button, but I can’t find which button class to use or where to edit the button’s styling. It’s just blue text at the moment, but I would like it to match the width and style of my sold out button but in a different colour. I have followed all the guides on Klaviyo and some other community solutions but can’t seem to get it to work on our Dawn 3.0 theme.

Website https://www.australianskininstitute.com.au/
Link to preview: https://rus72ykd0aabls5g-20991633.shopifypreview.com

Here is the current code I am using:

Any help would be appreciated.

Thanks Shopify community.

[oscprofessional]

@BrookeASI
Hello,

.klaviyo-bis-trigger {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
	-webkit-appearance: none;
	appearance: none;
	background-color:#ff0000;
	width: 100%;
	height: 50px;
	border-radius: 50px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Like This

[Shop_Lovers]

Hi,

Add below CSS in base.css.liquid or base.css file.

a.klaviyo-bis-trigger{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    padding: 0 3rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    text-decoration: none;
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
    background-color: black;
    width: 100%;
    height: 50px;
    border-radius: 50px;
}

Thanks

Hit Like and Accept as Solution.

[Reena_Soni]

Hi @BrookeASI

can you try this code

1. Go to Online Store->Theme->Edit code
2. Section ->/main-product.liquid->paste below code after end of in the file as shown in the screenshot. https://prnt.sc/IYNNpTOOvEMy

Notify Me When Available

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.

• Feel free to contact me on reena@downtowncommerce.com regarding any help
  Shopify Partner | Skype : https://join.skype.com/invite/XFya6QyglhzK

[BrookeASI]

Thank you @oscprofessional @Shop_Lovers @Reena_Soni all of your solutions worked! However, I am now seeing a large gap between the buttons, how do I reduce this to ~5px?

Thank you!

[oscprofessional]

@BrookeASI
Hello,

.klaviyo-bis-trigger {width: 100% !important;}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

currently your product page show this type

[Luke_MF]

Can you please let me know how to reduce the spacing between the two buttons? (Screenshot below.)

Thank you kindly!