Introduction:
The Product Display Page within your app plays a pivotal role in showcasing detailed information about your products to potential customers. It serves as a central hub where users can explore product media, titles, variants, pricing details, ratings, reviews, and much more. In this guide, we'll delve into the process of configuring your Product Display Page using your app builder. We'll explore the various settings available and how they can enhance the presentation of your products to users.
Understanding the Product Display Page:
Before we dive into configuration, let's grasp the essence of the Product Display Page. This page serves as a comprehensive platform where users can access in-depth information about your products. From images and descriptions to pricing details, variants, ratings, and reviews, the Product Display Page provides users with a holistic view of the products you offer.
How Product Display Page Looks in Your App:
In your app builder, the Product Display Page is designed to provide users with a visually appealing and informative experience. It features product media, including images and videos, along with detailed descriptions, pricing information, variants such as color and size, and rating and review sections. Additionally, users may find recommendations for similar products based on their browsing history or preferences.
What Will Change:
Configuring your Product Display Page allows you to tailor the presentation of your products to meet the specific needs of your audience. By toggling various options, you can customize the display of product information, including pricing details, recommendations, image settings, and the visibility of rating and review sections.
Detail About Every Product Display Page Section:
Let's break down each section of the Product Display Page and explore its functionality:
Including Taxes On All Products: This toggle option allows you to display or hide taxes in the pricing information on the Product Display Page. If selected, the price will include taxes, indicated as "(Inc.Tax)" after the price.
Product Recommendations Grid: Toggle this option to display or hide a horizontal list of recommended products on the Product Display Page, providing users with additional product suggestions.
Image Size: Choose from portrait, square, or landscape options to adjust the shape of the image box on the Product Display Page. The height will be adjusted accordingly with a fixed width based on your selection.
a. Square b. Landscape c. Portrait
Image Fill Mode: Select from fit, fill, or scale fill options to adjust the image content scale on the Product Display Page, ensuring optimal image display based on your preference.
Fill: This option fills the image box completely, stretching or compressing the image as necessary to cover both the x-axis and y-axis entirely. This means that the image might be distorted if its aspect ratio doesn't match the dimensions of the image box.
Fit: With this option, the image will fill the image box while maintaining its original aspect ratio. The entire image will be visible within the image box, either horizontally or vertically, with the remaining dimension adjusted to fit accordingly.
Scale Fit: This mode scales the image to fit the image box while maintaining its aspect ratio. If the image's aspect ratio doesn't match the image box's dimensions, the image may be cropped to ensure it fits within the box without distortion, while still preserving its original proportions.
a. Fill b. Fit c. Scale Fit
Pay Later Options: Customize pay-later options for users, including toggle activation, number of installments, minimum amount for availability, and title format for pay-later offers. Click "Save Changes" to apply these pay-later settings.
Certainly! Here are all the steps for configuring the Pay Later option and hiding/unhiding tabs:
Choose Pay Later Service Company: Navigate to the left sidebar and select the desired Pay Later service company from the available options. This selection will determine the configuration settings for the chosen service.
Toggle Pay Later Option: Toggle the Pay Later option to activate or deactivate it based on your preference. This enables or disables the pay later functionality for users browsing the Product Display Page. Additionally, this toggle may also control the visibility of the pay later feature itself, ensuring that it is displayed only when activated. Ensure to check if activating or deactivating the pay later option also affects the visibility of any tabs on the Product Display Page.
Enter Number of Installments: Specify the number of installments users can choose from when opting for the pay later option. This allows users to spread out their payments over multiple installments, making it more convenient for them to purchase products.
Enter Minimum Amount for Pay Later Availability: Define the minimum purchase amount required for users to be eligible for the pay later option. This ensures that pay later is only available for purchases that meet the specified threshold.
Title for Pay Later: Customize the title format for the pay later offer. Use the placeholder "{{amount}}" to dynamically insert the product price, and specify the number of installments for the interest-free payments. For example, the title format could be "{{amount}} x (number of installments) interest-free payments".
Save Changes: Click the "Save Changes" button to apply the configured pay later settings. This ensures that the changes made to the pay later configuration are saved and implemented.
Save Changes in Setting Page: Once you have configured the pay later options, remember to click "Save Changes" in the settings page to finalize and save all the changes made to the configuration settings.
Show Tabs: Define tabs with custom names and URLs to deep-link to various sections within your app or external web pages. Tabs can link to app pages, collection pages, blogs, or web pages, providing users with easy navigation options.
Here are the steps to add tabs to your Product Display Page:
Enter Tab Name: Provide a name for the tab you wish to add. This name will be displayed to users on the Product Display Page, indicating the content or functionality associated with the tab.
Enter Tab URL: Specify the URL for the tab. The URL can link to various destinations, including collections, web links, or specific app pages. Ensure to enter the correct URL format based on the destination type (collection, web link, or app page).
Click Save: After entering the tab name and URL, click the "Save" button to add the tab to your Product Display Page. This action ensures that the tab is saved and included in the page's navigation menu.
Save Changes in the Setting Page: Once you've added the desired tabs, remember to click "Save Changes" in the settings page to finalize and save all the changes made to the configuration settings. This step ensures that the newly added tabs are properly saved and implemented in your app.
Conclusion:
Configuring your Product Display Page within your app builder is essential for optimizing the user experience and effectively showcasing your products to potential customers. By understanding and utilizing the available settings, you can create a visually appealing and informative Product Display Page that engages users and drives conversions.
Ready to enhance your Product Display Page? Explore the configuration options available in your app builder and tailor them to fit your unique product offerings and audience preferences.
If you need further information or assistance, feel free to reach out to the Omniful Support Team. We're here to help! Don't hesitate to contact us with any questions or concerns; our support team is ready to assist you with anything you need!