7: 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>
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>
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 gallerydata-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 viewdata-gallery-pins="0"
To display pins in pop up view
data-modal-pins="1"To hide pins in pop up viewdata-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 typedata-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>