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 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.
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.
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.
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.
- Sticker Width/Sticker Height: Adjust the badge’s width/height in either pixels or percentage.
In this section, you can adjust the Image Width and Image Height, both in pixels. Image Width can also be adjusted in percentage.
Select one out of 3 available alignments for the (P) Image: Left, Center, or Right.
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
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.
Toggle this on will make the (P) Image clickable on the live page, and redirects users to the product page.
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!