Frequently Asked Question

6 - Add an additional gallery (optional)

Last Updated 5 years ago

It is possible to add a second InstaShop gallery to your shop.

You will need to build your own embed code (see below). As such, adding an additional gallery is considered to be INTERMEDIATE difficulty.

Note:

  • The second gallery will display the same pictures as your primary gallery
  • You will not be able to change the look and feel of the second gallery via the InstaShop settings interface. Instead you will need to edit the embed code you create.

Building your embed code

You can change every aspect of additional galleries you add to your shop. To do this, you will need to build your own embed code.

When adding an additional gallery, you MUST include:

<div class="instashop-gallery"></div>
<script type="text/javascript" src="https://instashop.s3.amazonaws.com/js-gz/embed/embed-1.6.7.js"></script>

After that, you need to add changes that are DIFFERENT to the primary gallery you have set up in the InstaShop app. You do this by adding additional elements BEFORE the 

></div>

Examples

If you wanted to change the gallery to a grid, it would look like this:

<div class="instashop-gallery" data-layout="grid"></div>
<script type="text/javascript" src="https://instashop.s3.amazonaws.com/js-gz/embed/embed-1.6.7.js"></script>

If you wanted to change the gallery to a grid and limit the rows in the grid to 2, it would look like this:

<div class="instashop-gallery" data-layout="grid" data-rows="2"></div>
<script type="text/javascript" src="https://instashop.s3.amazonaws.com/js-gz/embed/embed-1.6.7.js"></script>

Here are the code elements you can add to your embed code:

To change the type of gallery displayed:
data-layout="grid"
data-layout="slider"
data-layout="collage"

To change the gallery theme:
data-theme="light"
data-theme="dark"

For Collage and gallery, you can change the number of rows by changing the value:
data-rows="4"

Allow zoom on gallery
data-zoom="1"

Deactivate zoom on gallery
data-zoom="0"

To display price
data-prices="1"

To hide price
data-prices="0"

To display pins in gallery view
data-gallery-pins="1"

To hide pins in gallery view
data-gallery-pins="0"

To display pins in pop up view
data-modal-pins="1"

To hide pins in pop up view
data-modal-pins="0"

To display the more button
data-show-more="1"

To hide the more button
data-show-more="0"

To display gallery overlay (e.g. Shop The Look)
data-overlay="1"

To adjust copy of gallery overlay, adjust the 'shop the look' text below:
data-overlay-label="Shop the Look"

To hide gallery overlay (e.g. Shop The Look)
data-overlay="0"


Control the pin type
data-pin-type="none"
data-pin-type="pin"
data-pin-type="radar"
data-pin-type="star"

To control product image display
data-product-images="always"
data-product-images="never"
data-product-images="one"
To use a custom CSS class
data-class="my-gallery"

(Your gallery will now have the CSS class 'custom-my-gallery')

Example embed code

In the example embed code below, the second gallery will differ from the primary gallery in the following ways

  • Gallery type: Grid
  • Rows in the grid: 4
  • Theme: light
  • Product Prices: displayed
  • Pins: hidden
  • Data overlay: ON
  • Text to show on Data Overlay: Shop the Look
  • Pin type: Radar

<div class="instashop-gallery" data-layout="grid" data-rows="4" data-theme="light" data-prices="1" data-gallery-pins="0" data-zoom="0" data-overlay="1" data-overlay-label="Shop the Look" data-pin-type="radar"></div>
<script type="text/javascript" src="https://instashop.s3.amazonaws.com/js-gz/embed/embed-1.6.7.js"></script>


You're now ready to embed your code into your Shop:
Adding InstaShop to a page using HTML code

Please Wait!

Please wait... it will take a second!