Colors
Apply custom color schemes to any section and customize expanded color options for more theme elements.
We're working closely with Shopify to resolve an ongoing issue with Shopify's auto-updating system, when updating from a version older than v6.
The current workaround is to try updating your original theme copy again. If this still doesn't work, please reach out to our support along with your Collaborator Request Code.
Please note that when the theme is successfully updated, you will still need to set up the new color schemes to match your original theme copy. Shopify's auto-updating system does not transfer older colors to the newer color schemes.
Color schemes
Stiletto now uses Shopify's color schemes. Apply color schemes to sections and components like popups and modals, drawers. Find the Color scheme option added under Section style in section settings
Note Before publishing, you may need to update and apply color schemes to pre-existing sections.
New Sections Apply a custom color scheme to any section.
New Popups and modals Apply color schemes to popups and quick view modals.
New Drawers Apply color schemes to quick cart and menu drawers.
New PDP 'Add to cart' button Use Solid or Outline buttons colors from section color scheme
New PDP Sticky add to cart Apply a color scheme for the sticky bar.
In section settings, most overlay and custom color options have been replaced by color schemes.
You can change the default color scheme for all sections and pages in Theme settings > Colors.
More color options...
Stiletto now offers more granular control over colors. In color schemes, we've added color options that can be applied to more elements of your sections. We've also added more color options for product badges and notifications.
New Background gradient Use gradients instead of solid colors for section backgrounds and overlays.
New Form inputs Select Text and Background colors for fields.
New Solid buttons Select text, background, and hover colors for all solid style buttons.
New Outline buttons Select text and outline colors for all outline style buttons.
New Product badges Custom color options for Sale and Sold-out badges.
New Notifications Select Success and Error colors
General and Button color options have moved into color schemes.
Header and Footer colors now use color schemes in their section settings.
Updating your theme with color schemes
With color schemes replacing some of custom section color options, you'll want to set up color schemes that match any pre-existing sections, then apply them in section settings.
We recommend starting by editing and assigning the default color scheme in Theme settings > Colors. This will apply the base colors used across your entire site, which can then be replaced by other color schemes at the section level.
Add or update color scheme
Assign color schemes in section settings
Replace custom color options with color schemes
Collection list grid
Collection list slider
Events (badges)
Image with text
Image with text split
Multi-column
Video with text
Replace custom overlay colors with color schemes
Collection banner
Countdown banner
Countdown bar
Gallery carousel
Grid blocks
Image compare
Image hero
Image hero split
Newsletter compact
Newsletter signup
Promotion banner
Promotion bar
Slideshow
Video
Video hero
Advanced: Changes to CSS selectors for colors
If you've made code customizations to Stiletto's global colors, note that there's been some changes to CSS variable names.
Meta color variable name replacements
--color-text
no replacement
--color-text-8-percent
--color-text-alpha-10
--color-text-alpha
--color-text-alpha-40
--color-text-meta
--color-text-alpha-60
--color-text-link
--color-text-link
--color-text-error
no replacement
--color-text-success
no replacement
--color-background
--color-background
--color-background-semi-transparent-80
--color-background-alpha-80
--color-background-semi-transparent-90
--color-background-alpha-90
--color-background-transparent
--color-background-alpha-0
--color-border
no replacement
--color-border-meta
--color-border-alpha-60
--color-overlay
no replacement
--color-background-meta
--color-text-alpha-05
--color-background-meta-alpha
--color-text-alpha-05
--color-background-darker-meta
--color-text-alpha-08 (or 10)
--color-background-darker-meta-alpha
--color-text-alpha-08
--color-background-placeholder
no replacement
--color-background-placeholder-lighter
no replacement
--color-foreground-placeholder
no replacement
--color-border-input
--color-text-input-alpha-40
--color-border-input-alpha
--color-text-input-alpha-10
--color-text-input
no replacement
--color-text-input-alpha
--color-text-input-alpha-05
--color-text-button
--color-text-button-solid
--color-background-button
--color-button-solid
--color-background-button-alpha
--color-text-button-outline-alpha-60
--color-background-outline-button-alpha
--color-text-button-outline-alpha-10
--color-background-button-hover
--color-button-solid-hover
--color-icon
--color-text-alpha-40
--color-icon-darker
--color-text-alpha-60
--color-text-sale-badge
no replacement
--color-background-sold-badge
no replacement
--color-text-sold-badge
no replacement
--color-text-header
--color-text
--color-text-header-half-transparent
--color-text-alpha-50
--color-background-header
--color-background
--color-background-header-transparent
--color-background-alpha-0
--color-icon-header
--color-text
--color-shadow-header
no replacement
--color-background-footer
--color-background
--color-text-footer
--color-text
--color-text-footer-subdued
--color-text-alpha-70
--color-products-sale-price
no replacement
--color-products-rating-star
no replacement
--color-products-stock-good
no replacement
--color-products-stock-medium
no replacement
--color-products-stock-bad
no replacement