Choose from multiple product card variations to make your Treez Ecommerce site more your own. Below, learn more about what each style looks like, how to enable product card variations for your site, and how to set up your preferred style.
Overview of Product Card Styles
There are currently four unique product card styles to choose from for your Treez Ecommerce website. Check out what each option looks like in both desktop and mobile views below.
Default Product Card
This is the style that appears on your site if you do nothing to customize your product cards. On desktop, the Add to Cart link appears as a hyperlink at the bottom left of the product card. On mobile the link is centered.
Desktop view:
Mobile view:
Product Card with Small Btn (Button)
This style has a small add-to-cart button in the lower right corner, with a basket icon instead of text. The desktop and mobile versions are nearly identical.
Desktop view:
Mobile view:
Product Card with Highlighted
This style has a standard add-to-cart button at the bottom, with Add to Cart text. When you hover over the card with your mouse, the button is highlighted. The desktop and mobile versions are nearly identical.
Desktop view:
Mobile view:
Product Card with Btn (Button) Hover
This style looks a bit different on desktop vs. mobile:
On desktop, the Add to Cart button appears at the bottom of the product image only when you hover over the card.
On mobile, the Add to Cart button always appears at the bottom of the card, since you typically can't hover on mobile.
Desktop view:
Mobile view:
How to Enable Product Card Variations
Login to your Treez Ecommerce CMS (content management system), Prismic, and navigate to the main list of published pages and modules.
Find and open the Product module.
On the Product module page, find and click the Add Slice button on the left side.
You should then see the Product Card slices that are available to use.
Choose your preferred slice style by clicking on it.
Back on the Product module page, make sure the new Product Card slice is toggled On (Active should be true).
In the upper right corner, click Save and then Publish.
Voila! You've updated your product card style and enabled yourself to change to another variation as desired.
How to Change Product Card Styles
From the Product module editing page, find the Product Card slice on the left side. Click the button with the three dots, then click Change variation.
Click on the product card style you want to change to.
Back on the Product module page, make sure the new Product Card slice is toggled On (Active should be true).
In the upper right corner, click Save to save your changes.
Then click Publish to publish your changes to your site.
Voila! You've updated your product card style. Refresh your site to see how it all looks.
How to edit BOGO Discount Title on Product Cards
Login to your Treez Ecommerce CMS (content management system), Prismic, and navigate to the main list of published pages and modules.
Find and open the Product module.
On the Product module page, find and click the Bogo Badge Label.
Edit the "BOGO Badge Label" within the "product" page in Prismic.
The 'BOGO' title can be altered to display custom text instead, such as "Bundle Deal' or "On Sale" in prismic. This let's users customize what verbiage is displayed on the tile across all GET products with a BOGO discount.