Seventh > Cards > Product card

Product Card

The Product card block displays products using product-specific inner blocks like thumbnail, title, price, swatches, vendor, etc..

What it does

This block displays a product card with:

Selected product content
Product inner blocks (thumbnail, title, price, etc.)
Default or custom card styling

Block settings explained

Product

Selects which product to display.

Card style

Default uses the theme’s standard product card styling. You can set the default card style for products under Theme settings > Product card.
Custom enables you to overwrite the card style for this particular block / section.

In order to have a consistent design across your store, we've grouped generic product card settings, such as quick buy options, thumbnail related style and more, under Theme settings > product card.

Product card blocks

Color swatches & size

This block displays color swatches and the size variant from the selected product.
These can be set up under Theme settings > Color swatches & size options.

Product SKU / barcode

This block displays the SKU / ISBN information that is attached to your product.
More info about SKU's on Shopify's documentation.

Product badges

Displays product badges as they are set up in Theme Settings > Product badges.
Product badges can also be displayed on the product thumbnail, however, you can also show them independently, with this custom block.

Product price

Displays product price. You can chose to show tax info or Shop Pay installments terms.
You can also change the typography style of this block. If product has unit pricing or is on sale, all of this information will show up here. More info on product price on Shopify's documentation.

Product rating

Displays product rating. This block only works if you have a Reviews App that is fully compatible with Shopify metafields. Some apps that we've tested and work out of the box are: Judge.me, etc.

You can add ratings from other apps that have their custom widgets as app blocks as well, however, we can't offer support or a specific design for these.

Product siblings

Displays a set of products linked to this product, allowing you to create combined product listings. By default, you get a product list selector that works with a static product list. But this can also be connected to a product list metafield in order to show a dynamic (unique) list of products for each product.

How to setup product siblings using metafields

Create a "product list" type metafield, under your store's Settings > Metafields and metaobjects > Products
For each product that needs to have "siblings", select all the products that are connected or considered variants of the main product, including the product you are on.
When adding the "Product siblings" block, choose the metafield you've created and which contains all the adjacent products.

TIP: Put the sibling products in the same order for all products, for a true "variants" feel.

The design of this block can be set under Theme settings > Color swatches & size options.

Product tax info

Displays product tax info. This block also displays a link to your store's shipping policy, if this is created in your store. More info on Shopify's documentation.
You can also change the typography style of this block.

Product title

Displays the product title (as a link to the selected product).
You can also change the typography style of this block and set a custom HTML tag for SEO purposes.

Product vendor

Displays the product vendor.
You can also change the typography style of this block.

Common use cases

This is a block that can be added independently inside different sections, but it also has it's own dedicated sections, such as:

Featured collection

Allows you to show featured products from a certain collection or a selected product list. Find out more here.

Collection (page) grid

This block is also found inside collection grids, which are dedicated pages to display your collections. Find out more here.

Surface additional (related) products on product pages. These are handled automatically by Shopify and can be configured using the Shopify Search & Discovery app.