Set up layout of product cards

In this article, we will not only discuss various aspects of product cards for the main product listing but also explore how to set up related product cards for the "Similar and Related Products" section.

On This Page

• Product Card Layout
• Common Information
• Title Position
• Price
• Conversion Button
• Stock Availability
• First Dimension (Color)
• Second Dimension (Size)
• Indication Layout
• Indication Count

Before Start

To begin customizing your product cards, you need to navigate to Settings > Visual settings > Products Cardson your webshop's portal. Here, you'll find a host of options to choose from.

Main Cards are the central elements of the product listing page, providing comprehensive information about individual products and aiming to directly drive conversions.

Related Product Cards, on the other hand, serve as supplementary elements in the "Similar and Related Products" section, offering alternative options that complement the main product and support the user's exploration journey. They have similar settings as Main Product Cards menu. 

Related Products Cards are respocible for card for Similar and Related products. Like on example below

Product Card Layout

The layout of your product card can significantly impact how users perceive your products. This applies not only to the main product listing but also to the related products section. There are two primary options to consider:

This traditional layout features a clear and structured presentation of product information, making it easy for users to quickly understand the product's features and benefits.

For those who prefer a minimalist approach, the compact layout reduces the amount of visual clutter, showcasing only the most vital details of the product.

Common Information

Just like the main product cards, certain pieces of information are commonly displayed on related product cards to provide users with essential details to make informed decisions. These include:

• Sales Label: Highlighting ongoing sales or discounts on related product cards can create a sense of urgency and encourage customers to explore alternative options.

• Original Price If Discounted: Displaying the original price alongside the discounted price on related product cards provides transparency and allows users to compare the deals.

Title Position

The positioning of the product title is just as important on related product cards as it is on the main product cards.Consider these options:

Placing the product title under the product image on related product cards maintains consistency and keeps the focus on the visual representation of the item.

Positioning the title above the image can catch the user's attention first and create a strong association between the title and the related product.

Price

As with the main product cards, pricing information is crucial on related product cards. Here are the available options for displaying prices:

• Show Minimum Price: Display the lowest available price for the related product.

• Show Maximum Price: Display the highest available price for related products with price ranges.

• Show Range of Prices: If the related products have different pricing tiers or options, showing a price range can give customers an idea of the price points available.

• Price Not Visible: If you choose not to display prices for the main product cards, the same approach can be applied to related product cards for consistency.

Conversion Button

The conversion button on related product cards serves the same purpose as on the main product cards. Consider these options:

• Show with Text "BUY": A straightforward and direct CTA that urges users to make a purchase.

• Show with Text "MORE": If you want users to explore more details before proceeding, this CTA can direct them to the product page for further information.

• Don't Show: If your related product cards are purely informative and not meant for direct conversions, you might choose not to display a conversion button.

Stock Availability

Clear communication regarding stock availability is essential on related product cards to avoid customer disappointment. Consider these options:

• Simple Info Only: A concise message, such as "In Stock" or "Out of Stock," conveys the availability status.

• Detailed Info: Providing additional information about the number of items left or an estimated restock date can create a sense of urgency for products with limited availability.

• Don't Show: If your e-commerce platform automatically hides out-of-stock related products, you might not need to display stock availability separately on the related product cards.

First Dimension (Color)

For related products with multiple variants, such as different colors or designs, you can decide how to present these options:

• Show All Variants: Display all available color variants of the related product.

• Show Variants on Max Three Rows: Limit the display to three rows of color variants to avoid overwhelming the user with too many choices.

• Show Variants on Max Two Rows: Further simplify the display to a maximum of two rows.

• Show Variants on Max One Row: For a highly streamlined look, show only one row of color variants.

• Don't Show: If your related products do not have color variants, you may choose not to display this section at all.

Second Dimension (Size)

If related products have size variations, consider how to showcase them:

• Show All Variants: Display all available size options for the related product.

• Show Range Min-Max: Instead of displaying every size, show the size range, such as "S - XXL."

• Don't Show: If your related products do not come in different sizes, this section may not be necessary.

Indication Layout

Using icons and tags can streamline product information, making it easy for customers to identify key features and categories at a glance. These visual cues can simplify complex information and enhance the page's aesthetics.

1. Icons - small graphical symbols that represent an object, function, or concept. They are used in digital interfaces to convey information visually without using text.
2. Tags - labels used to categorize or highlight specific pieces of information. They are often textual but can be accompanied by a certain color or symbol to emphasize their meaning.

The example with FIVE TAGS

Indication Count

Defining the number of icons or tags to display for each product helps balance the need for information and clarity. Too many icons or tags can overwhelm a customer, while too few might not adequately represent the product. Five is maximum.

You can use not only default layout, but customize them as you need in External Scripts folder in TronShop Portal. Asked your IT manager to change it. Read more about it in the article.

If You don't have IT manager or You need other help with customization, just Contact us to Customize your shop elements. Below you can find examples of possible Customization.