Instagram Widget | SHOP Builder

4. EC + SC (EN).png

When editing an advanced page, you can add the "Instagram Widget" to integrate your Instagram account into the storefront. Not only will it make your storefront look more vibrant, it will also boost traffic to your social media.

⚠️ Before you begin:

  • SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
  • After creating a page using SHOP Builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

 

1. Add Instagram Widget

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click Advanced Page/Edit to open up the Advanced Page settings page.

11.png

 

Step 2

Click the Widget button.

Screen_Shot_2022-08-01_at_4.47.14_PM.png

 

Step 3

Click the Instagram widget under "Extension."

Screen_Shot_2022-08-04_at_6.53.00_PM.png

Step 4

Click the + Instagram button to integrate your Instagram account.

Screen_Shot_2022-08-04_at_6.56.46_PM.png

Screen_Shot_2022-08-04_at_7.02.20_PM.png

*Note: Once you have integrated your Instagram account into SHOP Builder, the integration will apply to all store pages, which means that switching the Instagram account on any advanced pages will apply to all pages.

 

Step 5

Edit text settings:

  • Title (Optional): Insert the Instagram widget title, or leave it blank.
  • Text alignment: Adjust the text alignment (Left/ Center/ Right).

Screen_Shot_2022-08-08_at_2.55.42_PM.png

 

Step 6

Adjust Instagram photos settings:

A. Show Caption

You may switch the "Show Caption" toggle on to show content previews when the cursor is on top of the Instagram post.

Screen_Shot_2022-08-08_at_2.58.48_PM.png

B. Remove inner padding

You may switch the "Remove inner padding" toggle on to remove the white spacing between Instagram photos to give them a more solid layout.

Screen_Shot_2022-08-08_at_3.02.59_PM.png

C. Padding

You may adjust the spacing between Instagram photos and the webpage.

Screen_Shot_2022-08-08_at_3.01.03_PM.png

 

D. Image Per Row / Column

You may adjust the number of images per row (vertical) and per column (horizontal). A minimum of 1 image and up to 5 images per row/ column are supported.

Screen_Shot_2022-08-08_at_3.02.59_PM.png

Step 7

When setting up, you can click the Save button on the bottom, and a preview screen of the added Instagram widget will display on the right. You can also preview it in the mobile version. 

Screen_Shot_2022-08-08_at_3.04.02_PM.png

Screen_Shot_2022-08-08_at_3.08.59_PM.png

 

Or click the Preview button at the top right to view the complete storefront.

Screen_Shot_2022-08-08_at_3.05.15_PM.png

 

Step 8

Once the above is completed, click the Publish button, and customers will be able to see the added content on this page at the storefront.

Screen_Shot_2022-08-08_at_3.07.13_PM.png

 

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments