Shopify Setup Guide (Beta Widget)
- bryan bykowicz
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
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. If you’re unsure where to find those, you can consult: Finding Your Campaign ID and Client Public Key
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.
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: '{{ checkout.line_items_subtotal_price | money_without_currency }}',
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