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 ({}
).
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 ↗.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 developers@fluorescent.co
Related links
Edit theme JavaScript Custom JavaScript events Custom Liquid Custom fonts
Last updated