Front-end Integration - Extensions

Shopify Plugin

Overview

Installation

Front-end Integration

Forter JavaScript Snippet

The full JS snippet for both production and sandbox environments can be found here.

Make sure to use the correct script (sandbox vs production) depending on what environment you're integrating your script or pixel.

Shopify Pixel Integration (Checkout Extensibility)

All Shopify merchants should follow the below instructions for creating and enabling a Shopify Custom Pixel as well as pasting the Forter snippet into the native HTML for your respective Shopify checkout component. More information about Shopify's Custom Pixel framework can be found here.

Step 1: Paste the snippet into your Shopify Theme

  1. Navigate to this path: https://admin.shopify.com/store/<your-sandbox-shop.com>/themes and then select the theme.liquid option. Click the “Edit button to the right to access the HTML code.

  2. Copy & Paste the Forter JavaScript snippet into the editor. Make sure you're using the snippet with the siteId that corresponds to the Shopify environment you're adding the script to (i.e. "production snippet for your production store" or "sandbox snippet for your sandbox store")

  3. Press Save to save your changes.

Step 2: Log into your admin

Log into your Shopify admin, go to Settings > Customer events and click on the Add custom pixel option.

Step 3: Name your pixel

Name your snippet. If you enter the name of a custom pixel that already exists, then you'll be prompted to give your pixel a different name. Forter recommends "Forter snippet"

Step 4: paste your template and Forter site Id

1window.__api = api;
2const script = document.createElement('script');
3script.setAttribute('type','text/javascript');
4script.setAttribute('id','%SITE_ID%');// where siteId is the siteId from your Forter portal (select sandbox or prod siteId according to the environment you're adding your pixel)
5script.text = `%SNIPPET_CONTENT_FROM_PORTAL%`;// your Forter js snippet (select the sandbox or prod snippet depending on the env you're adding your pixel)
6document.head.appendChild(script);

For the '%SITE_ID%' field in the template, update it to the siteID value located in your Forter Portal Settings page. Be sure to be toggled to the appropriate portal environment so that you're using the correct siteId (production vs sandbox)

Step 5: Paste your Forter JavaScript Snippet

Once you've pasted the above template, go to the JavaScript integration page of your Forter portal. Have the script you're planning to add (sandbox or production) in view so that you're ready to paste it.

Make sure you're using code version 18 or above for your JS snippet