Skip to main content
  • EN

​Hi there,

I am not really deep into coding, but wanted to implement your code snippet for the back-in-stock-button in our prestige theme. I changed the wordings to german and did some modal changes.

Option 1: Not sure if the problem is the highlighted “product_page_class”, which seems to be different in every theme and I did not chose the right wording for the prestige theme?! May be you guys can have a look at the code below? Your help is much appreciated!

Option 2: May be I used the wrong spot in the theme.liquid?! See picture below

 

Many thanks in advance,

Jonathan

 

That’s how the code looks right now, but the button unfortunately doesn’t show up:

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>

<script>

    var klaviyo = klaviyo || o];

    klaviyo.init({

        account: 'XXXPLACEHOLDER',

        list: 'XXXPLACEHOLDER’,

        platform: 'shopify'

    });

    klaviyo.enable('backinstock',{

        trigger: {

    product_page_text: 'e-mail erhalten, sobald verfügbar',

    product_page_class: 'button button—primary button--full',

    product_page_text_align: 'center',

    product_page_margin: '0px',

    replace_sold_out: false

    },

        modal: {

    headline: 'e-mail erhalten, sobald das produkt wieder verfügbar ist.',

    body_content: '{product_name}',

    newsletter_subscribe_label: "ich möchte auch den newsletter abonnieren."

    subscribe_checked: false

    email_field_label: 'e-mail',

 

    button_label: 'e-mail sobald wieder verfügbar',

    subscription_success_label: 'hat geklappt, du bist drin! wir melden uns, sobald das produkt wieder im store ist.',

 

    footer_content: '',

    close_label: 'schließen',

 

    additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",

    font_family: '"Helvetica Neue", Helvetica, Arial, sans-serif;',

 

    drop_background_color: '#000',

    background_color: '#fff',

    text_color: '#000',

    button_text_color: '#000',

    button_background_color: '#cadef7',

    close_button_color: '#cadef7',

    error_background_color: '#fcd6d7',

    error_text_color: '#C72E2F',

    success_background_color: '#cadef7',

    success_text_color: '#000'

    }

});

</script>

 

The spot where I put the code snippet in:

 

​

Hi @Jonathan Lukermann,

Thank you for sharing your question with the Klaviyo Community.

Indeed, Back in Stock can be tricky! For starters, yes, that is the correct theme.liquid file.

Also, the “product_page_class” simply determines the appearance of the button/link on the page it will not impact the ability of the button to display. If you want to change the appearance of the button, you can try changing the current value from ‘button button—primary button--full’ to ‘button’ or using the class of your “Add to Cart” button. You can find the class of the button by inspecting the button in Google Chrome.

Finally, we currently do not support troubleshooting paid Shopify themes for Back In Stock. You can find the list of themes we support here. With that said, I strongly recommend reviewing the reply to a previous post troubleshooting some common issues for Back in Stock. You will find that below:

Thanks and have a wonderful day.

Thanks for your help @dov.derin! i could fix it. I forgot two “,” in two lines of code and needed to use a different buttons style! 

Having a similar issue! I use the Prestige theme and would like to use the ‘Back in stock’ flow and to add the button onto the product page. Have set the flow up, but after adding the code into Shopify theme.liquid, the button doesn’t seem to display correctly? It shows up as a text link rather than a button (screenshot below) but am now sure how to fix it. Shopify have suggested it’s something to do with the Klaviyo code?

 

Hey @meets 

Thank you for reaching out about Back in Stock Button for your Prestige Shopify Theme!

At this time Klaviyo only provides Back in Stock support for free themes within Shopify. Because this would be a custom solution for you, I would advise working with your developer to build out this functionality. Alternatively, you can also work with one of Klaviyo’s extensive network of agency partners for further assistance. As @david.to shared in a previous Community post, 

There are some custom solutions you can try, however your best bet would be to include your IT administrator or IT team to make sure the code is entered into your Prestige theme correctly to change the Back in Stock link to a button!

Thank you for being an active part of the Klaviyo Community! We appreciate you!

Reply


Terms & ConditionsCookie settings