The product page template consists of several essential components that give a look at the product details. For example, the product's brands, similar products, and product tags components.In this article, we will explore the essential components for every product template page.Following is the location of the header components:Following are the essential components which can be used within product page template:
Donation Progress Bar#
The donation progress bar is used to show a donation's amount up to date, as well as how much time is left in which a user can contribute towards the fundraising campaign.Example#
Variables#
Usage#
The donation object contains all of the donation related values and messages. For example;product.donation.collected_amount: shows the collected amount up to date.
product.donation.target_amount: shows the targeted amount to be collected.
product.donation.target_percent: shows the percentage of the targeted amount.
Offer#
This component shows a slider of products that have special offers. In this way, the customer is able to check all of the offers related to the currently being viewed product in one place.Example#
Variables#
Usage#
For this component, the main variable is the offer object. Using this component, the developer can show both offer.name and offer.description. It contains a list of the related products that include offers. Using for-loop statement such as {% for product in offer.products %} , the list of the offered products can be retrieved and displayed using a slider with cards, for example.
Similar Products#
This component displays a list of similar and related products to the currently beviewed product. This is to assist the customers in discovering and buying products that best meet their needs. Showing similar products helps to find complementary products to the ones the customer is viewing, Cross-selling, or offer a better and more expensive alternative product, Upsells.Example#
Variables#
Usage#
In order to display the list of similar products, a for-loop is used to iterate through the products objects, and then display the information for each product in the list. Modified at 2024-04-25 08:26:07
