Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

Step 1 - Adding ics.liquid file to Shopify theme

To get started setting up an ICS campaign in Shopify, you’ll first need to add some code to your Shopify’s store theme.

1a - Finding your store’s Theme files

Login to your Shopify store, and click the Storefront under the SALES CHANNEL menu section. It’ll expand to show more options, select the subsection called Themes from among these.

On the Themes page, you’ll see a block that shows your installed theme. From here click Actions and then Edit Code from the dropdown

1b - Creating the ics.liquid file

On the Edit Theme page, the left side lists of a sizable number of assets used by your theme - we’ll need to add a new file here to make ICS available on your store.

To do this, scroll down to the section in the left pane called Sections and click the Add new section link.

You’ll be prompted to name and create a new section, let’s call this ics.liquid

Once done, click Create section

1c - Adding the ICS code to ics.liquid

Find the ics.liquid file that you just created on the Sections list, and open it

The file will be empty at first, so we’ll need to paste in the snippet provided below

Once entered, click Save to finalize those changes

<script>
  window.onIcsLoaded = function() {
    {% for block in section.blocks %}
      ICS.init({
        version: '{{ section.settings.ics_version }}',
        publicKey: '{{ section.settings.ics_public_key }}',
        campaignId: {{ block.settings.ics_campaign_id }},
        data: {
        {% if customer %} 
            accountId: '{{customer.id}}',
            email: '{{customer.email}}',
            name: '{{customer.first_name}} {{customer.last_name}}',
            phoneNumber: '{{customer.phone}}',
        {% endif %}
        },
        variables: {
           productName: '{{ block.settings.ics_product_name }}',
        },
        theme: {
               colors: {
                    accent: '{{ section.settings.ics_accent_color}}',
                    brand: '{{ section.settings.ics_brand_color}}',
                    ambient: '{{ section.settings.ics_ambient_color}}',
                    ambientLight: '{{ section.settings.ics_ambient_light_color }}'
               },
               borders: {
                    radius: {
                        default: '{{ section.settings.ics_border_radius }}'
                    }
               }
        },
        behavior: {
            type: 'referral',
            flavor: '{{ section.settings.ics_flavor }}',
            openByDefault: {{ section.settings.ics_open_by_default }},
            delay: {{ section.settings.ics_delay }},
            trigger: {
               hide: {{ section.settings.ics_hide_trigger}},
            }
        }
      });
      window.ics && ics('participation', {
        identifier: 'test_1_1_'+ Date.now(),
        // the following items are optional
        getOrCreateInfluencer: false,
        trackByInvite: false,
      });
    {% endfor %}
  };
</script>
<script async defer crossorigin="anonymous" src="https://js-dev.icecreamsocial.io/sdk.js" />

