Cards, Product & Collection cards theme settings

How to set up your Product Cards on the Collection page.

Product Cards

Product cards are used all over the store. You can find them in a lot of sections, on your collection page, and in the recommended section of your product page.

In this article:

  1. Where can you find this setting?
  2. Cards Theme Settings 
    1. How many cards are displayed per row
    2. Space between cards
    3. How to use card image fit
  3. Product Cards
    1. Show a product gallery instead of a single image
    2. Displaying the secondary product image on hover
    3. Text alignment
    4. Display the brand name of the product
    5. Show review rating stars
  4. Collection Cards


Where can you find this setting?

To access the Product & Collection cards settings, go to your Theme settings > Cards, Product Cards, Collection Cards.

Cards Settings

Cards theme settings

How many cards are displayed per row (Desktop/Mobile)  

You can change how many cards to display in a row.

How many cards per row

Space between Cards

This setting helps you adjust the spacing between the product cards.

space between cards

How to use Card Image Fit 

We offer this setting to help you in fitting the images accurately. You may face trouble in fitting the image of your product on the card. When your image doesn't fit the available card's ratio setting, you can choose to alter your images. You are either required to:  

  • Preserve Ratio:​ We offer this setting for you to display the entire image in the dimension it initially has. However, some amount of white/space can appear on the sides of the card.  
  • Adjust the ratio to hide the space:​ If the ratio of the image doesn't match the ratio of the cards, images can be altered to fit the card ratio. The product images are then cropped and adjusted in such a way that it fits the card perfectly well, leaving no white spaces.  

You can select either of the two options to fit your product images in the cards to be displayed properly, and the visitor can determine their choices.  

Product Cards

The theme provides five diverse options for the user to try different settings and check how it looks. The different options provided are: Default(1), Show the Button on Hover(2), Slide the Button on Hover(3), Hide Button(4), Catalog(5).  

Product cards

Show a product gallery instead of a single image

This setting will replace the product card image with a gallery of images, allowing the customers to navigate through the different product pictures.

Show product gallery

Displaying the Secondary Product Image on Hover 

We offer this setting in the latest version of Booster Theme so that you can choose to display an image of the secondary product when the mouse pointer is brought over the image. The user, when placing the pointer over it, the image of the secondary product is displayed.  

Display the secondary image on hover

Text Alignment 

With this setting, you can choose to alter the text's alignment that is placed in the store. 

There are three varied options provided for the user to choose from: Left(1), Center(2), and Right(3). Choose the option that goes well with the design of your store.  

Text alignment

Display the Brand Name of a Product 

You have products listed from different brands. We provide the option of adding the brand names of the respective products. This option allows you to do so. Brand Name is displayed beneath your product's image so that the visitor while scrolling through the options, knows which brand the product belongs to. Type the brand name in the field provided.  

Display the brand name

Show Review Rating Stars 

Consumers often check for a review of the product to know the experience of others. This setting will display the review star rating beneath the product card.  

Display review stars

Collection cards

With this setting, you can easily alter a collection card image you are using in your Shopify store. There are four varied options provided that help you to set one that is highly preferred. These settings will modify the collection cards on the Collection List page.

The four different options provided include Default(1), Show text inside the product card(2), Show button inside when the user hovers(3), and Hide Text(4).  

Collection card type

 


- End of the article -