Skip to main content

Visual Settings

Visual settings are found in the store customizer and affect your store's look and feel.

The difference between visual settings and blocks is that when you open a visual setting on the Navigation bar, you edit it in the overlay. In contrast, blocks are edited in the live preview.

This is because visual settings aren't blocks that will display in particular places in your store (like sections or pages). Instead, they are settings that change the appearance of the content across your store.

The visual settings are divided into Styles, Typography, and Interface elements.

Styles​

Under Styles, you create the visual identity of your store by uploading your logo, selecting the central color of your brand identity, and picking a grayscale to compliment it.

tip

Make sure you have the Product Detail or Product Listing page open in the live preview while making changes so that you can easily see what impact your changes have.

Logos​

You can upload multiple versions of your company logo for visual recognition, namely:

  • A full color logo.
  • A logo for light mode users.
  • A logo for dark mode users.
  • A favicon logo that will display in browser tabs and favorite bars.

To upload your logos:

  1. Open your store, go to the Overview and click Customize.
  2. On the Navigation bar, select Styles > Logo.
  3. Drag your full color logo file to the top drag-and-drop box, or click Upload a file and locate it on your device.
  4. Repeat step three for the other types of logos you have and want to use.
    • If you want to add a favicon, it needs to be a .ico file (preferably 128 by 128 pixels)
  5. Save or Save & Publish.

Colors​

Your store's color scheme is built out from the central color of your brand identity. This is called your accent color. After you select your accent color, Instant Commerce generates shades of the accent color that will be used to complement it and create a beautifully accented store.

  1. Open your Store and click Customize in the top right corner.
  2. On the Navigation bar, select Styles > Colors.
  3. Click the accent color bar and use the color selector to select the color your want.
  4. Save or Save & Publish.

Grayscale​

The grayscale you select is used in your store for lettering and delineation.

  1. Open your Store and click Customize in the top right corner.
  2. On the Navigation bar, select Styles > Grayscale.
  3. Select the Greyscale preset you would like for your store.
  4. Save or Save & Publish.

Typography​

Here you can select the fonts you would like to use for the marketing sections, headings, and the regular text on your site.

Google's fonts are loaded into Instant Commerce by default, but you can upload custom fonts:

  1. Open your Store and click Customize in the top right corner.
  2. On the Navigation bar, select Typography > Custom.
  3. Drag and drop a file in the box or click Upload a file.
  4. Save or Save & Publish.
tip

We advise you to upload three font weights of the same font. Uploading a light, regular, and bold version of the same font will yield the best results.

Interface elements​

Under Interface elements you can change the settings for elements such as buttons and labels.
Like components, they appear in multiple places across your store, but are more integrated in the user experience.

Interface elements versus components

The difference between interface elements and components is that interface elements facilitate quick interactions. E.g., a button with a word or simple phrase on it is an interface element.

Components communicate more complex information or contain a call to action. Your cookie banner, for instance, displays a legally significant text which needs to be read and accepted by your customers, meaning it's a component.