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.