Product Images Element

This article will show you how to use Product Images to create a stunning product image showcase with GemPages Editor V7.

Note: For optimal functionality, please ensure that you upgrade to GemPages version 7.

About the Product Images Element

The Product Images element, part of the Product Module, allows you to showcase images of a specific product directly from your Shopify Admin. This element features:

Featured Image: The main image, sourced from the first image in the Media section of your Shopify Admin > Product.
Image List: A collection of images from the same Media section, displayed as a visual gallery.

add products — To use the Product Images element, make sure you have a product with images in the media section in your Shopify Admin.

How to Add the Product Images Element in GemPages v7

Step 1: In the GemPages Editor, create a product page and assign a product. select a product Step 2: Click on the main image to open its settings. You will see the Product Images element located in the left sidebar under the Layout section.
product images element

Note: For proper functionality, the Product Images element should be positioned inside the Product Module.

Configure the Settings Tab

Layout

The product image will consist of two main components: the Featured Image and the Image list. GemPages currently offers 9 pre-designed layouts to help you display both the Featured Image and the Image List effectively.

Note:

You can fine-tune the spacing between images in the Image List.
Make sure to check how the layout appears on different devices.

Select images to display

This section allows you to select and arrange the image to be featured, ensuring it is presented exactly as you want it.

Featured Image

The Featured Image serves as the primary visual representation of your product. This section includes:

1. Proportion: The Featured Image has five shape options: Square, Vertical Landscape, Horizontal, Original, and Custom Sizes. If you select the custom size option, you can enter the image’s desired width and height.

2. 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: This choice scales the image to fit the outer container while preserving its original aspect ratio.

3. 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.
  - 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

4. Click Effect: You can determine the action that occurs when a user clicks on the image. It can either do nothing, trigger a pop-up displaying the image in a larger size, or redirect the user to the relevant product page.

5. Corner: This option allows you to choose whether the Featured Image has sharp corners or a circular shape.

6. Drag to Scroll: You can enable this feature to allow customers to slide to the next image using their mouse.

7. Loop: Activate this option to make the slider start from the beginning after reaching the final image.

8. Navigation: This option enables you to add navigation arrows on your product images and choose where they’ll appear.

- - Choose Icon: With this setting, you can swap out the navigation arrows with a different icon from our library to fit your style.
  - Icon Color: Pick a color for the navigation icon that matches your design.
  - Nav. Color: Choose a color for the navigation arrows that blends seamlessly with your page.
  - Nav. Border: Enhance the navigation arrows by adding a border for a stylish touch.
  - Nav. Corner: The last setting lets you decide whether you want the navigation arrows to have sharp or rounded corners.

Image List

1. Display Type: Choose to show the Image List as a slideshow or display all images.

2. Proportion: You have five shape options for the Featured Image: Square, Vertical Landscape, Horizontal, Original and Custom Size. If you select the custom size option, you can enter your desired width and height for the image.

3. 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: This choice scales the image to fit the outer container while preserving its original aspect ratio.

4. Click Effect: Choose what action occurs when a user clicks on the image. You can either show the image in the featured area or open it in a separate pop-up window.

5. Active Border: Enable this option if you want to highlight the chosen image.

6. Corner: Decide if you want the Image List to feature sharp or rounded corners.

7. Spacing: Set up the space between the images in the Image List.

Quality

You can adjust the quality of the Featured Image and Image List to help optimize page loading speed.

Align

This parameter allows you to determine how the image is positioned on your page. There are three options to choose from: 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.