# Instagram

{% hint style="danger" %}
The Instagram section being removed due to the discontinuation of [Meta’s Instagram Basic Display API](https://developers.facebook.com/blog/post/2024/09/04/update-on-instagram-basic-display-api/)
{% endhint %}

Instagram is one of the most influential social platforms that can attract potential customers. Using it in your store can be a tactic move.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F3ArLr2jW56wzcs06WjHw%2Fimage.png?alt=media&#x26;token=6e81ad78-1e54-4c09-9ec2-bfb1fa980775" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Instagram**
3. **Save**
   {% endhint %}

{% hint style="warning" %}
To display your Instagram posts, make sure you get your IG Token and add it to **Theme settings** > **Integration.**

<img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FUqSIH4acx1GF74HAayjY%2Fimage.png?alt=media&#x26;token=9478f29a-be32-46b8-8dfb-ef8ed176d23f" alt="" data-size="original">
{% endhint %}

## Generate your Instagram token

To get an Instagram Access Token, you will need:

* A Facebook account
* An Instagram account

Follow our video to get an Instagram Access Token for your Shopify store:

{% embed url="<https://youtu.be/nHnsqFAjjJM>" %}
You can watch this video for reference
{% endembed %}

{% hint style="success" %}
**Steps:**

1. Register application on [Facebook for Developers](https://developers.facebook.com/).
2. Register new app.
3. Configure Instagram Basic Display.
4. Get Access Token.
   {% endhint %}

{% hint style="info" %}
By default, access tokens are valid for 60 days. Therefore, kindly **refresh your Instagram token regularly**.

The section works with tokens created using **Personal** **accounts**.
{% endhint %}

## Section settings

### **Section header**&#x20;

* **Show header divider** or not;

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F7VoG7kq1qYdp8F86HPwP%2Fimage.png?alt=media&#x26;token=9bef7702-e2d9-45cc-904a-4338121bb2b4" alt=""><figcaption><p>An Instagram section with header divider enabled</p></figcaption></figure>

* Add a **Heading** to your section and select its size;
* Add a **Subheading** and **Description** to the section if needed;
* Select the **Description style** as **Body text**/**Sub text**;
* Select the **Text alignment** for the whole content as **Left**/**Center**.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FI3WAqV2UqG0pPoKzRwiK%2Fimage.png?alt=media&#x26;token=a9c9dbdd-16f1-49a1-8896-6245caa7503e" alt=""><figcaption></figcaption></figure>

### Posts settings

Select your preferred layout to show your Instagram posts as Grid/Metro.&#x20;

{% tabs %}
{% tab title="Grid layout" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FU7q5YBBYOKFX6nhpaGhE%2Fimage.png?alt=media&#x26;token=f1dc2bf8-139a-446d-af69-70bcf8255232" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Metro layout" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fe3480oI60Qv5kAceIJdy%2Fimage.png?alt=media&#x26;token=fd9d2d80-f18b-4bab-b9ee-8a85174040ad" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Use the slider to adjust the number of shown images, images per row, and the gap between images on desktop and mobile separately.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FCNhyfwvwH5iNxnuUDcsq%2Fimage.png?alt=media&#x26;token=835f19f1-7e71-4418-b13a-33f86369775f" alt=""><figcaption></figcaption></figure>

### **Follow button settings**

Build a connection between your site and your Instagram page. Add your Instagram link and add a call-to-action button label.&#x20;

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FPMsQ7JmsrEPO8F3csL7S%2Fimage.png?alt=media&#x26;token=4f4ae5fe-9bd5-440a-ae9c-c5426c9caf50" alt=""><figcaption></figcaption></figure>

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FeGsWFzUppDjPhsNXnRHw%2Fimage.png?alt=media&#x26;token=08b09476-0386-406d-9ff9-c480911ea30a" alt=""><figcaption></figcaption></figure>
