Custom CSS

Advanced

We do not support code customizations. This guide offers a basic reference for advanced users familiar with HTML and CSS. Always test code changes on a duplicated, unpublished version of your theme. For assistance, we recommend finding a professional developer through Shopify Experts ↗ or Task Husky ↗.

Understanding CSS basics

Your theme uses Cascading Style Sheets (CSS) to define the appearance and layout of your online store. CSS allows you to apply styles (such as colors, position, or size) to elements of your site (such as headings, images, buttons).

Below, we cover the most basic elements of CSS code used to add custom styles. Understanding these basic elements will help you avoid common code errors.

CSS code uses a simple syntax made up of selectors and declarations. Selectors target which elements to style, while declarations apply desired styles to selected elements. Declarations are always contained within curly braces ({}).

.selector-name {
  property: value;
}

Declarations consist of a property and a value, separated by a colon. The property is the aspect of the element that will be styled, such as the color or font size. The value is the specified setting for the property, such as red, #FF0000, or 12px.

To learn more about using CSS, we recommend consulting resources like MDN Web Docs ↗ and W3 School Tutorials.

Using Custom CSS in theme editor

In the theme editor, you can use the Custom CSS setting to apply styles to elements on your site, without needing to edit any theme code files.

You can add custom CSS to your entire theme (in Theme settings) or to individual sections (in Section settings). We recommend using Custom CSS for minor style changes.

Before adding custom code, always duplicate your current theme and use the unpublished theme copy to test your changes.

To find the selector names used in your theme, you will need to use your browser's Inspector tool ↗. There are some limitations to using selectors. See Shopify's guide on Considerations for using custom CSS ↗.

STEPS

In your Shopify Admin:

1. Click Duplicate on your current theme.

2. Click Customize on the duplicated, unpublished theme version.

In your theme editor (Customize):

1. To apply custom styles to your entire theme, go to Theme settings > Advanced. To apply custom styles to individual sections, click on the Section.

   
2. Click to open the Custom CSS tab.

3. Enter or paste the CSS code into the Custom styles box.

4. Click Save.

5. Click Preview to review your changes.

   Use the preview link to further test your changes on multiple browsers and devices.

6. After testing, you can go to your Theme library to Publish the duplicated theme with your changes.

Using custom.css file

While we recommend using the available Custom CSS settings in the theme editor, Stiletto includes a custom.css file in the Styles folder.

Enable useCustomCSS

To import the custom.css file, you need to enable useCustomCSS in the theme-globals.liquid file.

STEPS

1. Open the theme-globals.liquid file in the Snippets folder.

2. Find the useCustomCSS variable and set it to true.

   
   
   
   {% assign useCustomCSS = false %}
   
   

Examples of custom CSS

In the following sections, you'll find examples of custom css that can be used in Stiletto. These examples are provided as case studies to help you learn more about using Custom CSS. We are unable to provide support for code customizations.

The examples below illustrate how you can use custom css to change element colors, font sizes, border shapes, and how to hide elements.

Customizing colors

To change the color of an element using CSS, you can use the color and background-color properties. The color property changes the main element, while the **background-color**property changes the color behind the element.

To set a color value, you can use a hexcode or a default color name. A hexcode is a six-digit code that represents a specific color, and it is preceded by a hash symbol (#). For example, the hexcode for white is #FFFFFF. Default color names, such as "red" or "blue", can also be used.

In the examples below, some declarations include !important;. This is used to override other styles that may be applied to an element. It is generally recommended to use !important sparingly, as it can make your CSS harder to maintain and can lead to unexpected results.

Selected variant chip color

You can add a background color to selected chips to indicate that they are selected. Use the following code and replace the hexcode value #FF0000 with your own.

To change the selected chip color on all product pages, add the following code to the Custom CSS in the Theme settings. To change the selected chip color for some product pages, add the code in the Product overview section settings.

.product__chip.selected {
background-color: #FF0000;
}

Add-to-cart button color

By default, the add-to-cart (ATC) button becomes transparent when Dynamic checkout buttons are enabled. You can use CSS code to revert the add-to-cart button to the original colors or add custom colors.

Note: Using the following code will disable the button hover animation.

To revert the ATC button colors on all product pages, add the following code to the Custom CSS in the Theme settings. To revert the ATC button colors for some product pages, add the code in the Product overview section settings.

.product-form__cart-submit {
    background-color: var(--color-background-button) !important;
    color: var(--color-text-button) !important;
}

You can also add hard-coded colors. Replace the hexcodes (#FF0000) below. Choose colors with sufficient contrast between the text and background to keep your site accessible. Learn more about Accessibility for themes.

.product-form__cart-submit {
  background-color: #FF0000 !important;
  color: #FF0000 !important;
}

Changing font sizes

You can adjust the font size of text elements with the font-size property. Set the value using pixel units to increase or decrease the font size the selected text element.

Keep in mind that using pixel sizes can make your text too small or too large on certain devices with different screen sizes or resolutions. It's important to test your website on various devices and screen sizes to ensure that the font size is readable and easy to navigate for all users.

Product page price size

You can adjust the font size of the price on the product page by using the selectors .product__price and .money. Change the pixel size (20px) to the size you want.

To change the price size on all product pages, add the following code to the Custom CSS in the Theme settings. To change the price size on some product pages, add the code in the Product overview section settings.

.product__price,.money {font-size: 20px;}

Changing border radius

You can use the border-radius property to adjust the shape of an element's corners to create rounded edges. For example, you can style buttons with rounded corners. Change the pixel value (25px) to change the border radius of buttons. The higher the number, the rounder the button.

Button border radius

To change the border radius of buttons for the entire theme, add the following code to the Custom CSS in the Theme settings. To change the border radius of section buttons, add the code in the Section settings.

Note: The global CSS setting may not apply to all buttons. It will not apply to the Dynamic checkout buttons.

.btn {
border-radius: 25px;
}

Hiding elements

You can hide elements on your site by setting the display property to none. This will remove the element from the page entirely, so it won't be visible to your visitors.

Hide search icon

To hide the search icon, add the following code to the Custom CSS in the Header section settings.

.header__icon-touch--search {
 display: none;
}

Hide collection title

To hide the collection title on all collection pages, add the following code to the Custom CSS in the Theme settings. To hide the collection title for some pages, add the code in the Collection banner section settings.

Note: The H1 tag is attached to the collection title, so hiding this will hide your H1 tag. This may impact your site's SEO.

.collection-banner__text-container-heading {
display: none;
}

Hide price on product listings

You can hide prices that appear in product listings, which includes collection pages and featured collection sections. The following code does not apply to product pages.

To hide the price on all product listings, add the following code to the Custom CSS in the Theme settings. To hide the price on product listings in individual sections, add the code in the Section settings.

.product-item__price {display: none;}

Hide product price on PDP

You can hide the price on product pages with the selector . product__ block .product__price.

To hide the price on all product pages, add the following code to the Custom CSS in the Theme settings. To hide the price some product pages, add the code in the Product overview section settings.

.product__block.product__price {display: none;}

How's Stiletto working for you?

We built Stiletto with developers in mind, and we want to hear from you about what you're building. Please feel free to reach out with questions or introduce yourself by e-mailing us at [e-mail]

Related links

Edit theme JavaScript Custom JavaScript events Custom Liquid Custom fonts