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. Assign The Gallery page item just above the closing HEAD tag and include the head page entity so it looks like this:
<mvt:item name="thegallery" param="gallery_style products" /> &mvt:thegallery:head; </head>
Gallery_Style: This is the gallery style code that you will find in the styles section of the module admin. For example, if you decided to use the Unite Gallery carousel style, you would put
unite_carousel in for the gallery style.
Products: this is the products keyword. If you want to load a custom collection you would put the collection code in instead. The keyword "products" is reserved to display product images. If you had a collection with the collection 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 3. Put
&mvt:thegallery:gallery; where you want your gallery to display.
You will need to comment out or delete the stock image gallery 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 like this:
<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 4: Put the foot entity just above the closing foot tag so it looks like this:
All that's left is to import some gallery styles and decide which gallery you want to use.