skills.rest
vtexdocs
vtexdocsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

faststore-theming

Apply design-token overrides to FastStore storefront themes via custom-theme.scss.

39|9|Updated Mar 16, 2026
Search Tags:#branding#theming#css#tokens#scss#design-tokens#faststore
One-click install
npx skills add https://github.com/vtexdocs/ai-skills --skill faststore-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: faststore-theming
Source: https://github.com/vtexdocs/ai-skills/tree/main/tracks/faststore/skills/faststore-theming
Command: npx skills add https://github.com/vtexdocs/ai-skills --skill faststore-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Theming FastStore storefronts consistently by applying design tokens and SCSS-based theming without touching component behavior.

Core Features & Use Cases

  • Global and local token management for colors, typography, spacing, and borders
  • Safe, token-driven overrides via src/themes/custom-theme.scss
  • Create brand-consistent themes across pages using data-fs-* selectors

Quick Start

Create a custom theme by adding src/themes/custom-theme.scss with token overrides.

Frequently Asked Questions about faststore-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I theme a FastStore storefront using design tokens?▼

Override global and local design tokens in src/themes/custom-theme.scss to manage colors, typography, spacing, and borders. This approach applies brand-consistent visual changes across FastStore pages without altering underlying component behavior.

What is the best way to customize FastStore CSS without changing component logic?▼

The best way to customize FastStore CSS safely is by overriding design tokens in src/themes/custom-theme.scss. Apply visual changes to appearance using data-fs-* selectors and var(--fs-*) tokens to ensure component behavior remains untouched.

How do design tokens work for FastStore theming?▼

Design tokens for FastStore theming work by mapping visual properties like color and spacing to CSS custom properties. You apply these var(--fs-*) tokens through data-fs-* selectors to globally enforce brand styling standards across the storefront.

Can I use SCSS to override global and local tokens in a FastStore theme?▼

Yes, you can use SCSS to override both global and local tokens in a FastStore theme. Place your SCSS token overrides in src/themes/custom-theme.scss to define design properties for colors, typography, and spacing safely.

Why should I use design tokens instead of writing custom CSS for FastStore components?▼

Use design tokens instead of custom CSS to maintain a consistent design system and avoid breaking component behavior. Token-driven overrides in src/themes/ conform to FastStore theming standards, ensuring safe and manageable visual updates.

Do I need to modify component files to change FastStore typography and spacing?▼

No, you do not need to modify component files to change typography and spacing. FastStore separates visual design from behavior, allowing you to apply token overrides in src/themes/custom-theme.scss to adjust these properties globally.

Related Skills

Explore More Design & Creative Skills→
exilonXexilonX

faststore-storefront

Guide React and VTEX FastStore storefront development with CMS schema generation.

Community
Intermediate
taurgistaurgis
27

sfcc-sfra-scss

Organize SFRA SCSS styling with canonical directory structure and BEM naming.

Community
Advanced
Paint-a-FarmPaint-a-Farm
12

fs25-fs-utils

Decompile Luau and LuaJIT l64 scripts and unpack GAR/DLC archives.

Official
Intermediate
BrandondaymdrBrandondaymdr
1

cheersworthy-dawn

Configure Shopify's Dawn theme with custom Liquid sections and CSS overrides.

Community
Advanced