Borders > Product card

There are two important parts of a store, the product page and the product grid. This area of the theme settings allow you to customize how product cards appear inside various grids, like featured collections, collection page, etc.

Design

Media thumbnail

You can start by choosing a media aspect ratio upon all of your product thumbnails will be resized. Choose whatever suits better for your products in order to reduce the amount of cropping you get.

Secondly, you can choose the mouse over animation and whether you want to show a secondary product thumbnail (if available) on hover. Please note that both of these options are not available for touch devices or touch screens.

You can also add a subtle overlay on all product images, option which might be useful for certain kinds of images.

Product caption

We are offering a few options to edit the product caption as well, such as text alignment, size or text style.

Dynamic caption

All product cards can have one line of extra text above or below the title, set up with metafields. It can be used for a product subtitle, an important feature or a temporary discount.

This works with a single line text product metafield that you have to write the reference here.

Product grids design

Because the product grid is an important part of the store, you can edit it's design independent from the main grid design settings. You can hide the borders, remove the inner padding & border or just set up a custom border radius. This allows you to have a different spacing / design from the rest of your website.

Functionality

Quick buy

Borders features a really awesome way of adding products to the cart directly from the product grids. When quick buy is enabled, it will display a little "buy" icon over your product thumbnail (on mouse over for desktop, always visible on mobile), button that has two effects:

• for products without variants, it will simply add an instance of the product to the cart
• for products with variants, it will display a "quick buy card", where the customer can select the exact variant of the product they want to purchase

You can choose the button's horizontal position, it's colors and the variants style.

Product rating

Our theme supports the showing of a custom reviews badge on top of the product thumbnail, if you are using a certain rating app. We offer out of the box support for 7 different review apps.

You don't have to do anything special to display the product ratings here, just install a supported app, select it from the dropdown, gather some reviews and they will show up. There might be a small lag between the writing of a review and the badge display because of caching.

Product badges

Our theme supports two automatic badges:

• sold out (displayed when a product goes out of stock)
• discount badge (displayed when the product's compare price is higher than the product price)

If you want to learn more on how to set up compare prices, read this article: https://help.shopify.com/en/manual/discounts/sales

Other than this, you can set up three unique, custom badges, that are set using product tags. Each one of the three badges takes a tag as input, and if the product has that specific tag, it will appear below the default badges.