{% schema %}
  {
  "name": "My ICS Campaign",
  "class": "ICS_integration",
  "settings": [
    {
      "id": "title",
      "type": "text",
      "label": "Label",
      "info": {
        "en": "Label this section so you can identify it easier."
      },
      "default": "My ICS Campaign"
    },
    {
      "id": "ics_public_key",
      "type": "text",
      "label": "ICS Public Key"
    },
    {
      "type": "select",
      "id": "ics_version",
      "options": [
        {
          "value": "v1",
          "label": "V1"
        },
        {
          "value": "latest",
          "label": "Latest"
        }
      ],
      "default": "latest",
      "label": {
        "en": "ICS Version"
      }
    },
    {
      "type": "select",
      "id": "ics_flavor",
      "options": [
        {
          "value": "callout",
          "label": "Callout"
        },
        {
          "value": "modal",
          "label": "Modal"
        }
      ],
      "default": "callout",
      "label": {
        "en": "Flavor"
      }
    },
    {
      "type": "checkbox",
      "id": "ics_open_by_default",
      "default": false,
      "label": {
        "en": "Open by default (Latest version only)"
      }
    },
    {
      "type": "number",
      "id": "ics_delay",
      "default": 0,
      "label": {
        "en": "Delay (in ms) before opening by default"
      }
    },
    {
      "type": "checkbox",
      "id": "ics_hide_trigger",
      "default": false,
      "label": {
        "en": "Hide the ICS Button (Latest version only)"
      }
    },
    {
      "type": "color",
      "id": "ics_accent_color",
      "default": "#5956D7",
      "label": {
        "en": "Accent color"
      }
    },
    {
      "type": "color",
      "id": "ics_brand_color",
      "default": "#2C98FB",
      "label": {
        "en": "Brand color"
      }
    },
    {
      "type": "color",
      "id": "ics_ambient_color",
      "default": "#DDDDDD",
      "label": {
        "en": "Ambient color (backgrounds, subdued colors, etc)"
      }
    },
    {
      "type": "color",
      "id": "ics_ambient_light_color",
      "default": "#f8f8f9",
      "label": {
        "en": "Light ambient color"
      }
    },
    {
      "type": "text",
      "id": "ics_border_radius",
      "default": "16px",
      "label": {
        "en": "Border radii"
      }
    }
  ],
  "blocks": [
    {
      "type": "ics_campaign",
      "name": {
        "en": "Campaign Settings"
      },
      "limit": 1,
      "settings": [
        {
          "id": "title",
          "type": "text",
          "label": "Label",
          "info": {
            "en": "Label this section so you can identify it easier."
          },
          "default": "Campaign Settings"
        },
        {
          "type": "text",
          "id": "ics_campaign_id",
          "label": {
            "en": "Campaign ID"
          },
          "info": {
            "en": "The campaign you which to display on your site"
          }
        },
{
          "type": "text",
          "id": "ics_product_name",
          "label": {
            "en": "Product name"
          },
          "info": {
            "en": "The product you want to advertise.  Replaces {{ product.name }}"
          }
        },
        {
          "type": "textarea",
          "id": "ics_page_handles",
          "default": "*",
          "label": {
            "en": "Show on pages"
          },
          "info": {
            "en": "This campaign will only be shown on the provided pages ('*' means all)"
          }
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Integration Settings"
      },
      "category": {
        "en": "Ice Cream Social"
      }
    }
  ]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Script updated on 7/14/2022

1d - Adding the ICS section to your home page

Now that we’ve created the Section, we just need to make one more theme file change to include it on your home page

Scroll to the top of your theme files and find the section called Layout, open up the theme.liquid

Paste in this line:

{% section 'ics' %}

inside the <head> element, preferably after any <meta> tags and Save

Step 2 - Configuring your ICS campaign on your store

Now that you’ve completed Step 1 and you’ve got all the code needed for ICS to work on your store, a final bit of configuration is needed to show the widget and load your specific ICS campaign

2a - Finding your campaign’s ID & your public key

To get started, you’re first going to need to have your campaign’s ID and your public key on hand

Login to the ICS admin and navigate to Campaigns.

Select the campaign you’re interested in and at the top of the page near its name, you’ll find the campaign’s unique id. Note this down.

Alternatively, you can see the campaign’s id in the URL of your browser’s address bar.

To find your public key, navigate to the Integrations section on the campaign page and open up the Post-Purchase Script modal.

Scroll until you get to line 25. The 32 character string is your public key. Note this down.

2b - Adding your public key to ICS on Shopify

Return to Shopify and click Customize on your active theme.

You’ll see a new section on the left sidebar called My ICS Campaign

Enter your public key from earlier into the appropriate field and click Save in the top right corner.

2c - Adding your campaign ID key to the widget on Shopify

In this step, we’ll add your campaign ID from earlier to your Shopify ICS settings, this specifies which campaign the widget will load

From the same sidebar, click Campaign Settings

Enter your campaign ID into this field and click Save

2d - Verify the widget and campaign settings are being loaded

Now that the widget is setup to load your campaign, you can interact with your site from Shopify’s theme editor to view the campaign campaign

Take a look to confirm everything is loading correctly

Step 3 - (Optional) Adding a post-purchase widget to your store

Adding the post-purchase widget to a Shopify store gives an ICS campaign the ability to capture customer order information and track transactional conversions.

On your Shopify site, go to Settings

Navigate to the Checkout section

Scroll to the section near the bottom of the page called Additional scripts

Paste the following script into the Order status page text area:

<script>
//
    window.onIcsLoaded = function() {
      ICS.init({
        version: 'latest',
        publicKey: 'replace this with your public key',
        campaignId: 'replace this with your campaign id',
        data: {
        	accountId: '{{checkout.customer.id}}',
        	email: '{{checkout.email}}',
            name: '{{checkout.customer.first_name}} {{checkout.customer.last_name}}',
        	phoneNumber: '{{checkout.customer.phone}}',
            orderId: '{{checkout.order_number}}',
            revenue: parseFloat('{{order.subtotal_price | money_without_currency}}'.replaceAll(',','')),
            transactionId: '{{transactions[0].receipt.transaction_id}}'
      	},
        variables: {},
        theme: {},
        behavior: {
            type: 'referral',
            flavor: 'modal',
            openByDefault: true,
      	}
      });
  };

</script>
<script async defer crossorigin="anonymous" src="https://js.icecreamsocial.io/sdk.js" />

Change the publicKeyon line 6 and campaignID on line 7 to your own (See step 2a for instructions on how to find these). Click Save.

Now the widget will load with the specified campaign on the order confirmation page after a customer makes a purchase!

Step 4 - Customizing the widget

Coming soon!

This section will include details about what customization options are available and how to apply them, including both appearance, behavior and data customization 

         _.-.
       ,'/ //\
      /// // /)
     /// // //|
    /// // ///
   /// // ///
  (`: // ///
   `;`: ///
   / /:`:/
  / /  `'
 / /
(_/

  • No labels