About The Product Details Element
Summary: Shopify Product Details 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.
How To Access Shopify Product Details Element
- 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.
How To Configure For Product Details Element
Shopify Product Details element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
General Settings
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.
Please note that:
- The “Custom product” option in the Product source only changes the product on this page. It will not affect the other products assigned to the “Page assignment” section.
- If you are on the Product Page and use the Product Details element, then you can choose the Product Source option. However, if you are in the Regular Page and use this element, the Product Source option is disabled and the Custom Product chosen by default.
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.
You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here.
Styling Settings
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.
You can find more details about the available options on the Styling tab guide.
There are other sub-elements that are located inside the Product details element, you can head over to these articles below for more information:
Best Practices For Using Product Details Element
- 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
Frequently Asked Questions
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.
Version Update
In addition to the traditional page building mechanism (row, column), PageFly 4.116.0 adds Gen 2 Layout (Beta), a more flexible and efficient technology that allows creation of complex and highly customizable layouts, which comes with an intuitive and user-friendly interface.
Previous article
