(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 (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.

The most common inquiries of (P) Price Element

  1. How to change currency and the currency format?
    • Step 1:  Go to your Shopify admin > Settings > General


    • Step 2: In the General setting, scroll down to the bottom of the page select Change formatting and Save. You will see the currency changed on your page.

  2. How to change the prices of products on Gempages

    As Product module and (P) Prices elements extract the real-time product's information from Shopify admin, we will need to go to your Shopify Admin and update the price over there.

      • Step 1: go to Shopify Admin > Products > All Products > Select the product you want to make the change > Edit.

     

      • Step 2: Change price in the Pricing section. 

 

If the previous price and the current price are identical on the Shopify admin, the compare price section won't show up.

Recommended third-party apps for (P) Price element. 

If you want to incorporate more features for (P) Price element such as:  

  • Automatically convert Price based on the current customer's location 
  • Show different price unit (USD, Euros, and so on)  at the same time 
  • Supports any currency including Bitcoin.

Two recommended apps are BEST Currency Converter and Auto Multi-Currency Converter. They are well-known and highly compatible with Gempages. 

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?