⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Styling Pages

FastStore provides the flexibility to use mixins for styling your page sections.

Styling a section

All store content is centered by default using the [data-fs-content] with the @mixin layout-content. To add any customization, as in the examples below, you can add it to your custom-theme.scss file inside the .section class using the desired data-attribute.

ℹ️

If you want to override any layout related mixins, please check Mixins & Breakpoints page.

Content centered + Colored bg

To display a colored background with full width and maintain the content centered, add @include layout-colored to your desired section.

Content centered + Colored bg + Section centered

To add a colored background and centering the .section, add @include layout-colored and @include layout-content to your desired section.

Full width layout

To use your store section's content with a full-width layout you'll need to change its content to include the @mixin layout-content-full.

ℹ️

Our Alert component is the only section that comes with layout-content-full by default.