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.

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.

Adding your own custom font

If you decide to use a custom font, there are a few methods to do this:

1. Use the @font-face declaration (add your own font files)

Please start by uploading your new font in Content > Files. The best font file format for compatibility with all browsers is the woff, or even better, woff2 format. 

Open /snippets/head-variables.liquid and right at the top, remove this code if you want to change all the font categories:

{%- liquid
  assign headings_font = settings.headings_font
  assign body_font = settings.body_font
  assign accent_font = settings.accent_font
-%}

{% # theme-check-disable AssetPreload %}
{%- unless headings_font.system? -%}
  <link rel="preload" href="{{ headings_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless body_font.system? -%}
  <link rel="preload" href="{{ body_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless accent_font.system? -%}
  <link rel="preload" href="{{ accent_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}
{% # theme-check-enable AssetPreload %}

Now, go a bit further and identify the place where the current fonts are created, and delete those lines as well:

  {%- liquid 

    echo headings_font | font_face: font_display: 'swap'
    assign headings_font_bold = headings_font | font_modify: 'weight', '+200' 
    if headings_font_bold == blank 
      assign headings_font_bold = headings_font | font_modify: 'weight', '700' 
    endif 
    echo headings_font_bold | font_face: font_display: 'swap'

    if settings.section_title_italic 
      assign headings_font_italic = headings_font | font_modify: 'style', 'italic' 
      echo headings_font_italic | font_face: font_display: 'swap'
    endif

    echo body_font | font_face: font_display: 'swap'
    assign body_font_bold = body_font | font_modify: 'weight', '+200' 
    if body_font_bold == blank 
      assign body_font_bold = body_font | font_modify: 'weight', '700' 
    endif 
    echo body_font_bold | font_face: font_display: 'swap'

    echo accent_font | font_face: font_display: 'swap'
    assign accent_font_bold = accent_font | font_modify: 'weight', '+200'
    if accent_font_bold == blank
      assign accent_font_bold = accent_font | font_modify: 'weight', '700'
    endif
    echo accent_font_bold | font_face: font_display: 'swap'
    
  -%}

Back at the top, you should see the style opening declaration:

<style type="text/css">

Right after this line of code, add your own font, like this - https://share.zight.com/4gup6EmZ:

@font-face {
  font-family: "MyFont";
  src: url('Your_font_link_URL') format("woff2");
}

Add this declaration for all the fonts that you wish to use (if you want to change two fonts, one for headings, one for body, you'll need to font declarations, with the names you declare. If your font has style variations (italic, bold), you need to add font files for those as well.

Now that your font is ready to be loaded, you need to modify the font variables. Go down again, and search for the code snippet below. 

/* Font variables */

    --font-stack-headings: {{ headings_font.family }}, {{ headings_font.fallback_families }};
    --font-weight-headings: {{ headings_font.weight }};
    {%- if headings_font_bold -%}
      --font-weight-headings-bold: {{ headings_font_bold.weight }}; 
    {%- else -%}
      --font-weight-headings-bold: 700;
    {%- endif -%}
    --font-style-headings: {{ headings_font.style }};

    --font-stack-body: {{ body_font.family }}, {{ body_font.fallback_families }};
    --font-weight-body: {{ body_font.weight }};
    {%- if body_font_bold -%}
      --font-weight-body-bold: {{ body_font_bold.weight }}; 
    {%- else -%}
      --font-weight-body-bold: 700;
    {%- endif -%}
    --font-style-body: {{ body_font.style }};

    --font-stack-accent: {{ accent_font.family }}, {{ accent_font.fallback_families }};
    --font-weight-accent: {{ accent_font.weight }};
    {%- if accent_font_bold -%}
      --font-weight-accent-bold: {{ accent_font_bold.weight }};
    {%- else -%}
      --font-weight-accent-bold: 700;
    {%- endif -%}
    --font-style-accent: {{ accent_font.style }};

Delete this entirely and replace it with your own font stack here, like this:

--font-stack-headings: "MyFont", sans-serif;
--font-weight-headings: 400;
--font-weight-headings-bold: 700;
--font-style-headings: normal;

--font-stack-body: "MyFont", sans-serif;
--font-weight-body: 400;
--font-weight-body-bold: 700;
--font-style-body: normal;

--font-stack-accent: "MyFont", sans-serif;
--font-weight-accent: 400;
--font-weight-accent-bold: 700;
--font-style-accent: normal;

You can have two different fonts, or use the same font for all typography, just make sure that you add the source files properly for all the fonts that you wish to use.

2. Use Google Fonts

After you select the font you need to use from Google fonts, a code will be generated for you to insert in the theme.

Please embed the generated code in the theme.liquid file, just before the </head> closing tag (screenshot).  

For example, for the Poiret One font the code generated by Google is:

<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

Then go back at STEP 1 and apply the steps in order for the theme to use your font. Just skip the "@font-face" declaration, but the rest is the same.. You will be using the selected font from Google instead. So in all above examples, where we've used "MyFont", here it will be "Poiret One".

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