Gathering Email Addresses

Creating the Javascript code to connect

1. For gathering information from a signup form, you will follow the Klaviyo instructions here and the guide below.
   
2. In your Klaviyo account, go to Account > Settings > API Keys
   
3. You should see a public API key of 6 characters - copy this and replace the 'Public API Key' part of the following code with those 6 characters:
   

1. <script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=Public API Key"></script>

Adding the Javascript code to Shopit

1. Go to your Sales Channel > Design > Edit > Edit Template
   
2. Open base.html.twig
   
3. Scroll to the bottom of the code and paste the above javascript code before the closing </body> tag.
   
4. Save

Create the Embed Code

1. Visit Klaviyo and complete their initial signup process
   
2. Create a SignUp Form and customise as you wish
   
3. Choose the option to Embed
   
4. Klaviyo will provide a piece of short code like this: <div class="klaviyo-form-WtFXg2"></div>
   
5. You will need to post this code somewhere on your website, for example a footer, or on a page. (see below)
   

Posting your Sign up Form code in the footer

1. Go to your Sales Channel > Design > Edit > Edit Website
   
2. Scroll to the footer at the bottom and find a snippet you'd like to put the form in e.g.  'footer_block_1'
   
3. Click, and paste in the Klaviyo code.
   

If you want to change the width of the footer region, speak to a design (front end developer) about editing the base.html.twig file, or contact our Support team

Your front end website may take approx 10min to show the form depending on the cache. You will see the form live via the Design > Edit > Edit Website (editor)