About Shopify Product Price Element
Summary: Shopify Product Price element allows you to display the price of your Shopify products on your pages. This element is essential for informing customers about product pricing and can be customized to match your store’s design.
You can use the Product Price element to promote your products on any non-product page or to use it on a product page. This article will show you how to effectively use the Product Price element in PageFly.
For more details, check out this video tutorial.
How To Access The Product Price Element
- Step 1: Click on the Elements icon in the left menu
- Step 2: Navigate to the Shopify tabs, which contains elements from Shopify
- Step 3: Click on the Product Price element in the dropdown menu
- Step 4: Drag and drop the desired variant of the Product Price element into the page editor.
Below are the current variations:
- Product Price and Product Compared at Price: Shows the original price and discount price in the same line.
- Product Price: Shows the original price.
- Product Compared at Price: Shows the discount price.
How To Configure For Product Price Element
The Product Price element comes with numerous parameters that allow you to fine-tune its appearance for the best possible conversion rate.
Click on the Product Price element you’ve added to your page. Then, go to the General and Styling tabs to access and adjust the available parameters.
General Settings
In the General tab, you can configure the essential functional settings for the Product Price element. Let’s check the main parameters in this tab:
Collection Source
When you drag and drop the Product price element into the editor, you have two choices for the Collection Source: Auto and Custom product.
- The Auto option means the product price displayed will be the one assigned when you created the product page.
- The Custom product allows you to select a specific product to display its price.
The specific case will vary if you’re on a product page or not.
- In Product Page:
When you use the Product price element inside a Product details element on a product page, the price will automatically take the price of the Product details. The Auto option is assigned as the product source by default.
If you use the Product price element outside a Product Details element on a Product Page, you can choose between two options
- In Non-Product Page:
On non-product pages, the Product source option is disabled, and Custom Product is chosen by default. You can select the specific product you want to display.
Price Display
You can choose how the price is displayed with the following options:
- Price and Compare Price: Shows both the original price and the discount price.
- Price: Shows only the original price.
- Compare at Price: Shows only the discount price
Price Position
You can choose the position of the product price with product compare at price with 4 options:
- Left
- Right
- Below
- Under
You can get information about ATTRIBUTES, VISIBILITY, ANIMATION parameters in this article.
Styling Settings
The Styling tab allows you to customize the appearance of your Product Price element to ensure it aligns with your brand’s design. Here, you can adjust various visual aspects such as font, color, size, spacing, and more to make your product price stand out and look professional.
For more detailed information, refer to the Styling tab guide.
How To Configure Compare At Price Element Inside Product Price?
The Product Price element contains two elements: Price and Compare at Price. For these elements, you can only change the styling, as the General tab is disabled when you click on them.
Note that when adding more products to the cart, the total price won’t be shown there, it will be shown on the checkout page.
Common Cases
Error When Choosing Auto Product Source
If you encounter an error when selecting the Auto product source in a product page, it means you haven’t assigned any product to your page.
Error Message: “The page needs to be assigned to at least 01 product.”
To resolve this issue, follow these steps:
- In the left menu, click on Page assignment.
- Click the Add products button and choose your desired product and click Select.
Alternatively, you can click the Assign products button to access the Page assignment manager and select your products from there.
By assigning a product to your page, you will enable the Auto option in the Product Source, and the product price will display correctly.
Frequently Asked Questions
1. How can I change the currency displayed in the Product Price element?
The currency displayed in the Product Price element is determined by your Shopify store settings. To change the currency, go to your Shopify admin, navigate to Settings > General, and update the currency settings.
2. Can I display both the original and discounted prices using the Product Price element?
Yes, you can display both the original and discounted prices by selecting the “Price and Compare Price” option in the Price Display settings within the General tab.
3. Why is the Product Price not showing on my non-product page?
On non-product pages, the Product Source is set to Custom Product by default. Ensure you have selected a specific product in the General tab for the price to be displayed.
Previous article
