In this article, we will learn about the (P) Price element and how to use them to best display your product price.
About the (P) Price Element
The (P) Price element is designed to show the price of a particular product on your page.
As a child element, the (P) Price element should be located in a Product Module to work correctly. Drag & drop the Product Module, then nest the (P) Price element inside if your page doesn’t have them.
Click on the element to view its configurations in the left sidebar, including Settings and Design tabs.
Configure the Settings Tab
This feature allows you to show the discounted price next to the original price. The prices should be previously set up in the Shopify admin. For a detailed design guide, check out this article.
You can easily adjust how the element looks with this section.
- Font weight: Select the font weight for the price from the drop-down menu.
- Font Size: Adjust the font size of the price.
- Color: Enter the hex color code for the color of the price.
- Font Style: Transform the price to be Bold, Italic, or Underlined.
- Font: Choose the font for your price from the drop-down menu. Click on “Font manager” to explore more fonts available on GemPages. In case you want to use a custom font, kindly take a look at this article.
Toggle the Round decimal switch on to display the price as a decimal (e.g. $4.99). Input the number to the Round to field; it will be shown behind the decimal point.
For discounted products, you can turn on this feature to show a box with the discount percentage.
Click “More settings” to further customize it.
- Text before discount: Enter the text before the percentage number.
- Text after discount: Enter the text after the percentage number.
- Padding: Adjust the space between the text and the border in pixels, using the slider or the number box.
- Gaps: Adjust the space between the box and the price, using the slider or the number box.
- Border Style/Size/Color: Adjust the display of the border.
- Font size/style: Change the display of the text.
- Background color: Pick a color or enter the hex color code for the box’s background.
This section allows you to determine how the element is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.
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.
Configure the Design tab
To style how the element looks, please navigate to the Design tab and follow the instructions in this article.
That’s it! Remember to “Save” and “Publish” your page to bring the price to the live store.