Solved

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

Marissao6
Excursionist
21 0 4

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:

Scherm­afbeelding 2023-08-25 om 19.38.58.png

Accepted Solution (1)
PaulNewton
Shopify Partner
6338 578 1343

This is an 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 9 (9)

PaulNewton
Shopify Partner
6338 578 1343

 

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.

 

 

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Marissao6
Excursionist
21 0 4

@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
Shopify Partner
6338 578 1343

@Marissao6 wrote:

I've already used this code once:

"<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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Marissao6
Excursionist
21 0 4

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.

Scherm­afbeelding 2023-08-27 om 10.55.01.png

 

 

PaulNewton
Shopify Partner
6338 578 1343

This is an 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Marissao6
Excursionist
21 0 4

Yes it works!!!! Thank you so much!! 😁Scherm­afbeelding 2023-08-29 om 09.37.00.png

Benzaindi
Shopify Partner
10 0 0

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?

 

Performance and Athleisure Running Gear
Marissao6
Excursionist
21 0 4

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 -%}

Scherm­afbeelding 2023-11-02 om 13.28.46.png

ShopSakoll
Visitor
1 0 0

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