Cards

Theme settings - Cards

The Cards settings allow you to customize how products, collections, and blogs are displayed within their respective sections. Adjust fonts, content alignment, hover effects, and additional elements to enhance user experience and maintain a cohesive design.

1. Product cards

Customize the display of individual product cards in sections like Featured collection, Collection tabs, Shop the look, Product grid, etc.

• Content alignment: Adjust the alignment of product content, including title, price, and description: Left, Center, Right.

• Heading font: Choose whether the product title adopts the font style from the Heading or Body typography settings.

• Image hover effect: Define the effect applied when users hover over product images:

  • None: Zoom-in effect applied to the product image.

  • Show second image: Displays the second product image when hovered.

• Show image border: Adds a border around the product media for a framed appearance.

• Show short description: Displays a short product description below the product title on product cards. The short description is managed via metafields.

How to add a short description?

Short descriptions enhance product cards by giving concise, relevant details, improving discoverability.

Step 1: Create a custom metafield:

• From your Shopify admin > Settings > Metafields and metaobjects.

• Select Products from the options > Click Add definition.

• Enter Name your field, for example, "Short description" or "Product summary".

• Enter Namespace and key: custom.short_description

Note: The Namespace and key must be exactly custom.short_description for the short description to appear on product cards.

• Set the Type to Multiline text or Rich text so you can enter a description.

• Click Save the new metafield definition.

Step 2: Add the metafield to the product:

• From your Shopify admin, navigate to Products, and select a product.

• Scroll to the bottom of the product page to find Product metafileds, select your new metafield.

• Enter your short description in the metafield.

• Click Save.

Step 3: Enable Show short description in Product cards in the theme editor.

2. Collection cards

Control the appearance of collection cards in Collection list section and on the Collections page.

• Heading size: Adjust the font size of the collection title.

• Content position: Define whether the collection content appears:

  • Overlay image: Displayed on top of the collection image with a semi-transparent background for readability.

  • Below image: Positioned under the collection image.

• Content alignment: Adjust the alignment of the collection title and product count: Left, Center or Right.

• Show product counts: If checked, displays the number of products within the collection under the collection title.

3. Blog cards

Blog cards are used in the Blog posts section and on the Blog page to highlight posts attractively.

• Heading size: Adjust the font size of the blog title.

• Content alignment: Set the alignment of blog content, including title, date, author, and excerpt.

• Show author: Displays the author's name below the blog title.

• Show date: Shows the published date of the blog post.

• Show excerpt: Displays a summary of the blog content provided by the author. Ideal for enticing readers with a brief overview of the blog post.

• Show "Read more" button: Adds a "Read more" button beneath the post. Clicking it directs users to the full blog content.