Ctrlk
Our WebsiteOur Shopify AppsDigital MarketingContact Us
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

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.

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/

  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.

Tip: For production use, exchange the short-lived token for a Long-Lived Access Token (valid for approximately 60 days).

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: https://instagram.com/your_profile

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.

You must install the mobile app that you want to integrate into your mobile store before activating its use.

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.

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.

PreviousBuild & PublishNextChangelog

Last updated