[V6] (P) Image Element

This article will help you understand what the (P) Image element is and how to use it to display your product images.

What is the (P) Image element?

“A picture is worth a thousand words”, and the same could not be more true when it comes to showcasing your products. Big, stunning product image will surely capture viewers’ attention at the first sight, help reduce bounce rate and turn your potential buyers into actual customers.

In GemPages, the (P) Image element is used to display your product images and videos, and it works perfectly in conjunction with the (P) Image List element.

Let’s go over how you can set up the element in the next section.

Add the (P) Image element to your page

Step 1: In the GemPages Dashboard, select one of your pages and enter the Editor by clicking on the “Edit” button, or simply create a new page.

Step 2: In the Editor, search for the Product module, then drag & drop one onto your page.

*Skip this step if you already have these two.

Once finished, you will have a (P) Image element already inside the Product module.

The (P) Image element always has to be nested inside a Product module to function properly, because it is a child element of the Product module.

Click on the (P) Image element to start exploring the configurations on the left sidebar.

Configure the Settings tab

The Settings tab is where you find all the necessary parameters to set up the (P) Image element.

Effect

This section offers you a hover effect for the product image. By default, there is no effect. You can choose between the Default, Zoom, and Hover effects. Visit this article for more information.

Badge

This option allows you to display a sticky badge on top of the image.

When enabled, you can click on the “More settings” button to fine-tune the look of the badge:

Badge Position: Select one out of 5 badge positions: Top Left, Top Right, Bottom Left, Bottom Right, and Center.
Position Top/Position Bottom: Relocate the badge vertically in relation to the selected position.
Position Left/Position Right: Relocate the badge horizontally in relation to the selected position.
Rotate Frame: Rotate the badge in 360 degrees
Rotate Text: Rotate the text inside the badge in 360 degrees

Badge Shape: Select one out of 5 available shapes for the badge: None, Top Ribbon, Vertical Chevron, Pentagon, and Shield.
If you select None: The shape of the badge will be a perfect square.

Text Value: Edit this field to change the text badge label. The default message is “Sale Off”.

Money Saved: When toggled on, the badge will show the percentage saved if your product is on sale
Price Gaps (only when Money Saved) is enabled: Adjust the spacing between the text and the price in pixels

Text Color: Select a text color using the color palette or Hex color code.

Font Size: Adjust the font size in pixels
Line Height: Adjust the text line height in em (1 em equals 16 px).

Font: Select a font. Visit this article for more information on fonts in GemPages.

Left Gradient Background/Right Gradient Background: Select the left or right gradient color for the badge.

If you want to a solid background color, just remove one option, or select the same color for both Left and Right gradient backgrounds.

Sticker Width/Sticker Height: Adjust the badge’s width/height in either pixels or percentage.

Dimension

In this section, you can adjust the Image Width and Image Height, both in pixels. Image Width can also be adjusted in percentage.

Alignment

Select one out of 3 available alignments for the (P) Image: Left, Center, or Right.

Product Image

Display: Select which image to show up:

First available Variant image
First image from Shopify Admin
First video from Shopify Admin
First 3D Model from Shopify Admin

If you choose the last two options while there’s no 3D image or Video existing in your Shopify Admin, Gempages will display the First image from your Shopify admin instead.

Original Size: Select a resolution for your image. The smaller the original size, the faster your page loads, aim for a nice balance between size and image quality.

Product Link

Toggle this on will make the (P) Image clickable on the live page, and redirects users to the product page.

This feature is useful for (P) Image elements inside a Product List module. So you can direct customers to a specific product page.

Extra Class

If coding is second nature to you and you wish to style even more, feel free to add a class name using this field and refer to it in the CSS file.

Configure the Design tab

The Design tab offers all the tools you need to customize the look and feel of the (P) Image. Visit this article for full guidance.

Once you are happy with the result, hit “Save” & “Publish” to update and bring the element to your live page!