Display product prices with (P) Price element

In this article, we're going to learn about (P) Price elements and how to use them to create highly converting pages.

What is the (P) Price Element? 

(P) Price element is designed to show the price of your Shopify products on your page to boost your conversion rate. You can use the Product Price element to promote your products on non-product pages or to use it on a product page. Since (P) Price element is a child element of the Product module, it should be located in a Product Module to work properly. 


You can quickly find the element on the left sidebar of the editor page.



Settings Tab's Parameters

    1. Compare Price  

       To enable this feature we need to slide the adjustment bar from left to right.  
      After that, we can click on More Settings for further adjustments. 

      • Compare First: It enables us to rearrange the order of the current price and the previous price for example. 
      • Font Size: This setting enables us to make the size of the text bigger or smaller. 


      • Color: This parameter allows us to choose the color of the text.

      • Font: You can choose between any fonts available in the Font Manager or you can add any custom font from external sources. Even though there is no limit to the number we can add to our store, however, for better page loading speed and graphic design, the maximum font displayed on a page is recommended to be fewer than three fonts. You can check this article out to know how to add a custom font to your site. 

      • Font style: You can style the text with Bold (B) and Italic (I).

      • Line Through Position: It allows us to position the strike-through on the previous price horizontally.  

      •  Line Through Color: It enables us to change the color of the line.

    2. Price: Like the settings of Compare Price, you can easily adjust Font Size, Color, Font Style, and Font for the current price.

    3.   Alignment: This setting allows us to put the text in different locations within the description box. Four primary types of text alignment include left-aligned, centered, right-aligned, and justified.

    4. Percentage Saved (Cost Saving): It represents the discount of a product.

      Click on More Setting to adjust further.

    5. Extra class: If you wish to customize one element particularly, please use this field to add a class name and then refer to it in the CSS file.

That's all about (P) Price element. You can easily leverage the current feature of (P) Price element to create gorgeous and highly converting websites on Gempages. 

Was this helpful?