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!

Suman K.C

eCommerce Developer, writes about stuff related to eCommerce development. Currently based in Kathmandu, loves reading about startups & new technology, introvert nature, fond of traveling & playing futsal.

More Posts