How to use the Product Showcase element [PlusPack]
Please note: You must be using OptimizePress version 2.5.7 or above for PlusPack features to function correctly.
In this video lets take a look at the OptimizePress PlusPack Product Showcase element.
- To get started, open a page with the LiveEditor. Once launched, click on the ' Add Element' button.
- Next, click on the Search box and begin typing in the word ' Showcase'. OptimizePress will go ahead and list all the elements containing the word Showcase. From this list, select the 'Showcase' element.
- When you click on the ' Product Showcase' element. You will be taken to a the second step where you can choose from a list of 2 styles. Depending on how many images you have, you may want to select the style with the thumbnails placed at the bottom due to more thumbnail space. In our example, we've chosen the first style.
- Once you've selected your style. You will be taken to a section where you can start adding in your images and changing the ' Instruction Text' of your Product Showcase. By default, the Instruction Text is set to "Click and drag the image to zoom in". Click the 'Add New' button.
- A new area will pop up with instructions to add an image and also some ' Image alt Text' which is ideal for SEO purposes.
PLEASE NOTE: Upload at least 1000px wide images to enable zoom functionality.
- To add more images, simply click on the ' Add New' button again until you're happy with the number of images to use for your showcase.
- Once you're happy with your images, click the ' Insert' button to launch your Showcase element to your page. Save the page in the LiveEditor and preview your element. You should now see a fully functioning and beautiful showcase for your customers to browse and scroll through.
You can also further customise your element by clicking on the ' Advanced Options' button.
You will be presented with a list of editing options:
- General Options:
Product Showcase Element Size (Percentage) - Set how large you would like your Showcase Element to be.
Product Showcase Border Colour - Set the border colour of your element.
- Product Image Options:
Animation Type (Default, Fade, Slide) - Set how you would like the Main image to be animated.
Speed of Animation (in Milliseconds) - Set how fast you would like the animation to be.
Thumbnail Size (Small, Medium, Large) - Set how large you would like your thumbnails to be.
Border Colour of the selected image thumbnails - Set the border colour of your thumbnails.