| Table of Contents | ||||
|---|---|---|---|---|
|
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
| Code Block | ||
|---|---|---|
| ||
<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: {},
behaviorcolors: {
type: 'referral', flavoraccent: '{{ section.settings.ics_accent_flavor color}}',
openByDefault brand: '{{ section.settings.ics_open_by_default brand_color}}',
} }); ambient: window.ics && ics('participation'{{ section.settings.ics_ambient_color}}',
{ identifier: Date.now(), // the following items are optionalambientLight: '{{ section.settings.ics_ambient_light_color }}'
getOrCreateInfluencer: true, },
trackByInvite: true, }); borders: {%
endfor %} }; </script> <script async defer crossorigin="anonymous" src="https://js.icecreamsocial.io/sdk.js" /> {% schema %} radius: {
"name": "My ICS Campaign", "class": "ICS_integration", "settings": [ { default: '{{ "id": "title",section.settings.ics_border_radius }}'
"type": "text", "label": "Label", }
"info": { "en": "Label this section so you can identify it easier."}
},
"default": "My ICSbehavior: Campaign"{
}, { "id"type: "ics_public_key"'referral',
"type": "text", flavor: "label": "ICS Public Key"
},
{'{{ section.settings.ics_flavor }}',
"type": "select", openByDefault: "id": "ics_version"{{ section.settings.ics_open_by_default }},
"options": [ delay: {{ section.settings.ics_delay }},
"value": "v1", trigger: {
"label": "V1" hide: {{ section.settings.ics_hide_trigger}},
{ }
"value": "latest", }
});
"label": "Latest" window.ics && ics('participation', {
} ]identifier: 'test_1_1_'+ Date.now(),
"default": "latest",
// the following items are optional
"label": { getOrCreateInfluencer: false,
"en": "ICS Version" trackByInvite: false,
} },);
{% endfor %}
};
</script>
"type": "select",
<script async defer crossorigin="anonymous" src="https://js-dev.icecreamsocial.io/sdk.js" />
{% schema %}
{
"idname": "ics_flavorMy ICS Campaign",
"optionsclass": ["ICS_integration",
"settings": [
{
"valueid": "callouttitle",
"labeltype": "Callouttext",
}"label": "Label",
"info": {
"valueen": "modal",Label this section so you can identify it easier."
"label": "Modal" },
} "default": "My ICS Campaign"
]},
{
"defaultid": "calloutics_public_key",
"labeltype": {"text",
"enlabel": "Flavor"ICS }Public Key"
},
{
"type": "checkboxselect",
"id": "ics_open_by_defaultversion",
"defaultoptions": false,[
"label": {
"envalue": "Openv1",
by default (Latest version only)" }"label": "V1"
} ]},
"blocks": [ {
"typevalue": "ics_campaignlatest",
"namelabel": {"Latest"
"en": "Campaign Settings"}
],
}, "limitdefault": 1"latest",
"settingslabel": {
[ "en": "ICS {Version"
}
"id": "title", },
{
"type": "textselect",
"labelid": "Labelics_flavor",
"options": [
"info": { {
"envalue": "callout"Label,
this section so you can identify it easier."
}, "default"label": "Campaign SettingsCallout"
},
{
"typevalue": "textmodal",
"idlabel": "ics_campaign_idModal",
"label": {}
],
"endefault": "Campaign IDcallout",
},
"info"label": {
"en": "The campaign you which to display on your site"
Flavor"
}
},
{ {
"type": "textcheckbox",
"id": "ics_productopen_by_namedefault",
"default": false,
"label": {
"en": "ProductOpen name"by default (Latest version only)"
},
},
{
"info": { "type": "number",
"enid": "The product you want to advertise. Replaces {{ product.name }}"
ics_delay",
"default": 0,
"label": {
"en": "Delay (in ms) before opening by default"
} }
},
{ {
"type": "textareacheckbox",
"id": "ics_pagehide_handlestrigger",
"default": "*",
false,
"label": {
""en": "Show on pagesHide the ICS Button (Latest version only)"
}
},
{
"infotype": {"color",
"id": "ics_accent_color",
"endefault": "#5956D7"This,
campaign will only be shown on the provided pages ('*' means all)"
"label": {
"en": "Accent color"
}
},
} {
] "type": "color",
} ], "id": "presets": [ics_brand_color",
{"default": "#2C98FB",
"namelabel": {
"en": "IntegrationBrand Settingscolor"
},
},
"category": {
"entype": "Ice Cream Socialcolor",
}
"id": "ics_ambient_color",
} ]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}"default": "#DDDDDD",
"label": {
{% javascript %}
{% endjavascript %}
"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:
| Code Block |
|---|
{% 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.
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 sectionnear the bottom of the page called Additional scripts
Paste the following script into the Order status page text area:
| Code Block | ||
|---|---|---|
| ||
<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.order.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
| Note |
|---|
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 |
| Code Block | ||
|---|---|---|
| ||
_.-.
,'/ //\
/// // /)
/// // //|
/// // ///
/// // ///
(`: // ///
`;`: ///
/ /:`:/
/ / `'
/ /
(_/ |