Skip to content

Cards

This guide describes the Theme settings > Cards menu options. Use the settings to specify how cards are displayed throughout your store. Refer to Shopify help: Cards

In the previous video, a Comparison table section is displayed over a Card on a store's homepage. In Theme settings > Cards, the Shadow direction dropdown sets the direction of the shadow effect applied to the card. In the video, the direction of the card's shadow is changed from Bottom to Bottom right.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings

Set up cards

To set up cards:

  1. Go to Theme settings > Cards.

    The Cards menu in Theme setting.

  2. Select a setting described in the following table.

Setting nameDescription
Border radiusUse the Border radius dropdown to set the shape of the card borders to None (off), Rounded small, Rounded medium, or Rounded large.
Border > WidthAdjust the Width slider to set a width for the card borders. The slider ranges from 0px to 5px (pixels).
Border > ColorSelect the Color radio buttons to set the card borders to use the same color as the color scheme's Text, Accent 1 or Accent 2 color.
Shadow > SizeAdjust the Size slider to set a size for the card shadow effect. The slider ranges from 0px to 20px (pixels).
Shadow > StyleUse the Style dropdown to set the style for the card shadow effect. The dropdown options are:
  • Full color
  • Diagonal lines
  • Zig zag
  • Waves
  • Square dots
  • Circle dots
Shadow > ColorUse the Color dropdown to set a color for the card shadow effect. Set the shadow effect to Transparent, set it to use the same color as the Card, or to the current color scheme's Text, Accent 1, Accent 2 or Gradient color.
Shadow > Shadow directionUse the Shadow direction dropdown to set a position for the card shadow effect. The dropdown options are:
  • Bottom right
  • Bottom
  • Bottom left
  • Top right
  • Top
  • Top left
Shadow > Show border on shadowSelect the checkbox Show border on shadow to show/hide borders around the card shadow effect. The card border color and width settings are applied to the shadow effect's borders.