The Gallery Installation
How to install The Gallery for Miva Merchant
last updated January 02, 2021
Important: jQuery is required for most if not all of the galleries you will be trying out and/or using. If you're store doesn't load it and you're not sure how to do it yourself, let us know and we'll have it loading on your site or gallery page in no time.
Install Module - This works for any utility module.
Step 1. MENU MODULES
Step 2. Click the under the search box.
Step 3. Upload module - click upload button, click "choose file", select thegallery.mvc, then click the "upload" button.
Step 4. Click the ADD button
Step 5. MENU UTILITIES ADD/REMOVE MODULES
Step 6. INSTALL The Gallery (find the box with The Gallery and click the INSTALL button)
The module is now installed and ready to use on the Product Display Page. To use it on other pages click the ITEMS tab on the page you want to use it on and find The Gallery and click the toggle switch to assign it to the page.
Import Gallery Styles
The next step is to grab some gallery styles! Open up the module admin by going to:
MENU UTILITIES THE GALLERY
The first screen will ask for your license. Then you will see an empty Gallery Types screen, but not to worry, click on the blue import button to get started.
I recommend starting with the Unite Gallery because it has the most options. If you're looking for a nice slider, BX Slider works as well. Featherlight is just a very fast small gallery plugin without a lot of options, but it can still handle video and other kinds of media.
If there is a gallery you want to use out there let us know and we'll try to add it to be library.
Display a Gallery
These instructions reference the the Product Display Page (PROD) but the steps are the same for any page you want a gallery on.
The only difference between the product page and any other page is that on the product page The Gallery loads up product images and associated collection. On other pages you'll load your custom collections.
Step 1. Open the Product Display (PROD) page in the Miva Merchant admin.
Step 2. Click on the ITEMS tab and assign The Gallery page item.
Step 3. Go back to the page template and add the following code just above the closing HEAD tag so it looks like this:
<mvt:item name="thegallery" param="unite_default" />
&mvt:thegallery:head;
</head>
Gallery Style: The code above will load the unite_default gallery style. If you list the styles in the module you'll see all the different options. For example, if you decided to use the Unite Gallery carousel style, you would put unite_carousel in for the gallery style.
Collection: If you are loading a collection which can be thought of as a custom gallery, you would add the collection code after the gallery style. For example, if you had a collection with the code skiing_images that you wanted to display with the Unite Gallery carousel style, your page item would be:
<mvt:item name="thegallery" param="unite_carousel skiing_images" />
&mvt:thegallery:head;
</head>
Step 4. Put &mvt:thegallery:gallery; where you want your gallery to display.
You will need to comment out or delete the stock image machine code which will look something like this:
<!-- Image -->
<div class="product-images">
<div class="product-image">
<img src="graphics/en-US/cssui/blank.gif" alt="" title="" id="main_image" class="aligncenter" />
</div>
<ul id="thumbnails" class="thumbnails"></ul>
</div>
You can comment the stock image code and add the gallery entity like this:
&mvt:thegallery:gallery;
<mvt:comment>
<!-- Image -->
<div class="product-images">
<div class="product-image">
<img src="graphics/en-US/cssui/blank.gif" alt="" title="" id="main_image" class="aligncenter" />
</div>
<ul id="thumbnails" class="thumbnails"></ul>
</div>
</mvt:comment>
Step 5. Put the foot entity just above the closing body tag so it looks like this:
&mvt:thegallery:foot;
</body>
Clean Out Image Machine Code
Once you are happy with your gallery settings you can clean out all the image machine code from the page template except for one line in the HEAD tag area:
<mvt:item name="product_display_imagemachine" param="head_deferred" />
This is the line that generates alternate sized images from your product images and should be in the HEAD tag.
