Back In Stock Targeting
Headless Integration
Please note that the Postscript Back In Stock feature is designed to operate exclusively with Shopify's Online Store. It is not compatible with headless Shopify integrations at this time.
Link Injection Targeting
The Postscript Back In Stock feature places a "Back In Stock" link by searching for an element on the product page with the ID ps__bis_target_container
. Once found, the link is injected within this designated element. To enhance styling capabilities and indicate successful link placement, the class ps-bis-custom-container-added
is added to the container. This allows developers to style the container differently based on whether the link has been added. Importantly, the link will not be injected if the product is in stock or if the customer has previously signed up to be notified when it is back in stock.
In cases where the ps__bis_target_container
does not exist on the page, the Postscript SDK will adapt by automatically adding the button to the parent element of the disabled "Add to Cart" button. This ensures that the Back In Stock functionality is integrated, regardless of the specific page layout.
Integration with Klaviyo Back In Stock
Many retailers who leverage Postscript for SMS marketing also employ Klaviyo for email marketing. For a cohesive user experience, it may be desirable to position the Postscript "Back In Stock" link adjacent to Klaviyo's corresponding link. To achieve this seamless integration, utilize both Klaviyo's configuration settings and Postscript's targeting functionality as described below.
Specifying a Klaviyo Target
Klaviyo offers the capability to designate a specific target for their "Back In Stock" link via their JavaScript configuration. When enabling Klaviyo's backinstock
feature, include the trigger.alternate_anchor
setting in the klaviyo.enable
function call. Set this value to kl-bis-container.
This adjustment is generally made within the layout/theme.liquid
template file of your site. Below is an example illustrating how to integrate this setting:
klaviyo.enable("backinstock",{
trigger: {
product_page_text: "Notify by email",
product_page_class: "btn",
product_page_text_align: "center",
product_page_margin: "0px",
replace_anchor: false,
alternate_anchor: 'kl-bis-container'
},
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: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
drop_background_color: "#000",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#439fdb",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}
});
Adding Targets to Product Page
Next, you should add elements with the IDs ps__bis_target_container
for Postscript and kl-bis-container
for Klaviyo at the desired locations on your product page. There is no need to include conditional checks for stock availability in your JavaScript, as each service will automatically determine the necessity of rendering their respective links based on product stock status.
Below is an example of the Liquid markup to insert into your product page template (or section) and CSS to your theme styles to ensure that the links are displayed adjacently and styled as buttons. Depending on your existing site design, you may need to modify the CSS to better match your current button styling.
<div id="ps-kl-bis-container">
<div id="ps__bis_target_container"></div>
<div id="kl-bis-container"></div>
</div>
#ps-kl-bis-container {
--button-border-radius: 10px;
--button-bg: #5724e9;
--button-hover: #3911ab;
--button-spacing: 2px;
--button-text: #ffffff;
--button-font-size: 15px;
}
#ps-kl-bis-container {
display: flex;
width: 100%;
}
#kl-bis-container, #ps__bis_target_container {
flex: 1;
text-align: center;
}
.klaviyo-bis-trigger {
display: block;
}
.klaviyo-bis-trigger,
#ps-kl-bis-container #ps-bis-widget__button.ps-bis-button {
color: var(--button-text);
font-size: var(--button-font-size);
font-weight: normal;
text-decoration: none;
padding: 10px 0px;
line-height: 27px;
width: 100%;
background-color: var(--button-bg);
border-radius: var(--button-border-radius);
}
#ps__bis_target_container.ps-bis-custom-container-added {
margin-right: var(--button-spacing);
}
.klaviyo-bis-trigger:hover,
#ps-kl-bis-container #ps-bis-widget__button.ps-bis-button:hover {
background-color: var(--button-hover);
}
#ps-kl-bis-container .ps-bis-fade-in {
animation: none;
}
Additional Configuration Information
Some styles and configuration for the links may need to be adjust in order to get the desired functionality. Within Postscript this configuration is done within the Postscript admin on the Back In Stock Popup Page. For Klaviyo, this configuration is done in the Klaviyo klaviyo.enable
function call which is typically in your layout/theme.liquid
template file. For example, you may want to adjust the text of the links to better fit within the allowed area of your product page.
Updated 4 months ago