Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Theme settings

In the theme editor (Customize), click on the Theme settings tab to access theme-wide settings. Adjust your storewide colors, fonts, well as configure your Products, Cart, Search, and Social media. You can also set the Theme style to one of our three presets: Chic, Ecstatic, Minimal.

Theme settings tab
Theme settings tab

Colors

From the Colors theme settings panel, you can select the colors that Context uses across the theme, so you can customize Context's look to match your branding and style.

Listed below are general color settings that are set globally for your store:

General

General color settings affect the colors throughout your store, not in one specific place.

The General section has the following color settings:

Text

The color of text store-wide.

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

Border on sections with Section outline enabled

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.

Accent / button background

Used for text links, buttons, and the header message.

Button Text

The color of button text.

Secondary button background

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:

Example of grey secondary button
Example of grey secondary 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.

Example of red sale badge
Example of red sale badge

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:

Example of red error message
Example of red error message

The Header section has the following color settings:

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.

Alternate section colors

The contrast color settings affect content sections all over your store, specifically when the Outline section style is enabled.

Text

The text 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:

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:

Border between product name and 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.

The navigation color settings only affect the colors in your drop-down navigation menus.

Context navigation
Context navigation

Note that these color settings are only honored on desktop devices. For mobile devices, see the Drawers color settings below.

The Navigation section has the following color settings:

Text

The color of text and links 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.

Drawer

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:

The Drawer has the following color settings:

Text

The color of text and links in the drawers.

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.

The Footer section has the following color settings:

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.

Footer mobile
Footer mobile

Text

The color of text and links in the store 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. Lorenza provides over 200 free fonts through Shopify's Font Library.

Font settings

The following font settings are available:

Configuration Settings

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:

Social media icons, all enabled
Social media icons, all enabled

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.

The Quick 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

In the theme editor (Customize):

  1. Click the Theme settings tab at the bottom of the customize panel.

  2. Select the Search section from the list.

  3. Use the Results per category slider to change the number of results per product category returned in a search. The slider ranges from 1 to 6 results.

    When you add or edit products in Shopify, you can add a product category.

  4. Check the Show articles and Show pages checkboxes to let articles and pages show up in search results.

    When enabled, article and page search results are added to results as separate result sections:

  5. Check the Show price and Show vendor checkboxes to make the price and product vendor name appear next to each product search result.

  6. Remember to click Save.

Search results settings

Search results have the following settings:

Configuration 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 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:

Configuration Settings

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

Under the Product tab, you'll the option for the Variant option for swatches. Learn more in our Swatches article.

Cart

From the Cart theme settings panel, you can add some functionality to your cart pages.

Cart
Cart

Here, you can also enable Context's "quick shop" functionality.

Quick shop
Quick shop

Change your cart presentation

In the theme editor(Customize):

  1. Click the Theme settings tab at the bottom of the customize panel.

  2. Select the Cart section from the list.

  3. Check the Show notification when item is added to cart checkbox if you want to add this behavior.

    Now, whenever a customer adds an item to the cart, a mini-cart pops over the current page, letting customers manage their cart.

    Cart notification
    Cart notification
  4. Check the Enable quick shop checkbox to enable Context's quick shop feature.

    Customers can now hover over a product image and quick a Quick add button, which makes a mini-cart popup appear.

    Quick shop product form popup
  5. Check the Enable cart notes checkbox to allow customers to enter special shipping instructions for their order.

  6. Remember to click Save.

Cart settings

The cart has the following settings:

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

Configuration Settings

Favicon

An upload form that takes a favicon.

Recommended dimensions:

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

Shopify checkout
Shopify checkout

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.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.