Colors

Configure color schemes, badges, sliders, carousels and the global page background — all from one panel.

The Colors category controls every color used across Cartiafy: color schemes that sections inherit, product badges, slider overlays, quick-view buttons, and the Instagram CTA gradient. Configure these once and the entire storefront follows.

Theme editor → gear icon (⚙) at bottom-left → Colors.

Up to 6 reusable color schemes. Every scheme defines: Background, Background gradient (optional, overrides solid background), Text, Button background, Button text, Secondary button text, Shadow, Border, Border hover, and Icons. Sections pick one scheme to color all their elements consistently.

Card background, Card text, Card button background, Card button text, Card border, Regular price and Compare at price (crossed-out). Together they style every product card on the storefront.

Button pay background and Button pay text — used by the prominent Buy now / Pay CTA inside product cards and the buy-button snippet.

Background variant, Text variant and Text variant active — color of the variant pills (sizes, colors, materials) inside product cards and the product page.

Dots indicator active, Arrow background, Arrow icon color, Overlay color (gradient behind slider text), Slider text color, and Slider text shadow opacity (0–80%).

Each badge has a background + text color: Popular (best-seller green), Sale (limited-offer red), Discount (Save X%), New, Bestseller, Featured, Limited, Hot, and Diagonal (corner sale ribbon). The Badge border radius (0–50 px) controls the pill shape.

Pill-shaped CTA shown on hover over product card images. Quick view button background + Quick view button text (also drives border & shadow).

Gradient start color, Gradient end color, and Hover text color — drive the gradient border and hover state of the Instagram follow CTA.

Page background scheme — pick which color scheme paints the <body> behind every section. Default: scheme-1.

Keep text vs background contrast ≥ 4.5:1 for body and ≥ 3:1 for large text or icons (Shopify Theme Store requirement). Verify with the WebAIM Contrast Checker.