Seventh > Theme settings > Layout, colors & typography

Layout

Maximum page width

Handles the maximum stretch of the page on large screens. If the screen is smaller than the maximum page width, it will take 100% of the viewport. Otherwise, the content will be centered on the screen based on this setting.

Default spacing between sections

Handles the top/bottom spacing between independent sections. Can be also configured separately on a per section basis.

Default horizontal spacing between cards & columns

Handles left/right spacing between cards or columns. Can also be configured separately on a per section basis.

Colors

Seventh uses color schemes for properly handling colors. Since it's build around a modular system with cards, blocks & sections, this is very well integrated, because you can set specific colors at a section / card / (sometimes) block level.

Each color scheme has 5 settings:

Background (color): controls the background color
Background (gradient): gives an option for a background gradient
Text: controls all inner text
Buttons primary: a primary color for buttons
Buttons secondary: a secondary color for buttons

When you apply a color scheme to a certain component (eg: a card), the entire component will take it's colors from the chosen color scheme. If you have different color schemes at different levels, each color scheme will affect only it's respective level:

SECTION (color scheme A)
 |
 |-> card (color scheme B)
 |
 |->card (color scheme C)

Default color scheme

Even if most sections, including regular page template sections, have dedicated color schemes, there are certain cases where the store needs a default color scheme (a page without a template, or a page with little content, in which you can see "behind" the actual elements, etc.).. For this purpose, you need to select a default color scheme that will appear as a "fallback" whenever it is needed.

Tip: Most sections are using Scheme 1, while most cards are using Scheme 2 by default. If you want to do a "global" change to colors, you can edit these two color schemes without editing individually inside each section or card.

Modal / drawers

Drawers (sidebars) share a dedicated (unique) color scheme which can be set here.

Alert colors

Edit error and success alerts colors, wherever they appear (forms, cart, etc.)

Typography

Seventh includes three main fonts that are used throughout the store. These are:

Body
Headings
Accent

Most blocks allow you to easily swap font families, but all the base settings come from here

Font family

Select the font family from Shopify's curated list of fonts.

Base size

Select a base size for the specific font. You can select font size at block level, however, all the sizes depend on this base size. Moreover, our theme has responsive fonts, meaning that sizes will decrease for mobile devices. Still, the base size is a general slider to increase or decrease the entire typography at theme level.

Line height

Select the default line height for the specific font. Most blocks allow you to adjust it independently with a custom setting.

Letter spacing

Select the letter spacing for the specific font. This cannot be adjusted independently.

Tip: Headings & accent fonts are made to be used together, or at least for the same purposes. Your store will look better if these two have a somehow similar base size, so that when you put a heading font near an accent font, you will not get a big size difference between the two.

Buttons & forms

Edit the global style of all the buttons and forms from the theme. While you can individually change the size or design of specific buttons, the options that you set here are standard and can't be changed on a per block basis

Corner roundness

Changes the corner roundness of all buttons.

Buttons border size

Changes the width of the (outline) buttons border.

Use uppercase labels for buttons

Makes all buttons uppercase.

Buttons font weight

Sets the font weight of all buttons. The "bolder" option means that it will try to add up +200 weight on the body's font default weight. If the selected font doesn't have the specific weight, it will fallback to 700.

Buttons hover animation

Choose between an opacity and a vertical movement animation in buttons (desktop only).

The corner roundness setting applies to forms as well, however, it is maxed out at 5px, meaning that forms will not share the "Fully rounded" option with the buttons. The rest of the design in forms is standardized throughout the theme for accessibility purposes and cannot be edited without customizations.