Using Custom CSS Within the Shopify Theme Editor

Using Custom CSS Within the Shopify Theme Editor


Supported Versions: The details shared in this article apply to the updated version of eComm Performance.



Using the Custom CSS Feature

Within the Theme Editor (Customize), the eComm Performance theme allows you to add components and sections throughout your site with your own Custom CSS. This is a helpful took to tweak the section designs a little bit. You can create your own CSS to customize your site once you are comfortable with the CSS feature.

When you see this in the "Advanced" area of the theme editor, you will be aware that custom CSS is available.



These two fields will only apply to the element that the fields are found in. For example, if you add an "Image with Text Overlay" area and use the CSS Class and Custom CSS in the section settings, it will only show up in that specific setting.

Please note: The Custom CSS field does not accept SCSS/SASS or media queries and mixins. 

How does the Custom CSS Feature work?

There are various ways that you can make use of the advanced CSS feature.

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

You can create your own CSS Class by entering it in the "CSS Class" field. In the "Custom CSS" field, you can write your CSS by adding in the class selector with declarations to apply the styles.

Example 1

In this example, a black border was created around the entire Image with Text section. There was 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; }
 

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

You also have the option to utilize the "Custom CSS" field to highlight other elements within the section and apply different styles. For example, if you wanted to make the text's color within a section different, you can target the <p> area.

Example 1

In this example, the body text in the "Who is Shop Style design?" section is targeted in the "Custom CSS" field:


Custom CSS: 
p {color: #006400; }
 
Example 2

In this example, the Customer Testimonial section is being used in the 'Custom CSS' field to create a border with padding. The 'CSS Class' field is not used: 



Custom CSS
{ border: 10px solid pink; padding: 20px; }
 

3. Borrowing custom styles from your styles.scss.liquid file

If you've created any customized styles in your styles.scss.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 selected section. Unless you want to add more CSS, you do not need to add anything in the "Custom CSS" field!

Example 1

This example shows that a custom style has been created in the styles.css.liquid file called light-gradient-background:

 
This custom class name gets added into the "CSS Class" field, and the styles get applied to the section:

 

4. An easy way to hide sections on desktop/mobile

Take a look at this article, which talks about using the Custom CSS feature to hide sections on your desktop and mobile.

    • Related Articles

    • Facebook Pixel Event Tracking and the SSD Theme

      Tracking Sales (conversions) using the Facebook Pixel works in all versions of the SSD theme if you follow these steps from Shopify. Compatibility Notes In situations where your marketing strategy requires detailed page visit tracking we would ...

    • Using the Page Section on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Page Section The eComm Performance theme includes a 'Page' homepage section that has multiple uses. This section allows you to create ...

    • eComm Performance Guide: Custom Contact Page

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Custom Contact Page Template With the release of eComm Performance v6.2.0, not only is there a default contact page template but the ...

    • Using The Recommended Products Function

      Supported Versions: The details shared in this article apply to the most recent version of eComm Performance Adding Recommended Products Within the eComm Performance theme, you have the ability to enable Recommended Products on all product pages. ...

    • Create Additional Templates with the Theme Editor

      The eComm Performance v8  includes more controls to customize templates for everything on your store including blogs, pages, collections, and products. You can customize the default template or you can also create distinct templates to offer separate ...