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.
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.
You can select “Custom Products” and select the desired product.
| General option parameters | |
| 1. Content | There 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. Overall | You can read about all these parameters here . |
| 2. Margins | You can read about all these parameters here . |
| 3. Typesetting and printing | You can read about all these parameters here . |
| 4. Background | You can read about all these parameters here . |
| 5. Border | You can read about all these parameters here . |
| 6. Display | You can read about all these parameters here . |
| 7. Custom CSS | You 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. Content | There 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. Overall | You can read about all these parameters here . |
| 2. Margins | You can read about all these parameters here . |
| 3. Typesetting and printing | You can read about all these parameters here . |
| 4. Background | You can read about all these parameters here . |
| 5. Border | You can read about all these parameters here . |
| 6. Display | You can read about all these parameters here . |
| 7. Custom CSS | You can read about all these parameters here . |
Previous article
