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.
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
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
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.