Theme Editor - Collection card

Setting	Default	Description
Background	`#FFFFFF`	Card background fill.
Border	`#E4E6EB`	Border colour around the card.
Text	`#111826`	Title text colour.
Text secondary	`#374152`	Description text colour.

Setting

Default

Description

Background

#FFFFFF

Card background fill.

Border

#E4E6EB

Border colour around the card.

Text

#111826

Title text colour.

Text secondary

#374152

Description text colour.

Border and spacing

Setting	Type	Default	Range	Description
Border 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.
Card padding	Slider	0 px	0–16 px	Space between the card border and its content.
Content alignment	Toggle	Left	Left / Center / Right	Horizontal alignment of the collection title.

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

Setting

Type

Default

Range

Description

Corner radius

Slider

4 px

0–40 px

How rounded the collection image corners are.

Padding

Slider

0 px

0–16 px

Space between the card border and the image.

CSS variables

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

How collections group listings.

Welcome to TWICE Docs

Navigating in TWICE

Understand the system

Theme Editor - Collection card

Colors

Border and spacing

Image

CSS variables

Listings card

Collections

​Colors

​Border and spacing

​Image

​CSS variables

​Related

Listings card

Collections

Colors

Border and spacing

Image

CSS variables

Related