Appearance
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:
Go to Theme settings > Cards.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Border radius | Use the Border radius dropdown to set the shape of the card borders to None (off), Rounded small, Rounded medium, or Rounded large. |
| Border > Width | Adjust the Width slider to set a width for the card borders. The slider ranges from 0px to 5px (pixels). |
| Border > Color | Select 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 > Size | Adjust the Size slider to set a size for the card shadow effect. The slider ranges from 0px to 20px (pixels). |
| Shadow > Style | Use the Style dropdown to set the style for the card shadow effect. The dropdown options are:
|
| Shadow > Color | Use 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 direction | Use the Shadow direction dropdown to set a position for the card shadow effect. The dropdown options are:
|
| Shadow > Show border on shadow | Select 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. |