About the Product Images element
The Product Images element is a child element of the Product Module which helps you present the images of a certain product from your Shopify Admin. This element includes:
- Featured Image: The main image which is the first image sourced from the Media section in your Shopify Admin > Product.
- Gallery Images: A collection of images from the same Media section, displayed as a visual gallery.
You can find the Product Images element within the GemPages’ Dashboard, situated in the left sidebar under the Product section. It’s important to remember that for proper functionality, the Product Images element should be positioned inside the Product Module.
When you click on the product images, the settings for the Product Images element will appear in the left sidebar, including the Settings and Advanced tab.
Configure the Settings Tab
Layout
The product image will consist of two main components: the Featured Image and the Image list. At this point, you will have the option to choose your preferred layout for the Featured image and Image list. Your choice of layout will determine the additional customization options that become available to further refine the appearance.
Featured Image
The featured image serves as the primary visual representation of your product.
Shape: You have four shape options for the featured image: Square, Vertical Landscape, Horizontal Landscape, and Custom Size. If you select the custom size option, you can enter your desired width and height for the image.
Image Scale:
You can select from two scaling options:
- Fill Image: This option resizes or stretches the image to match the size of the outer container.
- Fit Image: With this choice, the image is scaled to fit the outer container while preserving its original aspect ratio.
Hover effect: Select an effect to apply to the main product when it is hovered over. By default, no effect is applied. You have the option to choose between the Default (No effect), Zoom, and Hover effects.
- Zoom: The Zoom effect allows viewers to magnify your product images when they hover their mouse cursor over them.
Once you have chosen the Zoom effect, additional customization options will become available. You can select the Zoom Style, either the default style or a zoom through a glass effect. Afterward, you can adjust the slider to achieve your desired Zoom value.
2. Show other image: This option enables the display of an alternative image when users hover their mouse over the primary image. If you select this option, you will need to select one product image from the dropdown menu.
Click effect: You can determine the action that occurs when a user clicks on the image. It can either do nothing or open a pop-up window that displays the image in a larger size.
Drag to Scroll: You can enable this feature to allow customers to slide to the next image using their mouse.
Loop: Activate this option to make the slider start from the beginning after reaching the final image.
Navigation: Decide whether to enable navigation arrows and specify their placement.
Choose Icon: You can select a different icon for navigation from our icon library.
SVG Code: Alternatively, you have the option to upload a different icon by providing its SVG code.
Image List
Shape
You have four shape options for the featured image: Square, Vertical Landscape, Horizontal Landscape, and Custom Size. If you select the custom size option, you can enter your desired width and height for the image.
Image Scale
You can select from two scaling options:
- Fill Image: This option resizes or stretches the image to match the size of the outer container.
- Fit Image: With this choice, the image is scaled to fit the outer container while preserving its original aspect ratio.
Click effect
You have the choice to define what happens when a user clicks on the image. You can either set it to display the image in the featured image area or open it in a separate pop-up window.
Active Status: Enable this option if you want to highlight the chosen image.
Drag to Scroll: You can enable this feature to allow customers to slide to the next image using their mouse.
Loop: Activate this option to make the slider start from the beginning after reaching the final image.
Navigation: Decide whether to enable navigation arrows and specify their placement.
Choose Icon: You can select a different icon for navigation from our icon library.
SVG Code: Alternatively, you have the option to upload a different icon by providing its SVG code.
Align
This parameter allows you to determine how the image is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
For any further assistance, our GemPages Support Team is here to help. Please reach us via email or live chat.