Shopify元素- 产品价格

In this article, you’ll learn about another Shopify element: product prices.

About the product price element

The “Product Price” element can be used to display the price of a Shopify product on the page to increase conversions. You can use the product price element to promote your products on product pages/non-product pages.

You can check more details in the video tutorial below.

Note that you can use the search function to find this element, not in the sidebar.

pagefly elements product price

The product price element has two common variants, and we will continue to add more variants to help you save time, such as product price and product comparison, etc.
Drag the variant to the layout and see how to configure it.

Product Price Element Configuration

product price element

The Product Price element comes with a number of parameters that allow you to fine-tune the appearance of your content for optimal conversion rates.

Select the element in the layout to view its parameters.

When dragging and dropping the “Product Price” element to the editor page, there are 2 options for “Product Source”:

  • automatic
  • custom product

Please note that if you are using the “Product Price” element in the “Product Page”, you can select the “Product Source” option. However, when you use this element in the “General Page”, the “Product Source” option is disabled by default, and “Custom Product” is selected.

If “Automatic” is selected, the product assigned when this product page was created will be displayed in the page editor. The “Auto” option is the default option when you use the “Product Price” element.

shopify elements product price

You can select “Custom Products” and select the desired product.

pagefly product price element 2

General option parameters
1. ContentThere are 2 options for product sources : automatic and custom products.
2. Properties You can read more here .
3. Visibility You can read more here .
4. Animation effect You can read more here .
style option parameter
1. OverallYou can read about all these parameters here .
2. MarginsYou can read about all these parameters here .
3. Typesetting and printingYou can read about all these parameters here .
4. BackgroundYou can read about all these parameters here .
5. BorderYou can read about all these parameters here .
6. DisplayYou can read about all these parameters here .
7. Custom CSSYou can read about all these parameters here .

Product comparison element

The .product comparison element comes with many parameters that allow you to fine-tune the appearance of your content for optimal conversion rates.

Select the element in the layout to view its parameters

When dragging and dropping this element to the editor page, there are 2 options for “Product Source”:

  • automatic
  • custom product

Note that if you are using the “Compare Product Price” element in your Product Page, you can select the “Product Source” option. However, when you use this element in the “General Page”, the “Product Source” option is disabled by default, and “Custom Product” is selected.

If “Automatic” is selected, the product assigned when this product page was created will be displayed in the page editor. The “Auto” option is the default option when you use the “Compare Product” element.

General option parameters
1. ContentThere are 2 options for product sources : automatic and custom products.
4. Properties You can read more here .
5. Visibility You can read more here .
6. Animation effects You can read more here .
style option parameter
1. OverallYou can read about all these parameters here .
2. MarginsYou can read about all these parameters here .
3. Typesetting and printingYou can read about all these parameters here .
4. BackgroundYou can read about all these parameters here .
5. BorderYou can read about all these parameters here .
6. DisplayYou can read about all these parameters here .
7. Custom CSSYou can read about all these parameters here .

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now