Basic settings

In this article, I will explain how to make basic settings that have a significant influence on the theme.

The following setting options run through the entire theme and therefore through the entire front end of your store. I will explain the individual points in the screenshot in detail below.

Theme Settings

1) General colors of the theme

The colors you enter here are used throughout the entire frontend. For example, the primary color is used for many areas, such as buttons, highlights in the listing or checkout.

$sw-color-brand-primary - what is that?

This is a variable. More precisely, it is the variable for the store's primary color. So if you enter $sw-color-brand-primary in color fields, the primary color of the store is passed on and you only have to change it in one place afterwards.

I have preconfigured the theme for you as far as possible. You will often see variable names in the theme settings so that it is as easy as possible for you to customize 90% of the theme with just the basic settings.

You can of course replace the variables with values of your choice.

2) Basic font settings

Here you set the fonts of your store and their colors. Make sure that you retain the corresponding format for the font integration:

Example: 'Open Sans', sans-serif

'Open Sans' would be the font in this case. Everything that comes after the comma would be a so-called fallback font (alternative font) if the actual font cannot be found or cannot be displayed on the corresponding end devices.

I have explained how to upload your own fonts in another post:

Integrate your own fonts

3) Logos and Icons

• Desktop, Tablet, Mobile I recommend that you use different versions of your logo. The size of your logo is less important on desktop devices than on mobile devices, for example.

• App- & Share-Icon This logo/icon is displayed when someone sends your store via social media or Whatsapp, for example. The logo then appears in the preview of the link.

• Favicon This icon is displayed in the browser window next to the title of the website.

• Checkout Sometimes it makes sense to upload a different logo for the checkout area of the store than for the rest of the store.

Pay attention to high-resolution logos, it is best to use .svg logos. Alternatively, you should always use transparent .png logos, as these can be integrated much better into background colors.

4) General Shopping Experience - Settings

Shopwere's Shopping experience describe virtually the entire content area between the store header and footer. You create the Shopping Experience by dragging and dropping individual content blocks onto the content page. You can assign corresponding properties to the blocks in the experience worlds, but you can set the default values in the basic settings of the theme.

This means you don't have to change every single block if you want to change the color or the spacing. It saves an incredible amount of effort.