Product Price Element

About the Product Price element

In GemPages Editor 7.0, the Product Price combines two elements – the Price and Compare price elements. The Price element shows the regular product price, while the Compare Price element displays the discounted price. Showing both prices makes the offer more appealing and is a proven way to attract customers.

From the GemPages dashboard, open your preferred template to access the Editor. You can quickly find these two elements on the left sidebar, under the Product section.

As a child element, the Price and Compare Price element should be located in a Product Module to work correctly. 

How to display the compare price next to the normal price

Normally, the Compare Price is placed next to the Normal Price to boost the conversion rate. To do this, follow these steps:

Step 1: First, ensure you’ve set the sale price and compare price for the product using the provided guidelines here.

Step 2: Drag and drop the Row element to your desired position. Choose the 2-column layout option and set “Fit to Content” under Column Width.

Step 3: Place the Price and Compare Price elements into each column. You might need to adjust the elements further for your preferred design. The configuration details will be explained in the next part of this article.

Configure The Settings Tab

The Price and Compare Price elements have nearly identical configurations, with the exception of the line through the compare price configuration.

Text

At this point, you have the ability to fine-tune the typography of the text. Here are the available options:

• Styles: Select your desired style from the pre-defined options, which include 6 heading styles and 3 paragraph styles.
• Font: Choose the font you wish to use for the text within this text block. If you want to use a font that is not listed, you can refer to the provided guidance on how to add a custom font in Editor v7.
• Size: Adjust the font size by specifying a value in pixels.

Click on the “Show more” button to reveal more customization options. 

Font Weight: Choose your desired font weight from the provided drop-down menu.

Line Height: Adjust the height of the text by specifying a percentage value.

Letter Spacing: Modify the spacing between letters by inputting a value in pixels.

Text Transform: Transform the text in one of the following ways: 

• No transformation applied.
• Uppercase: Convert all text to uppercase.
• Lowercase: Convert all text to lowercase.
• Capitalize: Capitalize the first letter of each word.

States

You can freely choose the text color for different states such as normal and hover. Pick your desired color from the palette or enter a specific hex code to customize it according to your preference.

Line through

This feature is exclusive to the compare price. Simply switch it on to enable the line through the price. 

Thickness: Adjust the thickness using the slider or by entering a specific number in the box. 

Line color: Choose your preferred line color from the palette or enter the hex color code.

Align

This parameter allows you to determine how the accordion 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.