During the next steps you will learn how to leverage Instant Shopping to enable smooooth and quick purchases from Social Media links.

Gain more from your social media posts by linking them to your product pages where Instant Shopping is available.

To achieve this you will need to have Instant Shopping available on the product page, as per the guidelines here .

You can then use the simple JavaScript snippet below and identify that the consumer is coming from Instagram or Facebook. When identified so, you can leverage open to automatically open up Instant Shopping flow and skip a click.

If you need customers to choose between product characteristics, like color, size, etc., you can make sure that you load Instant Shopping with a different set of options, as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
  <script>
    window.klarnaAsyncCallback = function () {
      const ua = navigator.userAgent || navigator.vendor || window.opera;
      const isInstagram = (ua.indexOf('Instagram') > -1)

      if (isInstagram) {
        Klarna.InstantShopping.load({
          "setup": {
            "instance_id": "button-123abc456",
            "key": "123e4567-e89b-12d3-a456-426655440000 >",
            "environment": "production",
            "region": "eu"
          },
          "purchase_country": "SE",
          "purchase_currency": "SEK",
          "locale": "sv-SE",
          "merchant_urls": {
            "terms": "https://www.example.com/terms.php",
          },
          "items": [
            {
              "type": "physical",
              "reference": "CLBS-52mm-pol",
              "name": "Classic Low Bridge Sunglasses 52mm Polarized",
              "unit_price": 60000,
              "total_amount": 50000,
              "total_tax_amount": 0,
              "tax_rate": 0,
              "total_discount_amount": 10000,
              "image_url": "https://example.com/sunglasses-52mm-polarized.jpg",
              "group_identifier": "demo.store.items",
              "product_attributes": [
                {
                  "identifier": "Frame size",
                  "identifier_label": "Frame size",
                  "value": "52mm",
                  "value_label": "52mm"
                },
                {
                  "identifier": "Polarization",
                  "identifier_label": "Polarization",
                  "value": "Polarized",
                  "value_label": "Polarized"
                }
              ]
            },
            {
              "type": "physical",
              "reference": "CLBS-58mm-pol",
              "name": "Classic Low Bridge Sunglasses 58mm Polarized",
              "unit_price": 60000,
              "total_amount": 50000,
              "total_tax_amount": 0,
              "tax_rate": 0,
              "total_discount_amount": 10000,
              "image_url": "https://example.com/sunglasses-58mm-polarized.jpg",
              "group_identifier": "demo.store.items",
              "product_attributes": [
                {
                  "identifier": "Frame size",
                  "identifier_label": "Frame size",
                  "value": "58mm",
                  "value_label": "58mm"
                },
                {
                  "identifier": "Polarization",
                  "identifier_label": "Polarization",
                  "value": "Polarized",
                  "value_label": "Polarized"
                }
              ]
            },
            {
              "type": "physical",
              "available": true,
              "reference": "CLBS-52mm-nonpol",
              "name": "Classic Low Bridge Sunglasses 52mm Non-Polarized",
              "unit_price": 40000,
              "total_amount": 30000,
              "total_tax_amount": 0,
              "tax_rate": 0,
              "total_discount_amount": 10000,
              "image_url": "https://example.com/sunglasses-52mm-nonpolarized.jpg",
              "group_identifier": "demo.store.items",
              "product_attributes": [
                {
                  "identifier": "Frame size",
                  "identifier_label": "Frame size",
                  "value": "52mm",
                  "value_label": "52mm"
                },
                {
                  "identifier": "Polarization",
                  "identifier_label": "Polarization",
                  "value": "Non-Polarized",
                  "value_label": "Non-polarized"
                }
              ]
            },
            {
              "type": "physical",
              "available": true,
              "reference": "CLBS-58mm-nonpol",
              "name": "Classic Low Bridge Sunglasses 58mm Polarized",
              "unit_price": 40000,
              "total_amount": 30000,
              "total_tax_amount": 0,
              "tax_rate": 0,
              "total_discount_amount": 10000,
              "image_url": "https://example.com/sunglasses-58mm-nonpolarized.jpg",
              "group_identifier": "demo.store.items",
              "product_attributes": [
                {
                  "identifier": "Frame size",
                  "identifier_label": "Frame size",
                  "value": "58mm",
                  "value_label": "58mm"
                },
                {
                  "identifier": "Polarization",
                  "identifier_label": "Polarization",
                  "value": "Non-Polarized",
                  "value_label": "Non-polarized"
                }
              ]
            }
          ],
          "shipping_options": [{
            "id": "express_priority",
            "name": "Express 1-2 days",
            "description": "Delivery by 4:30pm",
            "price": 5000,
            "tax_amount": 0,
            "tax_rate": 0,
            "shipping_method": "PickUpStore"
          }]
        }, function (callbackData) {
            Klarna.InstantShopping.open() // this will open the Instant Shopping flow
        })
      } else {
          Klarna.InstantShopping.load({
              "setup": {
              "instance_id": "button-123abc456",
              "key": "123e4567-e89b-12d3-a456-426655440000 >",
              "environment": "production",
              "region": "eu"
            },
            "purchase_country": "SE",
            "purchase_currency": "SEK",
            "locale": "sv-SE",
            "merchant_urls": {
              "terms": "https://www.example.com/terms.php", // mandatory
            },
            "order_lines": [
              {
                "type": "physical",
                "reference": "CLBS-52mm-pol",
                "name": "Classic Low Bridge Sunglasses 52mm Polarized",
                "unit_price": 60000,
                "total_amount": 50000,
                "total_tax_amount": 0,
                "tax_rate": 0,
                "total_discount_amount": 10000,
                "image_url": "https://example.com/sunglasses-52mm-polarized.jpg"
              }
            ],
            "shipping_options": [{
              "id": "express_priority",
              "name": "Express 1-2 days",
              "description": "Delivery by 4:30pm",
              "price": 5000,
              "tax_amount": 0,
              "tax_rate": 0,
              "shipping_method": "PickUpStore"
            }]
          })
      }


  </script>
}

