> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/magecomp-mobile-app-builder/integrations.md). # Integrations This feature allows you to integrate third-party apps into your mobile app store. For that, you must install the Shopify app that you want to integrate into your mobile app. Once you have installed it, go to the **Mobile App Builder** app backend and then to the **Integration** section.
To activate the integrated app into your mobile app, **Enable** the button and configure the respective apps. After entering all these details, you can **Save** your configuration and proceed further. ### Instagram Reels Integration The Instagram Reels Integration allows you to display your latest Instagram Reels directly within your mobile app. Once configured, newly published reels will automatically appear in the app without requiring manual updates.
{% hint style="info" %} **Note:**
* An **Instagram Business** or **Creator** account is required. * Your Instagram account must be linked to a **Facebook Page**. * You'll need an **Instagram Access Token** to fetch your reels. {% endhint %} ### Step 1: Convert Your Instagram Account 1. Open the Instagram app. 2. Go to **Profile → Settings & Privacy → Account Type**. 3. Switch to either: * **Business Account**, or * **Creator Account** 4. Connect the Instagram account to your Facebook Page. ### Step 2: Create a Meta Developer App 1. Visit [**https://developers.facebook.com/**](https://developers.facebook.com/) 2. Sign in with your Facebook account. 3. Click **My Apps → Create App**. 4. Select **Business** as the app type. 5. Enter: * App Name * Contact Email 6. Click **Create App**. ### Step 3: Add Instagram Graph API 1. Open your Meta App Dashboard. 2. Navigate to **Add Products**. 3. Add **Instagram Graph API**. 4. Complete the basic configuration. ### Step 4: Generate an Instagram Access Token 1. Open **Graph API Explorer** from the Meta Developer dashboard. 2. Select the Meta App you created. 3. Click **Generate Access Token**. 4. Log in with the Facebook account connected to your Instagram Business account. 5. Grant all requested permissions. The required permissions generally include: * instagram\_basic * pages\_show\_list * pages\_read\_engagement If you need additional Instagram features, Meta may request additional permissions. After authorization, Meta will generate an **Access Token**. {% hint style="info" %} **Tip:** For production use, exchange the short-lived token for a **Long-Lived Access Token** (valid for approximately 60 days). {% endhint %} ### Step 5: Open Instagram Configuration Inside the Mobile App Builder: **Configuration → Instagram Reels** You'll see the following fields: #### 1. Instagram Access Token Paste the generated Instagram Access Token. Example: EAAGxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx #### 2. Instagram Link Enter your Instagram profile URL. Example: #### 3. Username Enter your Instagram username **without the @ symbol**. Example: magecomp #### 4. Profile Picture Upload the profile image that should appear in the Instagram Reels section. Recommended: * JPG or PNG * Square image * Minimum 300 × 300 px #### 5. Show Caption Enable this option if you'd like to display the Instagram reel caption below each reel. Disable it if you prefer a cleaner layout. ### Step 6: Save Configuration After filling in all the required details: 1. Click **Save**. 2. Refresh the mobile app. 3. Your latest Instagram Reels will now appear in the designated Instagram Reels section.
### Notes * Only **public Instagram Business or Creator accounts** are supported. * Your Instagram account must remain connected to a Facebook Page. * If the Access Token expires, you'll need to generate a new one and update it in the Instagram Configuration settings. * Newly published Instagram Reels will automatically sync with the app after they become available through the Instagram Graph API. * If reels do not appear, verify that: * The Access Token is valid. * The Instagram profile is public. * The Instagram account is linked to the correct Facebook Page. * The required Meta permissions have been granted. * The Instagram username and profile link are entered correctly. This configuration ensures your app always showcases your latest Instagram Reels, helping customers engage with your latest content directly from the app. {% hint style="info" %} You must install the mobile app that you want to integrate into your mobile store before activating its use. {% endhint %} ### Size Chart The **Size Chart** feature allows you to create custom size guides and assign them to products using **Collections** or **Product Tags**. This helps customers choose the correct size before purchasing, reducing sizing confusion and return requests. ### Enable the Size Chart 1. Navigate to **MageComp Builder**. 2. Locate the **Size Chart** section. 3. Click **Enable**.
Once enabled, click **Manage** to create and configure your size charts. ### Create a New Size Chart 1. Open the **Size Chart Configuration** window. 2. Click **Create First Chart** (or **New Size Chart** if you already have an existing size chart). 3. Enter a **Chart Title**. **Example:** Men's T-Shirt Size Guide
### Configure the Size Chart Table The size chart consists of a table where: * **First Row** = Column Headers (e.g., Sizes) * **First Column** = Row Headers (e.g., Measurements) Example: | Size | S | M | L | XL | | ---------- | -- | -- | --- | --- | | Chest (cm) | 91 | 96 | 101 | 106 | | Waist (cm) | 71 | 76 | 81 | 86 | You can customize the table based on your products. ### Add More Rows Click **Add Row** to include additional measurements. Examples: * Length * Shoulder Width * Sleeve Length * Hip * Inseam ### Add More Columns Click **Add Column** to add additional size options. Examples: * XS * XXL * XXXL * 4XL ### Assign the Size Chart Choose how the size chart should be assigned to products. #### Collections Select **Collections** if all products within a collection share the same sizing. Examples: * Men's Clothing * Women's Clothing * Shoes * Jackets Click **Select Collections** and choose the applicable collections. #### Product Tags Select **Product Tags** if you want to assign the size chart based on product tags. Examples: * tshirt * jeans * shoes * oversized All products with the selected tag will automatically use the assigned size chart. ### Save the Configuration After completing the configuration: 1. Click **Save**. 2. Refresh the mobile app if necessary. The selected products will now display the size chart on their product page.
### Where to Use the Size Chart The Size Chart feature is ideal for stores selling products where sizing is important, such as: * Clothing * Shoes * Sportswear * Uniforms * Fashion Accessories * Baby & Kids Wear It helps customers compare measurements before purchasing, resulting in a better shopping experience and fewer size-related returns. {% hint style="info" %} ### Notes : * You can create **multiple size charts** for different product categories. * Each size chart can be assigned using either **Collections** or **Product Tags**. * Updating a size chart automatically reflects the changes for all assigned products. * Ensure your products are properly organized into collections or tagged correctly for the size chart to appear on the appropriate product pages. {% endhint %}