Superstore features expansive controls for the Colors used throughout the theme. Divided into common categories, colors can be specified by clicking the color picker beside the color label.
Header
Control the colors for the Header’s Background, Logo text, and Cart icon using the color picker beside each label.
- Background
- Logo text
- Cart count background
- Cart count text
Header Search Bar
The search bar is front-and-center for Superstore, and these settings provide expanded customization options for this prominent feature. Control the colors for the Header search bar using the color picker beside each label. These colors will be reflected in the right-side preview.
- Background
- Border
- Text
- Button icon
- Button background
Header Navigation
These settings apply to the navigation portions of the header, such as the links, dropdowns, and mega navigation menus. Control the colors for the Header navigation using the color picker beside each label. These colors will be reflected in the right-side preview.
- Main menu text
- Main menu hover
- Secondary menu text
- Secondary menu text hover
- Dropdown menu background
- Dropdown menu links
- Dropdown menu links hover
- Mega-navigation promo text
- Mega-navigation menu headings
- Mobile submenu background
Text
These settings apply to the bulk of basic text as it appears throughout the theme. Control the colors for the Text using the color picker beside each label. These colors will be reflected in the right-side preview.
- Headings
- Body text
- Light body text
- Links
- Links hover
Buttons
These settings apply to the add-to-cart (ATC), call-to-action (CTA), and other buttons throughout the storefront. Control the colors for the Buttons using the color picker beside each label. These colors will be reflected in the right-side preview.
- Primary button background
- Primary button text
- Primary button background hover
- Secondary background
- Secondary button border
- Secondary button text
- Secondary button text hover
- Secondary button border hover
- Secondary button background hover
- Sold out button text
- Sold out button background
Forms
These settings apply to the text fields used in forms, such as the contact page, newsletter signup, and order notes. Control the colors for the forms using the color picker beside each label. These colors will be reflected in the right-side preview.
- Input placeholder text
- Input text
- Input background
- Input border
- Selected input
Products
These settings apply to details of the products, such as Price, Vendor, etc. Control the colors for the Products using the color picker beside each label. These colors will be reflected in the right-side preview.
- Vendor
- Regular price
- Compare at price
- Sale price
- Sale badge text
- Sale badge
- Sold out badge text
- Product gallery active thumbnail
- Product image backgrounds
Product Cards
This setting controls the background color for product cards, which are the individual products as they appear on the Collection page grid. Control this color for the product color using the color picker beside the label. This color will be reflected in the right-side preview.
- Background
Product Reviews
These settings control the appearance of the Star ratings used by the Product Reviews app. Control the colors for the Product reviews using the color picker beside each label. These colors will be reflected in the right-side preview.
- Star rating border
- Star rating active
Layout
These settings control elements of the overall storefront, assigning colors to the backgrounds and dividers. Control the colors for the Layout using the color picker beside each label. These colors will be reflected in the right-side preview.
- Side background
- Secondary background
- Dividers
Content Containers
These settings apply to certain boxes containing text, media, etc. Find examples of this in the Blog posts and Twitter feed page sections. Control the color for the Content containers using the color picker beside its label. This color will be reflected in the right-side preview.
- Background
Popups
Some theme features, such as the quickshop, use a pop-up style window. Control the color for the Popups using the color picker beside its label. This color will be reflected in the right-side preview.
- Background
Site Overlays
Related to the Popups setting, Site overlays refer to the darkening color effect that surrounds the popups. Control the colors for the Site overlays using the color picker beside the Overlay, then use the Opacity slider to determine the strength of the overlays’ opacity. These colors will be reflected in the right-side preview.
- Overlay
- Opacity
Footer
These settings control the main components of the Footer. Control the colors for the Footer using the color picker beside each label. These colors will be reflected in the right-side preview.
- Background
- Headings
- Text
- Text link
- Text link hover
- Menu list link
- Menu list link hover
- Additional menu link
- Additional menu link hover
- Copyright text
Mobile dividers are based on Footer text.
Social Icons
These settings control the color and contrast scheme of the social media icons used for Share buttons and Footer icons.
Dark on light uses the color set in Body text for the inside, while the outside is a blend of the Body text color and the background color of the product page or footer.
Inverted uses the color set in Body text for the outside, while the inside matches the background of the product page or footer.
Colored uses the brand color associated with the social media platform as the outside color, while the inside matches the background of the product page or footer.