Custom CSS in Flex, Turbo, and Superstore

Custom CSS allows you to apply your own styling to specific parts of your theme without editing the main stylesheet directly. This can be useful for making smaller design adjustments such as changing spacing, borders, text color, and other visual details.

Flex, Turbo, and Superstore all support Custom CSS, but the feature works a little differently in each theme.

• In Flex and Turbo, Custom CSS is available in sections and blocks that include an Advanced settings area.
• In Superstore, Custom CSS is available in Theme settings under Custom styles and scripts.

Where can I find the Custom CSS feature?

Flex and Turbo

In Flex and Turbo, the Custom CSS feature is available within sections or blocks that include an Advanced area in the settings.

These settings typically include:

• CSS Class
• Custom CSS

Superstore

In Superstore, Custom CSS is located in Theme settings > Custom styles and scripts.

Unlike Flex and Turbo, this is a more general CSS area and is not tied to specific section-level settings.

What does the Custom CSS feature control?

The CSS Class and Custom CSS fields only apply to the specific section or block where they are added.

For example, if you add an Image with text overlay section and use the CSS Class and Custom CSS settings within that section, the styles will apply only to that section.

This allows you to make more targeted styling changes without affecting the rest of the theme.

What type of CSS is supported?

The Custom CSS field accepts basic CSS only.

It does not support:

• SCSS
• SASS
• media queries
• mixins

For more advanced styling or responsive customizations, you may need to edit the theme code directly.

Ways to use the Custom CSS feature

There are several ways to use Custom CSS in Flex, Turbo, and Superstore:

• Create a new CSS class and apply custom styles to it
• Target existing elements within a section
• Reuse styles from your styles.css.liquid file
• Hide sections on desktop or mobile

Create a new CSS class and add Custom CSS

You can create a new class by entering a name in the CSS Class field.

Then, in the Custom CSS field, add the CSS selector and declarations you want to apply.

Example: Add a border and padding to a section

In this example, a border is added around the entire Image with Text section, along with padding inside the border.

CSS Class

 image-with-text-border

Custom CSS

 .image-with-text-border {
  border: 10px solid black;
  padding: 50px;
}

Target existing elements within a section

You can also leave the CSS Class field blank and use only the Custom CSS field to target existing elements inside the section.

This is useful when you only want to style a specific element rather than the entire section.

Example: Change the paragraph text color

In this example, only the body text inside the section is targeted:

Custom CSS

p {
  color: #006400;
}

Example: Target the second image in a section

In this example, the second image column is targeted to add a border and padding:

Custom CSS

.image-with-text__image-column:nth-child(2) {
  border: 10px solid pink;
  padding: 20px;
}

Reuse styles from styles.css.liquid

If you have already created custom styles in your styles.css.liquid file under Themes > Edit code > Assets, you can reuse those styles by adding the class name to the CSS Class field.

You do not need to add anything to the Custom CSS field unless you want to add additional styling there as well.

Example

If your styles.css.liquid file includes a class such as:

.light-gradient-background

You can enter that class name in the CSS Class field to apply those styles to the section.

In the CSS Class field, this custom class name gets added in and the styles get applied to the section.

Hide sections on desktop or mobile

Custom CSS can also be used to hide sections on desktop or mobile devices.

For more information, please refer to the article on using Custom CSS to hide sections on desktop and mobile.

When should I use Custom CSS?

Custom CSS is best for smaller visual styling changes, such as:

• adjusting spacing or padding
• adding borders
• changing text color
• styling specific section elements
• applying section-specific design updates

For larger structural or functional changes, editing the theme code may be required.

FAQ

Do Flex, Turbo, and Superstore support Custom CSS?

• Yes. All three themes support Custom CSS, although the feature is implemented differently in each theme.

Where do I find Custom CSS in Flex and Turbo?

• In Flex and Turbo, Custom CSS is available in sections or blocks that include an Advanced settings area.

Where do I find Custom CSS in Superstore?

• In Superstore, Custom CSS is located in Theme settings > Custom styles and scripts.

Does Custom CSS apply to the entire theme?

• Not usually. In Flex and Turbo, the CSS Class and Custom CSS fields apply only to the specific section or block where they are added.

Can I use SCSS, SASS, or media queries in the Custom CSS field?

• No. The Custom CSS field accepts basic CSS only.

Can I use a class from styles.css.liquid?

• Yes. If you already created a custom class in styles.css.liquid, you can add that class name to the CSS Class field and apply those styles to a section.