Display product images with the (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

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!


For any further questions, please feel free to reach out to our GemPages Support Team at any time. We are available via email or live chat.

 


Was this helpful?