Shopify Product Price Element | How to Edit with PageFly

About Shopify Product Price ElementClick to copy

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 ElementClick to copy

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

How To Access The Product Price Element

Note: Product Price element comes with three common variations. We will continue to add more variations to help you save time.

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 ElementClick to copy

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.

How To Configure For Product Price Element

General SettingsClick to copy

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 SourceClick to copy

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.

collection source

  • The Custom product allows you to select a specific product to display its price.

custom product

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 DisplayClick to copy

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 dislay

Price PositionClick to copy

You can choose the position of the product price with product compare at price with 4 options:

  • Left
  • Right
  • Below
  • Under

price position

Note: the Price position only applies when you choose to display both price and compare at price.

You can get information about ATTRIBUTES, VISIBILITY, ANIMATION parameters in this article.

Styling SettingsClick to copy

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?Click to copy

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.

How To Configure Compare At Price Element Inside Product Price?

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 CasesClick to copy

Error When Choosing Auto Product SourceClick to copy

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:

  1. In the left menu, click on Page assignment.
  2. Click the Add products button and choose your desired product and click Select.

Error When Choosing Auto Product Source

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 QuestionsClick to copy

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.

Additional ResourcesClick to copy

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us