This set of instructions is a little bit more involved than the basic Shopify installation instructions, but it will let you edit your widget settings directly from your Shopify admin, making changes easier in the long run. 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 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
<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', {
{% if customer %}
identifier: “{{ customer.email }}”,
{%- else -%}
identifier: Date.now(),
{% endif %}
// the following items are optional
getOrCreateInfluencer: false,
trackByInvite: false,
});
{% endfor %}
};
</script>
<script async defer crossorigin="anonymous" src="https://js.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 %}Once entered, click Save to finalize the change
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 file and paste the following line inside the <head> element, preferably after any <meta> tags and Save
{% section 'ics' %}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, you can find these from the ICS admin by selecting a campaign and visiting the Integrations tab.
These two values is how ICS knows which campaign to load and grab the settings from.
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.
To get your post-purchase script, select a campaign in the ICS admin and visit the Integrations tab, the script under the the header Include on Conversion Pages is what you're after:
Copy this script, taking the time to configure it from the Script Customizer panel as needed.
Now, back 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 your script into the Order status page text area and click Save.
Now the widget will load with the specified campaign on the order confirmation page after a customer makes a purchase!
