Custom CSS features in Flex, Turbo, and Superstore

Flex and Turbo include special settings to add your own Custom CSS for sections and other components of the theme. The theme's CSS (Cascading Style Sheet) file controls most of the storefront's styling, so this Custom CSS feature offers more freedom to control specific features and allows more fine-tuned adjustments.

Superstore also features a CSS feature that is more general and less feature-specific.

Where is the Custom CSS Feature Found?

For Flex and Turbo, the Custom CSS is included in sections featuring an Advanced area in the section or block settings.

For Superstore, the Custom CSS is located in the Custom styles and scripts portion of the Theme settings.

What Does This Control?

The CSS Class and Custom CSS fields will only apply to the element that the fields are found in. For example, if you add an Image with text overlay section and use the CSS Class and Custom CSS found within the section settings, it will only apply to that specific section.

The Custom CSS field will only accept basic CSS. It does not accept SCSS/SASS or media queries and mixins

Using the Custom CSS Settings

There are a few different ways that you can make use of the advanced CSS feature.

Create a brand new CSS Class, and add in Custom CSS

Create your own CSS Class simply by entering it in the CSS Class field.

In the Custom CSS field, you can then write your CSS by adding in the class selector with declarations to apply the styles.

Example 1

In this example, a border was added around the entire Image with Text section, with some additional padding between the section content and the border.

CSS Class

image-with-text-border

Custom CSS

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

Target and apply CSS to other elements/selectors in the section

If you like, you can forego the "CSS Class" field and just utilize the "Custom CSS" field to target other elements within the section and apply styles. For example, if you just wanted to change the color of the body text inside a section, you can target the <p>.

Example 1

In this example, only the body text in the Image with Text section is targeted in the "Custom CSS" field:

Custom CSS

 p {color: #006400; }

Example 2

In this example, the second image in the Image with Text section is being targeted in the 'Custom CSS' field to add a border and some padding. The 'CSS Class' field does not get used.

Custom CSS

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

Borrowing custom styles from your styles.css.liquid file

If you've created any custom styles in your styles.css.liquid file (Themes > Edit Code > Assets), you can add that class name to the CSS Class field and it will apply the styles to the section. You do not need to add anything in the Custom CSS field (unless you want to add more CSS).

Example

In this example, a custom style has been added in the styles.css.liquid file called light-gradient-background:

 

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

An easy way to hide sections on desktop/mobile

Check out our article about using the Custom CSS feature to hide sections on desktop/mobile.