Introduction:
The Product Card is a fundamental element within your app, serving as the visual representation of individual products in a horizontal or vertical product list. Each Product Card provides users with essential information about the product, including media, title, variant count, price, offers, original slashed price, and an option to add the product to their cart. In this guide, we'll explore the process of configuring your Product Card using your app builder. We'll delve into the various settings available and how they can enhance the presentation of your products to users.
Understanding the Product Card:
Before we delve into configuration, let's understand the significance of the Product Card. It serves as a condensed snapshot of a product, offering users a quick overview of its key details. Product Cards play a crucial role in enticing users to explore individual products further and make informed purchasing decisions.
How Product Card Looks in Your App:
In your app builder, the Product Card is designed to provide users with a visually appealing and informative representation of your products. Each Product Card may feature multiple images in a carousel format, a variant count indicator, offer details (such as discounts or sales), the original undiscounted price with a slashed text UI for comparison, and an "Add to Cart" button. Additionally, you can customize the shape and content scale of the product images based on your preferences.
What Will Change:
Configuring your Product Card allows you to tailor the presentation of your products to align with your brand identity and user preferences. By toggling various options, you can customize the display of product information, including media, variant count, offers, original prices, and the visibility of the "Add to Cart" button.
Detail About Every Product Card Section:
Let's break down each section of the Product Card and explore its functionality:
Show Multiple Images: Toggle this option to display multiple images of the product in a carousel format on the Product Card. If not selected, only a single image will be shown.
Show Variant Count: Toggle this option to display the number of variants available for the product. If deselected, the variant count will be hidden.
Show Offer (Ex: 10% Off): Toggle this option to display any ongoing offers or discounts for the product. If deselected, offers or discounts will be hidden.
Show Compare At Price: Toggle this option to display the original undiscounted price of the product with a slashed text UI for comparison. If deselected, the comparison at price will be hidden.
Show Add To Cart Button: Toggle this option to display the "Add to Cart" button on the Product Card. If deselected, the button will be hidden.
Image Size: Choose from portrait, square, or landscape options to customize the shape of the product images on the Product Card. This allows you to ensure consistency and aesthetic appeal across your product listings.
a. Square b. Landscape c. Portrait
.
Image Fill Mode: Select from fit, fill, or scale fill options to adjust the content scale of the product images on the Product Card. This ensures optimal image display based on your preferred visual presentation.
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
Conclusion:
Configuring your Product Card within your app builder is essential for creating an engaging and visually appealing shopping experience for your users. By understanding and utilizing the available settings, you can customize the presentation of your products to captivate users' attention and drive conversions.
Ready to enhance your Product Card? Explore the configuration options available in your app builder and tailor them to fit your unique product offerings and brand aesthetics.
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!