This is a very short guidelines on how to setup price request form on Shopify store’s products using Klaviyo.
Step 1: Add conditional logic on product detail page to have the the price request form displayed based on product tag or collection.
This is the logic added to hide/show the price request form in product template. The logic checks if the customer is not loggedin and product contains tag “request_price” it adds the snippet “email_price.liquid”
{% assign show_email_price = "hide" %}
{% if product.tags contains "request_price" %}
{% unless customer %}
{% assign show_email_price = "show" %}
{% endunless %}
{% endif %}
{% case show_email_price %}
{% when "show" %}
{% render 'email_price' %}
{% else %}.....
Step 2: From frontend & reqyest ti create metrics in Klaviyo by ajax requst making use of Klaviyo public key.
The “email_price.liquid” contains below
Form HTML
<div class="klaviyo-custom-form">
<div id="klaviyo_metric" class="pro-user-data">
<input type="email" placeholder="{{ settings.email_input_placeholder }}" class="success_hide sucessinput" id="input_email_field" required="" />
<input type="button" class="pro_user_button send__price success_hide" value="{{ settings.email_tab_button }}" style="height:48px;" />
<div class="success_message hide" style="">{{ settings.email_success_message }}</div>
</div>
</div>
Form submit to create the metric in Klaviyo
<script type="text/javascript">
$(document).ready(function(){
$('.send__price').on('click',function(e){
e.preventDefault();
var klaviyoData = {
"token": "{{YOUR-KLAVIYO-PUBLIC-KEY}}",
"event": "Email for Price",
"customer_properties": {
"$email": $(this).parent().find('.sucessinput').val()
},
"properties": {
"ProductTitle": `{{ product.title }}`,
"ProductImageURL": "{{ product.featured_image | img_url: 'original' }}",
"ProductPrice": "{{ product.price | money | remove:'<span class=money>' | remove: '</span>' }}",
"Productcartlink": "{{ shop.url }}/cart/add?id={{ product.selected_or_first_available_variant.id }}&quantity=1",
"Email": $('.sucessinput').val()
}
}
var encoded = btoa(JSON.stringify(klaviyoData));
$.get("https://a.klaviyo.com/api/track?data=" + encoded, function(data){
$('.pro-user-data').find('.success_message').removeClass('hide');
$('.pro-user-data').find('.success_hide').addClass('hide');
$('#input_email_field').hide();
});
});
});
</script>
And once successful request it will create metric in Klaviyo and you can see like below
Step 3: Create Flow based on the metric as flow trigger
Smart Sending => Off
Step 4: Configurations and dynamic values for email template setup.
Step 5: Result – Price in email with product information
If your store isn’t using Klaviyo then in similar request we can make use of middleware to request with the product price via ajax call and making use of mailgun and phpmailer we can send email or similar services.
Cheers!
Graduated from 
Leave a Reply