Solved

Changing button background colour for out of stock notifications

  • 28 February 2021
  • 8 replies
  • 390 views
S
Badge

Hi all,

 

I’m currently trying to alter the background colour of the ‘Notify me when available’ button. From looking through the code, I can alter the modal button which is simple enough, but for changing the button on the actual product page I can’t see any immediate way to change this.

 

    klaviyo.enable('backinstock',{ 
        trigger: {
    product_page_text: 'Notify Me When Available',
    product_page_class: 'btn',
    product_page_text_align: 'center',
    product_page_margin: '0px',
    replace_sold_out: true
    },

 

There doesn’t appear to be any way to change this in Shopify’s visual editor when changing colours, and after reading through the documentation on Klaviyos Back in Stock styling, I can’t see anything on there either.

 

Currently the button looks like this -

 

 

But I have been able to alter the modal so it appears like so -

 

 

Any help would be greatly appreciated.

icon

Best answer by caroline 2 March 2021, 16:08

View original

8 replies

caroline
Userlevel 5
Badge +4

Hi there,

Thanks for sharing with the Community! It sounds like our Help Center article, Back in Stock Styling Code Snippets for Free Shopify Themes, would answer your question.

Hope this helps.

Best,

Caroline

 

Caroline Lu
S
Badge

Hi there,

Thanks for sharing with the Community! It sounds like our Help Center article, Back in Stock Styling Code Snippets for Free Shopify Themes, would answer your question.

Hope this helps.

Best,

Caroline

 

 

Hi Caroline,

 

Unfortunately I’ve followed this guide, but it only details editing the button on the modal rather than the button that is located on the site.

caroline
Userlevel 5
Badge +4

Hi there,

By the “button that is located on the site,” are you referring to the “Notify Me When Available” button?

Thanks,

Caroline

Caroline Lu
S
Badge

Hi there,

By the “button that is located on the site,” are you referring to the “Notify Me When Available” button?

Thanks,

Caroline


Hi Caroline,

 

That’s correct, the “Notify Me When Available” button located on the product page.

R

I’m looking for exactly this issue too.  The ‘Notify Me When Available’ button is difficult to format. My button seems to be default black and I can’t figure out how to change it.

Plus it sits on the left, isn’t centred, or the same size as the button above.  It also doesn’t behave well when shrinking the screen down for mobile. If I could change the colour and make central that would be enough to make it bearable. I’m using Venue as a theme. Any help very much appreciated!

 

On desktop:

 

On Mobile:

 

caroline
Userlevel 5
Badge +4

Hi there,

The linked guide includes the following snippet:

     trigger: {
    product_page_text: 'Notify Me When Available',
    product_page_class: 'btn',
    product_page_text_align: 'center',
    product_page_margin: '0px',
    replace_sold_out: false
    },

To adjust the CSS of the “Notify Me When Available” button, change the “product_page_class” value to the CSS class that you want to use to style the button. In other words, if you add CSS for the class ‘btn’, it will style the “Notify Me When Available” button.

Best,

Caroline

Caroline Lu
S
Badge

Hi there,

The linked guide includes the following snippet:

     trigger: {
    product_page_text: 'Notify Me When Available',
    product_page_class: 'btn',
    product_page_text_align: 'center',
    product_page_margin: '0px',
    replace_sold_out: false
    },

To adjust the CSS of the “Notify Me When Available” button, change the “product_page_class” value to the CSS class that you want to use to style the button. In other words, if you add CSS for the class ‘btn’, it will style the “Notify Me When Available” button.

Best,

Caroline

 

Thanks Caroline, that worked. For anyone who comes across the topic in future, the ‘.btn’ class already existed within my ‘styles.css.liquid’ under ‘Assets’ in Shopify’s code editor. I searched for it, and found this:

 

.btn {
  -moz-user-select: "none";
  -ms-user-select: "none";
  -webkit-user-select: "none";
  user-select: "none";
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border-radius: {{ global_border_radius }}px;
  padding: 9px 25px;
  font-size: 1.1333em;
  font-family: {{ base_font.family }}, {{ base_font.fallback_families }};
  line-height: 1.5;
  min-width: 100px;

To which I added:

  background-color: #ff88c9;
  color: black;

Which then resulted in the button showing as I had imagined, like below:

 

cassy.lee
Rank
Userlevel 6
Badge +5

Hi @syst0, 

Thanks for following up in this thread and sharing what worked for you! As we continue to grow the Klaviyo Community forum, it’s incredibly beneficial when our customers are able to share their own experiences and solutions so that it helps others succeed as well.

Thanks for being a part of our Community, 
-Cass. 

Reply


Most helpful members this week

Links & Resources

Platforms

Partners

Useful Things

About