Theme Editor - Listings card

Setting	Default	Description
Background	`#FFFFFF`	Card background fill.
Text	`#111826`	Primary text colour — product name and price.
Text secondary	`#374152`	Supporting text — descriptions and metadata.

Setting

Default

Description

Background

#FFFFFF

Card background fill.

Text

#111826

Primary text colour — product name and price.

Text secondary

#374152

Supporting text — descriptions and metadata.

Setting	Type	Default	Range	Description
Color	Color	`#E4E6EB`	—	Border colour around the card.
Thickness	Slider	0 px	0–8 px	Border width. Default is 0 (no visible border).
Corner radius	Slider	0 px	0–40 px	How rounded the card corners are.

Setting

Type

Default

Range

Description

Color

#E4E6EB

—

Border colour around the card.

Thickness

Slider

0 px

0–8 px

Border width. Default is 0 (no visible border).

Corner radius

Slider

0 px

0–40 px

How rounded the card corners are.

Spacing and alignment

Setting	Type	Default	Range	Description
Card padding	Slider	0 px	0–16 px	Space between the card border and its content.
Text padding	Slider	0 px	0–16 px	Space between the image area and the text content below it.
Content alignment	Toggle	Left	Left / Center / Right	Horizontal alignment of the product name, price, and description text.

Setting	Type	Default	Range	Description
Corner radius	Slider	4 px	0–40 px	How rounded the product image corners are.
Padding	Slider	0 px	0–16 px	Space between the card border and the product image.

Setting

Type

Default

Range

Description

Corner radius

Slider

4 px

0–40 px

How rounded the product image corners are.

Padding

Slider

0 px

0–16 px

Space between the card border and the product image.

CSS variables

:root {
  --storefront-listings-card-background: #FFFFFF;
  --storefront-listings-card-text-color: #111826;
  --storefront-listings-card-text-secondary-color: #374152;
  --storefront-listings-card-border-color: #E4E6EB;
  --storefront-listings-card-border-width: 0px;
  --storefront-listings-card-border-radius: 0px;
  --storefront-listings-card-padding: 0px;
  --storefront-listings-card-content-padding: 0px;
  --storefront-listings-card-content-alignment: left;
  --storefront-listings-card-image-border-radius: 4px;
  --storefront-listings-card-image-padding: 0px;
}

Define the storefront colour palette.

Welcome to TWICE Docs

Navigating in TWICE

Understand the system

Theme Editor - Listings card

Colors

Border

Spacing and alignment

Image

CSS variables

Colors

Layout

​Colors

​Border

​Spacing and alignment

​Image

​CSS variables

​Related

Colors

Layout

Colors

Border

Spacing and alignment

Image

CSS variables

Related