Theme settings
From Context's Customize theme editor, you can click on the Theme settings tab to access theme-wide settings.
The articles in this section provide more detail about how these theme settings work, and link out to Shopify documentation when these settings reach outside of Context's scope.
Colors
From the Colors theme settings panel, you can set the colors Context uses across the theme.
For each setting, you can use Shopify's color picker to change the color.
Use the Save button in the top-right corner of your "Customize" screen once you're finished editing.
Settings reference
Context has many color settings available, so you can completely customize Context's look so it matches your branding and style.
We realize that having so many settings is a bit confusing, so as we define each setting, we'll include an image that describes where and how the color is displayed.
Here are quick links to each sub-section of color settings:
General
Header
Footer
Buttons
Contrast
Settings reference
These color settings affect the colors throughout your store, not in one specific place.
Accent
Used for text links, buttons, and the header message.
Text
The color of text store-wide.
Meta Text
Button Text
The color of button text.
Background
Your store’s background color. This is the most dominant color present in your store.
Border
The border color is used for lines and borders that overlay the global background color.
This affects borders and lines such as:
• The product page border between a product name and its price.
• The border around page sections with their Section outline setting enabled. (See an example in the animation below.) :
Input
The color of input fields – like drop-down menus, email fields, add/remove quantity boxes, and so on.
Input Text
The color of text inside input fields.
Secondary Button
Secondary buttons appear when there are two customer actions and there is one less important than the other.
Specifically, see the Update cart button on the cart page (next to the primary Check out button), and the the Add to cart button on product pages (next to the primary But it now button).
Here is an image featuring the secondary Update cart button::
Secondary Button Text
The color of secondary button text on the site.
Sale Badge
The sale badge appears when you have set the Compare at price for a product in your Shopify dashboard’s Products section.
Success Message
The background color of messages that appear to customers if something succeeds.
Error Message
Once in a while, customers may run into a short error message. For example, if they try to create an account and enter an invalid email::
Settings reference
These color settings affect only the colors in your header.
Text
The text in the header, like the navigation menu links and site title.
If you use the transparent header on the home page, you can set a different text color for it in the Header settings.
Background
The background color of the header.
If you use the transparent header, this color is still applied on all pages except for the home page.
Border
The bottom border color of the header.
If you use the transparent header on the home page, you can set a different border color for it in the Header settings.
Icon
The color of the search, profile and cart icons in the header.
On mobile devices, this color is also used for the main menu (☰) icon.
Settings reference
The contrast color settings affect content sections all over your store. For example, many home page sections (testimonials, featured collections and featured products) have a “secondary background” color that contrasts with your regular background color.
Text
The text color for inside content sections.
Meta Text
The background color for inside content sections.
Background
The contrast background is displayed in a content section. It should contrast your global background color.
Here is an example of the contrast background color being changed: :
Border
If there is a border or line within a content section, it uses the contrast border color setting.
For example, see the border line in this featured product section, between the product name and the price: :
Input
The color of input fields – like drop-down menus, email fields, add/remove quantity boxes, and so on.
This field only affects input fields within a contrast section.
Input Text
The color of text inside input fields in contrast sections.
Settings reference
The navigation color settings only affect the colors in your drop-down navigation menus.
Note that these color settings are only honored on desktop devices. For mobile devices, see the Drawers color settings below.
You can learn more about setting up mega navigation menus in the Header article.
Text
The color of text and links in the mega navigation menu.
Meta Text
The color of the column headings in the mega navigation menu.
Background
The background color of the mega navigation menu.
Border
The color of the borders between sub-menus in the mega navigation menu.
Feature
The background color that appears behind the navigation menu’s feature image, heading and subheading.
Settings reference
Some menus open up in drawers. They pop open from the left or right side of the screen.
On mobile devices, navigation menus, the quick cart, collection sorting and collection filtering menus open up in drawers::
Text
The color of text and links in the drawers.
Meta Text
The color of secondary links in the drawers (The close [X] button, for example). We recommend keeping this a few shades lighter or darker than the Text color, but in the same color range.
Background
The background color of drawers. We recommend using a color that contrasts with your store background color.
Border
The color of borders and lines within the drawers.
Settings reference
These color settings affect only the colors in the footer area of your store.
Note that on mobile devices, your footer may be big enough to fill an entire screen.
Text
The color of text and links in the store footer.
Meta Text
Change the text color of the footer.
Background
The background color of the footer section.
Border
The color of borders and lines in the footer section.
Input
The color of input fields – like drop-down menus, email fields, add/remove quantity boxes, and so on.
This field only affects input fields within the footer.
Input Text
The color of text inside input fields in footer sections.
Typography
From the Typography theme settings panel, you can change the fonts used across your store.
Settings reference
The following font settings are available:
Headings
The font used for header text store-wide.
Heading size
Sets your base heading size throughout the theme. Choose a value between 14px and 22px.
Display headings in uppercase
Sets the headings in uppercase throughout the theme.
Body text
The font used for body, link, and button text store-wide.
Body size
Sets your base body text size throughout the theme. Choose a value between 14px and 18px.
Logo font
The font used in your logo. If you’re using a custom logo image, this font will be used as a backup.
Logo font size
Sets your logo's font size in the header. Choose a value between 16px and 40px.
Social media
From the Social media theme settings panel, you can add links to all of your social media accounts.
These links activate buttons that link to each social media page. These buttons can be configured to appear in Context's footer.
Here's what the buttons look like when active::
Configure social media accounts
To set social links up, put your social media page's URL into the matching field of your social media settings.
For example, a YouTube channel URL would look something like https://www.youtube.com/user/shopify, where shopify would be your own username.
Search
The Search theme settings panel lets you customize how quick search results appear to customers. For example, you may want to include blog posts in search results, or include the product's vendor name.
Configure search results
To change the presentation of search results:
Settings reference
Search results have the following settings:
Results per category
For each product category, set the amount of results that should be displayed for a search.
This setting ranges from 1 to 6 results.
Show products
Include products, if relevant, in search results.
Show articles
Include your store's articles (blog posts), if relevant, in search results.
Show pages
Include your store's pages, if relevant, in search results.
For each product search result, the following settings are available:
Show price
Show the product's price inline with its search results.
Show vendor
Show the product's vendor name inline with its search results.
Product
Context has features that apply to products everywhere — on collection pages, product pages, featured collection sections, and the featured product section.
Swatches
Information popup
Settings reference
Swatches can be displayed on product cards (the products on collection pages, related products, recently viewed products and featured collection sections) as well as the product page.
Note: Along with defining the variant option in the Theme settings, you will also need to enable them on the Product page and Collection page settings. See the swatches article for more info. :
:
Read more in our Swatches article for steps on how to set this feature up.
Settings reference
You can attach a popup to a variant option to give further information about your products, like a fit guide, shipping policy, or FAQ. Here it is on the "Color" dropdown on the product form::
And here is the popup displaying the About page::
Set up an information popup on your product variant
Settings reference
Option name for Information popup
The popup link displays in the variant dropdown of one of your product options. The default is "Size" but you can choose where you'd like it to appear by naming a different product option.
Information popup link text
Choose the text for the link that triggers the popup. Default is "Size guide"
Information popup content
Pick one of your pages to display. Whatever content you add to this page will display in the popup. It can be a size chart image, text, or even a video.
You can edit the page content from the Pages area in your Shopify dashboard.
Cart
From the Cart theme settings panel, you can add some functionality to your cart pages.
Here, you can also enable Context's "quick shop" functionality.
Change your cart presentation
Settings reference
The cart has the following settings:
Show notification when item is added to cart
Check this checkbox to flash a notification message whenever the customer adds an item to their cart.
Enable quick shop
Check this checkbox to enable Context's quick shop feature.
Show Quick shop quantity input
Check this checkbox to allow customers to choose how many of a product to add to the cart. If this setting is disabled, then the default amount, 1 is added to the cart.
Enable cart notes
Check this checkbox to let customers add special shipping instructions for their order.
Favicon
From the Favicon theme settings panel, you can upload a favicon.
Favicons are tiny icons that appear next to your site's title or URL in browser tabs, bookmark menus and address bars. The recommended image dimensions are 32px by 32px.
Favicon
An upload form that takes a favicon.
Recommended dimensions:
| Width | Height |
|---|---|
32 pixels* | 32 pixels* |
*Minimum recommended dimensions. We strongly recommend that you upload a square icon.
All modern desktop browsers support ICO, PNG and GIFs as favicons. See Favicons on Wikipedia for more information.
Checkout
From the Checkout theme settings panel, you can change the look and feel of your checkout pages.
Checkout styles are a Shopify feature. So, Context uses Shopify's standard settings.
For more information about these settings, see Shopify's Customizing the style of your checkout article.