Skip to main content
  • EN

Hi everyone,

 

I am trying to create a custom restocking form for all the product pages of our Shopify store with the idea that whoever signs up, their email address gets added to a list on Klaviyo and a property on their profiles gets updated with the product title.

 

I referred to some useful articles like this one (https://elghorfimed.medium.com/easy-steps-to-add-a-custom-legacy-embedded-email-signup-form-in-shopify-3d999390c4c5) and created the following code (omitting the styles):

-------------------------------------------------------------------------------------------

<form novalidate="novalidate" method="GET" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" action="//manage.kmail-lists.com/subscriptions/subscribe" class="klaviyo_styling klaviyo_gdpr_embed_VOBQyb" id="email_signup" target="_blank"><input value="VOBQyb" name="g" type="hidden">
<div class="klaviyo_field_group"><label for="k_id_email">Restock Sign Up</label> <input placeholder="Your email" id="k_id_email" name="email" value="" type="email" class=""></div>
<div class="klaviyo_messages">
<div style="display: none;" class="success_message"></div>
<div style="display: none;" class="error_message"></div>
</div>
<div class="klaviyo_form_actions"><button class="klaviyo_submit_button" type="submit">Subscribe</button></div>
</form>

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> <script type="text/javascript">

var productName = '{{product.title}}';
  KlaviyoSubscribe.attachToForms('#email_signup', {
    hide_form_on_success: true,
    success_message: "Thank you for your interest in this product! We will surely keep you informed if and when it is restocked.",
    extra_properties: {
      $test_property: productName,
      $source: '$embed',
      $method_type: "Klaviyo Form",
      $method_id: 'embed',
      $consent_version: 'Embed default text'
    }
  });
</script>

-------------------------------------------------------------------------------------------

 

The form works to the extent that it adds the email to this particular list id on our Klaviyo and also creates and adds the product title to the property $test_property. However, the issue is that if I fill up the form with the same email address on a different product page, the property $test_property gets overwritten.

 

How can I change this form so that the property $test_property gets created if it doesn’t exist but gets appended if it exists already so that we can track all the restocking requests from a particular customer?

 

Any help will be greatly appreciated.

 

Thank you.

Hi! Take a look at the Create Client Subscription call you can make from a browser:

https://developers.klaviyo.com/en/reference/create_client_subscription

You can have JS make a POST to this endpoint, where you can include the email and list ID in the body.

Note especially the meta block where you can choose to append profile properties, and not by default overwrite them:

 

Hi @saulblum, thank you very much for your reply. While I understand the logic, I am not sure how to modify my code to append to the property instead of overwriting it.

Can you possibly modify my code above and paste it here? I can then test it and confirm if it does the job. Thank you again.

You’d want to have your form make an AJAX POST to that API endpoint, and include this in the request body:

"meta": {
  "patch_properties": {
    "append": {
      "$test_property": productName
    }
  }
}

Reply


Terms & ConditionsCookie settings