How to set up Instagram Gallery


Web Content > Text Block & Settings > Theme Options

Before setting up the Instagram Gallery in the store, you need to do the following first.

  1. Go to Settings > Theme Options
  2. Click on Custom Code tab then choose HTML tab
  3. Turn On the Status to enable this function
  4. Paste the following program code in the box field
    • <script type="text/javascript" src="//lightwidget.com/widgets/lightwidget.js"></script>
    • Note : If there are other program codes in the box field, please do not delete them unless you know what you are deleting. Just paste the above program codes in a new line.
  5. Click Save

Next, you will need to determine how you want the Instagram Gallery to appear in the store.



  1. Go to https://lightwidget.com/
  2. Login to your Instagram account to authorize the Lightwidget to create a widget for you (This only required to be done once.)

Description:
  1. Enter your Instagram Username
  2. Enter Tag if you want to filter images with the chosen tag (optional) 
  3. Configure the way you want your Instagram Gallery to look like in Initial Settings
    • Type of widget - choose either grid, slideshow or columns
    • Number of columns - determine the number of columns
    • Number of rows - determine the number of rows
    • Image hover effect - choose the hover effect (mouse hover)
    • Padding - determine the amount on space between images (in pixels)
    • Image format - choose square to square crop all the images or original to display the image in original size/format 
    • Show Caption - click this to display the image's caption
  4. Check this box for Lazy Loading setting (optional)
  5. Check this box if you have Custom CSS code (optional)
  6. Click Preview
  7. Click Get Code! to copy code to clipboard

To set up Instagram Gallery in your store,

  1. Go to  Web Content > Text Block
  2. Click Add Module to have a new module


Upon clicking Add Module, this page will appear


Description: 

  1. Under Type, select HTML
  2. Click on Source, paste the program codes that you have copied earlier from Lightwidget here
    • If you wish to have a preview on how it would look like or you would like to add a title to this Instagram Gallery
    • Click on the Source again, and if required, add a title to it using the available formatting here
  3. Give a Name to the module for easy reference and maintenance in the future (e.g. Instagram Gallery)
  4. Choose which Page to display the gallery
  5. Determine the Position of the gallery in the chosen page
  6. Choose Enable for status to display the gallery
  7. Determine the display sequence in ascending order
  8. Click Save


Sample Screenshot of Instagram Gallery in the store



Was this answer helpful?

 Print this Article

Also Read

How to set up Basic Top Menu Bar

Web Content > Menu Manager & Products > CategoriesIf you have decided to go with the...

How to set up Slideshow

Web Content > SlideshowSlideshow is usually being placed at the top portion of the store's...

How to create Product Slider

Web Content > Product SliderTo create a Product Slider, Go to Web Content > Product Slider...

How to create an Image Gallery

Web Content > Image GalleryTo create an Image Gallery, Go to Web Content > Image Gallery...

What can you do with Text Block

Web Content > Text BlockText Block is a very versatile advanced feature. It is advisable to be...

Powered by WHMCompleteSolution