Product Cards

Configure Volume product cards: hover effects, price position, quick buy, vendor logo, subtitle metafield, and design options like color scheme and grid.

Product card settings are located in (1) Theme settings → Product card and in the (2) section settings where the cards are displayed. This allows you to configure the main settings once, while each section's settings can be fine-tuned for specific needs.

For an overview of the main settings in Theme settings, check out this link: Theme Settings → Product card. Below, we'll go through the section-specific settings.

Hover Behavior

In the dropdown, you can choose from five available options or disable hover effects:

• Image zoom
• Second image
• Second image with zoom in
• Slider
• Autoplay slider

For sliders, you can also configure bullet visibility and autoplay speed (in seconds) for the autoplay slider.

Content Display

Price and Options Position

For Price, you can choose between Top, Bottom, or In line with title.

In the last option, the title will be truncated with an ellipsis if space is insufficient.

Additional Display Options

Decide what should be shown:

• Title (can be truncated character-by-character)
• Product options and linked products – Disable, Show, or Show on hover (for desktop). Settings are separate for mobile and desktop.
• Quick buy
• Rating
• Vendor (learn how to display it as an image below)
• Product Subtitle (requires additional setup, see below)

Vendor Logo

To display the vendor as an image:

1. Go to Content → Files in your Shopify admin.
2. Upload vendor images in .PNG or .SVG format.

Ensure that the uploaded logo file is cropped properly, meaning it does not contain extra space around it. Otherwise, the logo may appear too small.

1. File names should be lowercase with underscores as separators (e.g., new_balance.png for ‘New Balance’), and must exactly match the brand name.

Product Subtitle

To enable the Product Subtitle, follow these steps:

1. Open your Shopify admin.
2. Navigate to Settings → Metafields and metaobjects → Products.
3. Click Add definition.
4. Enter Product subtitle in the Name field and select the Product subtitle option.
5. Click Save.

After completing these steps, you can add content to the Product Subtitle field for each product in your Shopify admin. For more details on Shopify metafields, refer to this page.

Design

The appearance of product cards can be customized through the following settings:

Content Style

Choose between Regular or Small in Theme settings → Product cards. If multiple products are displayed in a row, Small is recommended.

Grid Settings

Each section allows you to choose from three preconfigured grids. Learn more about how grids work here: Grid Settings.

Product Card Color Scheme

The color scheme setting for product cards is found under Color. Learn more how to set up colors.

Outline Display

Enable the Show frame checkbox to add an outline around the product card.