Product details
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
Summary: element is designed so you can put any product from your Shopify store on your page to increase your conversion rate. You can use the Product Details element to promote your product on any non-product page or to use it on a product page if you do not like the Shopify default product element on the product page.
You can check more details in the video tutorial below.
Step 1: Click on the Elements icon in the Element Catalog (left sidebar)
Step 2: In the Elements section, switch to the Shopify tab and click on the Product Details element in the dropdown menu
Step 3: Drag and drop the element into the page editor and then start using it.
The Product Details element comes with 2 common variations but we will continue to add more variations to help you save time.
Shopify Product Details element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Product Source: When you drag and drop the Product Details element into the editor page. There are 2 choices of the Product Source option for you to choose from, which are Auto and Custom product.
If the product source is set to "Auto", it will only appear on Product pages and will work based on the specific product you assign to that page. Other page types will require you to select a source. The "Auto" source option allows you to create a product page template that can be assigned to multiple products.
If you choose a Custom Product, you can select the specific product you want by clicking on the “Select product” button.
There is a new option when you use a Custom Product, which is the Default variant option. With this option, you can choose a variant of the product in the list of variants you want to display on the live page that your customers can see.
The Styling tab allows you to customize the appearance of your Product Details element to ensure it aligns with your brand’s design. Here, you can adjust various visual aspects such as Size, Layout, Overall, Spacing, Typography, Background, Border, Effects and Advanced Settings, and more to make your element stand out and look professional.
There are other sub-elements that are located inside the Product details element, you can head over to these articles below for more information:
Prioritize displaying essential product details like name, price, size, color variations (if applicable), and stock availability (in-stock or out-of-stock)
Structure the product details logically using bullet points, tables, or clear headings for each information category (e.g., materials, dimensions, care instructions)
Incorporate high-quality product images and consider adding zoom functionality for users to explore product details visually
1. What is the Shopify Product details element?
Shopify Product details often include all information about the products, for example: size, color, price, shipping information, reviews, and other relevant information; basically everything customers may want to know before purchase.
2. What is the difference between Shopify Product Details and Product Descriptions?
Shopify Product Description is to describe and explain the benefits of your product. The Shopify Product Details is the whole package of a product, including name, price, description, check-out button…
3. What is the difference between section and flex section (Gen 2)?
Sections allow users to design page layout in row-column container structure and can be added both in PageFly Sections and PageFly pages. Flex sections, on the other hand, don’t have row-column structure. It allows to add elements directly on PageFly pages and more flexible customized layout by Flex blocks.
In addition to the traditional page building mechanism (row, column), PageFly 4.23.0 adds Gen 2 Layout, a more flexible and efficient technology that allows creation of complex and highly customizable layouts, which comes with an intuitive and user-friendly interface.
Note: Using this element on a type will result in two product elements on your page; the Shopify product element is removable with custom code that you can get by contacting us on live support since the code is different depending on the store’s current theme.
You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters .
You can find more details about the available options on the .
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().