How to load Instant Shopping with Product Selectors

When the products sold have attributes, like color and size that the customer needs to choose from, you can setup Instant Shopping to show these attribute selectors within its purchase flow.

It is a common scenario for direct links to the product pages from instagram and other social media posts, or when your products are being sold completely offsite, like in a blogger’s site.

To leverage this feature you will need to specify all the available product variations either when supplying the options to the Javascript load API, or when setting up a new button key for offsite use. Note that a product variation needs to include the information an order line item should have and additionally some information for its attributes.

The example below refers to selling a T-shirt and allowing customers to choose between available colors (black, white and green) and sizes (medium and large). The schema allows the flexibility to define that:

  • The T-Shirt in black and medium is not available
  • The T-shirt in large costs more
  • The T-shirt in green has a discount

The properties that control how Instant Shopping will present the selectors of the different product specifications are group_identifier and product_attributes:

  • group_identifier: is a string that MUST NOT include the character _, a unique identifier of grouping all product variations into one product_attributes
  • product_attributes: is an array of items, each one representing a specific product attribute. So for a product of specific color and size, this array should contain two items.
  • product_attributes[].identifier: is a string that MUST NOT include the character _, a unique identifier of this product attribute, e.g. “clr”
  • product_attributes[].identifier_label: is a string, a human redable, localized text of the product attribute, e.g. “Color” in English or “Färg” in Swedish
  • product_attributes[].value: is a string that MUST NOT include the character _, a unique identifier of this product attribute value, e.g. “w”
  • product_attributes[].value_label: is a string, a human redable, localized text of the product attribute value, e.g. “White” in English or “Vit” in Swedish
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
{
  // the rest of parameters goes here...
  "items": [
    {
      "type": "physical",
      "available": true,
      "reference": "19-402-USA-MW",
      "name": "T-Shirt",
      "unit_price": 11000,
      "total_amount": 11000,
      "total_tax_amount": 1000,
      "tax_rate": 1000,
      "total_discount_amount": 0,
      "image_url": "https://www.exampleobjects.com/tshirt-medium-white.png",
      "group_identifier": "19-402-USA",
      "product_attributes": [
        {
          "identifier": "size",
          "identifier_label": "Size",
          "value": "M",
          "value_label": "Medium"
        },
        {
          "identifier": "color",
          "identifier_label": "Color",
          "value": "W",
          "value_label": "White"
        }
      ]
    },
    {
      "type": "physical",
      "available": true,
      "reference": "19-402-USA-LW",
      "name": "T-Shirt",
      "unit_price": 11110,
      "total_amount": 11110,
      "total_tax_amount": 1010,
      "tax_rate": 1000,
      "total_discount_amount": 0,
      "image_url": "https://www.exampleobjects.com/tshirt-large-white.png",
      "group_identifier": "19-402-USA",
      "product_attributes": [
        {
          "identifier": "size",
          "identifier_label": "Size",
          "value": "L",
          "value_label": "Large"
        },
        {
          "identifier": "color",
          "identifier_label": "Color",
          "value": "W",
          "value_label": "White"
        }
      ]
    },
    {
      "type": "physical",
      "available": false,
      "reference": "19-402-USA-MB",
      "name": "T-Shirt",
      "unit_price": 11000,
      "total_amount": 11000,
      "total_tax_amount": 1000,
      "tax_rate": 1000,
      "total_discount_amount": 0,
      "image_url": "https://www.exampleobjects.com/tshirt-medium-black.png",
      "group_identifier": "19-402-USA",
      "product_attributes": [
        {
          "identifier": "size",
          "identifier_label": "Size",
          "value": "M",
          "value_label": "Medium"
        },
        {
          "identifier": "color",
          "identifier_label": "Color",
          "value": "B",
          "value_label": "Black"
        }
      ]
    },
    {
      "type": "physical",
      "available": true,
      "reference": "19-402-USA-LB",
      "name": "T-Shirt",
      "unit_price": 11110,
      "total_amount": 11110,
      "total_tax_amount": 1010,
      "tax_rate": 1000,
      "total_discount_amount": 0,
      "image_url": "https://www.exampleobjects.com/tshirt-large-black.png",
      "group_identifier": "19-402-USA",
      "product_attributes": [
        {
          "identifier": "size",
          "identifier_label": "Size",
          "value": "L",
          "value_label": "Large"
        },
        {
          "identifier": "color",
          "identifier_label": "Color",
          "value": "B",
          "value_label": "Black"
        }
      ]
    },
    {
      "type": "physical",
      "available": true,
      "reference": "19-402-USA-MG",
      "name": "T-Shirt",
      "unit_price": 10000,
      "tax_rate": 1000,
      "total_tax_amount": 1000,
      "total_discount_amount": 2000,
      "total_amount": "9000",
      "image_url": "https://www.exampleobjects.com/tshirt-medium-green.png",
      "group_identifier": "19-402-USA",
      "product_attributes": [
        {
          "identifier": "size",
          "identifier_label": "Size",
          "value": "M",
          "value_label": "Medium"
        },
        {
          "identifier": "color",
          "identifier_label": "Color",
          "value": "G",
          "value_label": "Green"
        }
      ]
    },
    {
      "type": "physical",
      "available": true,
      "reference": "19-402-USA-LG",
      "name": "T-Shirt",
      "unit_price": 10000,
      "tax_rate": 1000,
      "total_tax_amount": 1000,
      "total_discount_amount": 2000,
      "total_amount": "9000",
      "image_url": "https://www.exampleobjects.com/tshirt-large-green.png",
      "group_identifier": "19-402-USA",
      "product_attributes": [
        {
          "identifier": "size",
          "identifier_label": "Size",
          "value": "L",
          "value_label": "Large"
        },
        {
          "identifier": "color",
          "identifier_label": "Color",
          "value": "G",
          "value_label": "Green"
        }
      ]
    }
  ]
}