skills.rest
vtex
vtexOFFICIAL
Explore all skills by this author →
Website𝕏@VTEXcommerceGitHub

faststore-theming

Implement FastStore theming with design tokens and data attributes.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to choose between design tokens and component overrides when theming FastStore storefronts, leading to inconsistent visuals and maintenance headaches.

Core Features & Use Cases

  • Provides a decision framework for when to apply global vs local tokens, Sass variables, CSS custom properties, and Brandless architecture.
  • Enforces token-based theming with data attributes to reliably target components and avoid brittle selectors.
  • Outlines how to structure src/themes/ and how to implement brand identity across multiple storefronts.

Quick Start

Create a custom theme entry in src/themes/custom-theme.scss and start applying token-based changes using :root and data attributes.

Frequently Asked Questions about faststore-theming

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

FAQPage Schema
How do I create a custom theme for a FastStore storefront?▼

FastStore theming uses design tokens vs overrides to style storefronts. It applies token-based CSS customization across src/themes using data attributes to target components, preventing brittle selectors and maintaining visual consistency.

When should I use design tokens instead of component overrides in FastStore?▼

Use design tokens for global theming and Sass variables for local scopes, reserving component overrides for specific customizations. This decision framework prevents inconsistent visuals and maintenance headaches across multiple storefronts.

How do I target FastStore components with CSS without using brittle selectors?▼

Target FastStore components using data attributes instead of brittle CSS selectors. This approach ensures reliable token-based overrides and maintains a safe design token architecture for your storefront customization.

Does FastStore theming support CSS custom properties and Sass variables?▼

Yes, FastStore theming supports CSS custom properties and Sass variables. The architecture applies these design tokens across global and local scopes within src/themes to implement brand identity reliably.

What is the best way to structure theme files for a FastStore project?▼

The best way to structure FastStore theme files is placing them under src/themes. This directory organization supports token management, brandless architecture, and reliable data attribute targeting for multiple storefronts.

Can I use inline styles to customize components in a FastStore custom theme?▼

No, FastStore custom themes require token-based overrides and explicitly avoid inline styles. You must use CSS custom properties and data attributes within src/themes to ensure safe and maintainable storefront styling.

Related Skills

Explore More Design & Creative Skills→
exilonXexilonX

faststore-storefront

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

Community
Intermediate
gil00pitagil00pita

css-variables

Define CSS custom properties in :root for centralized theming and runtime customization.

Community
Advanced
Prathmesh2000Prathmesh2000
1

sass-styling

Create scalable Sass/SCSS architectures with 7-1 pattern, BEM, and design tokens.

Community
Advanced
ProjectEuropaProjectEuropa
4

e2e-refactor

Refactor E2E tests to Page Object Model patterns and semantic locators.

Community
Advanced