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
Target and apply CSS to other elements/selectors in the section
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.
Earn extra revenue by referring Turbo, Flex, and Superstore!
You can earn commissions on referred sales of Turbo, Flex, and Superstore when you join our affiliate program in PartnerStack!
Affiliate Program Benefits:
- Earn 15% commissions - Receive up to 15% commission for each sale made through your referral link. This is a fantastic opportunity to generate additional revenue while helping your clients elevate their online presence.
- Exclusive access to our themes -As an affiliate, you'll gain insider access to our top-selling themes, including Turbo, Flex, and Superstore, which are known for their adaptability, robust features, and exceptional design.
- Dedicated support and resources - We provide our affiliates with dedicated support, marketing materials, and all the resources needed to successfully promote our themes.