Help On Klaviyo's Back In Stock Button Design & Position - Symmetry Theme

[Marissao6]

Hi everyone,

I have set up Klaviyo's "notify me when available" button on my product pages with the bellow code. 

But the button is positioned in a weird location on the product page. Here is what I would like :

1. The color and text are good, I only want the button below the "SOLD OUT" button with the same width.

<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "STZXWH",
      platform: "shopify",
      exclude_on_tags: "limited edition"
      
    });
    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_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "NOTIFY ME WHEN AVAILABLE 🔔",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     additional_styles: "system+font",
     drop_background_color: "#6E695F",
     background_color: "#fff",
     text_color: "#6E695F",
     button_text_color: "#E1DED3",
     button_background_color: "#6C5936",
     close_button_color: "#ccc",
     error_background_color: "#E1DED3",
     error_text_color: "#E1DED3",
     font_family: "system+font",
     headers_font_family: "system+font",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

Theme: Symmetry 6.0.

Preview link: https://5hsznq6r39yxawnv-76589203783.shopifypreview.com 

Screenshot of current situation:

[PaulNewton]

Always confirm there is not a related app setting, and get guidance for the third-parties support or docs first.

https://help.klaviyo.com/hc/en-us/articles/360001895651#customizing-the-location-of-the--notify-me--...

Quickly solved with a custom-liquid block in the theme editor ~> product template ~> product form section.theme settings inserting a trigger element:

<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>

Or using the in alternate_anchor parameter in the trigger script in the above documentation.

Layout positioning of apps widgets is generally solved by changing the block positions in the theme editor > product template > product form section.

If an app does not have this behavior merchants should submit a feature request to that apps developers to support saner setup behavior.

If you've already manually edited theme code to insert the button instead test using a custom-liquid block in the aforementioned product section; excluding <scripts> as they often must be inserted at the end of the source code before the closing </body> tag.

Injected button behavior for products is generally done by appending itself to a products form element it finds with the CSS selector  [action="/cart/add"] , so not much to do about that if not overridable in some way.

General troubleshooting problems:

• Always check troubleshooting urls you are referencing as another person would see them by using an incognito window.
• Always provide direct urls to an example problem such as the full url to a product, don't make others dig and guess as to which urls may have the probelm.
• Preview urls cannot get past a currency selection modal it forces a redirect back to the password protected mainsite. Forcing any contributor to do even more work bypassing such things. 
• No storefront password provided to use on the redirect destination mainsite so if a contributor cannot bypass the popups in the preview they cannot even help you.

[Marissao6]

@PaulNewton thank you for your reply! I've already used this code once:

"<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>"

but it doesn't work. How can I use the alternate_anchor parameter in the trigger script?

There was one solution from another discussion, but I don't know where I can put this code:

https://community.shopify.com/c/shopify-design/help-on-klaviyo-s-back-in-stock-button-design-amp-pos...

[PaulNewton]

---

@Marissao6 wrote:

I've already used this code once:

"<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>"

---

But WHERE? your omitting critical detail.

Reread my post it addresses using custom-liquid blocks instead of editing theme code.

If using the alternate_anchor your will need to inspect the theme and find and ID selector to use. Either find a browser extenion that helps find CSS selectors or use devtools ctrl+shift+c to inspect elements.

Good Hunting.

[Marissao6]

If i use the code

<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>

 in the editing theme code then it is still visible for products that are still available (see example). So this option is not working for me.

[PaulNewton · Accepted solution]

For fully unavailable products in a custom-liquid block.

{%- unless product.available -%}
<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>
{%- endunless -%}

Note this is for the product not induvial variants dynamically selected by customers, that requires an advanced customization afaik.

If you need this customization then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

[Marissao6]

Yes it works!!!! Thank you so much!! 😁

[Benzaindi]

I use the same theme and have the same issue, where do I need to past this code to have the "notify me" box under the sold out button?

[Marissao6]

You have to make a custom liquid on each productpage where you want to have the 'get notify me' button. Just add "custom liquid" underneath the buy button and put this code on the right side. It is my design so you can change the colours if you want 

{%- unless product.available -%}
<a class="klaviyo-bis-trigger shopify-payment-button__button" 
                    href="#" 
                    style="color: #E1DED3;
letter-spacing: .08em;
margin-bottom: 25px;
                            background-color: #6C5936;

height: 46px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: unset;
                            text-decoration: unset;
                            margin-top: 10px;
                            max-width: 40rem"
                  >NOTIFY ME WHEN AVAILABLE 🔔
                </a>
{%- endunless -%}

[Nietus]

Any idea how this works for product variants? I have tried to replace {%- unless product.available -%} with {%- unless product.variants.available -%} but it doesn't display as a button and on mobile it doesn't work. On desktop it does. 

Any suggestions?  

[ShopSakoll]

Hi Paul, I would like help with this: "Note this is for the product not induvial variants dynamically selected by customers, that requires an advanced customization afaik."   Thank you