Initial Configuration

After installing Scale Theme, a few essential settings will transform the generic theme into your store. This guide walks you through the foundational visual configuration step by step: colors, typography, layout, header, and footer.

Accessing the theme settings

Step 1: Open the theme editor

1. Log in to your Shopify admin
2. In the sidebar, click Online Store > Themes
3. On Scale Theme, click the Customize button

Step 2: Open the theme settings

Once inside the editor, the global settings are accessible from the bottom left:

1. Click the gear icon at the bottom left of the editor
2. The Theme settings panel opens with all available categories

1. Configure colors

Colors are the first thing to configure because they affect every element of your store. Scale Theme uses a system of color palettes (color schemes) that you can then assign section by section.

Understanding palettes

Each palette contains 6 colors that work together:

, Text secondary (#777777), Background (#FFFFFF), Background secondary (#F6F6F6), Accent 1 (#EB9F11 gold/yellow), Accent 2 (#AE2F11 red/brick).)

Creating your palettes

Shopify lets you create multiple palettes. Each section of your store can then choose which palette to use.

Example before/after: changing palettes

, white title, accent-colored button that strongly stands out, secondary text in light gray. The contrast gives a premium, modern look.)

, text is black, creating a vibrant and eye-catching promotional section.)

Background gradient

Each palette also supports an optional background gradient (the "Background gradient" field). If set, it replaces the solid background color with a gradient.

2. Configure typography

Typography defines the visual identity of your store. Scale Theme offers two independent levels.

The two fonts

and a "Size" slider set to 100%, then "Body" with the same options.)

Choosing your combination

The font choice depends on your brand identity:

Scale (size)

Each font has a scale from 80% to 130% that proportionally adjusts all sizes:

, 100% (normal), and 130% (large), showing the impact of the scale on the title size.)

For more details, see the Typography page.

3. Configure layout

Layout settings control the global content width and margins.

Impact of page width

For more details, see the Layout and spacing page.

4. Configure the header

The header is the first element visitors see. Scale Theme offers 5 layouts that are radically different to suit every type of store.

Layout 1: Classic

at the far right. A fine line under the header separates it from the content. This is the most standard and familiar layout.)

Description: Logo on the left, horizontal menu, icons on the right. The most classic and recognizable layout.

Best for: Most stores, standard e-commerce, stores with substantial navigation menus.

Layout-specific options:

• Bottom border (on/off)
• Arrangement: Logo-Menu-Icons or Icons-Logo-Menu, etc.

Layout 2: Centered

. The look is symmetrical and elegant.)

Description: Centered logo with the menu below (or above). Symmetrical and elegant design.

Best for: Premium brands, jewelry, cosmetics, stores where the logo is a key part of the identity.

Layout-specific options:

• Main centered element: Logo or Menu
• Icon position: Inline, Vertical left/right, Split
• Inline icon side: Left or Right
• Inline icon type: Relative or Absolute
• Vertical gap between rows

Layout 3: Floating

Description: Header detached from the top of the page with rounded corners, floating above the content.

Best for: Modern and premium design, landing pages, stores with beautiful hero images in the background.

Layout-specific options:

• Floating header width (50-100%)
• Border radius (0-50px)
• Secondary background (on/off)
• Overlay mode: Always / Homepage only / Never
• Glass effect: Normal or Ice

Layout 4: Split

Description: Menu split on either side of a centered logo, creating a symmetrical balance. Combines the advantages of Centered and Floating.

Best for: Fashion brands, restaurants, premium stores with a strong central logo and a balanced menu.

Layout-specific options:

• Secondary background
• Overlay mode
• Glass effect

Layout 5: Minimal

, optionally accompanied by a cart icon and/or a small CTA. The rest of the screen is completely free for content. Ultra-minimalist look.)

Description: Header reduced to the bare minimum: a hamburger button (and optionally cart/CTA) positioned in a corner. Frees up the entire screen for content.

Best for: Portfolios, artistic sites, immersive landing pages, single-product stores, sites where the visual experience takes priority over navigation.

Layout-specific options:

• Position: Top-left or Top-right
• Show logo (on/off)
• Show cart (on/off)
• Show a custom CTA (on/off) with text and link
• Secondary background
• Glass effect

Comparing all 5 layouts

, Centered (centered logo), Floating (rounded and floating), Split (divided menu), Minimal (single button) at the bottom.)

Settings common to all layouts

5. Configure the footer

The footer is the last element visitors see before leaving your store. Scale Theme offers 5 layouts to adapt the footer to your content.

Layout 1: Columns

. Below the columns, a separator line followed by copyright and payment icons. This is the most classic and structured layout.)

Description: Content organized in columns (2 to 4), with your choice of blocks in each column: menu, text, newsletter, payment logos, social links.

Best for: Most stores, when you have many links and information to include in the footer.

Layout-specific options:

• Number of columns (2-4)
• Center content (on/off)

Layout 2: Split

Description: Image on one side (left or right) and content on the other. Creates a visually powerful footer with a magazine feel.

Best for: Visual brands, fashion, lifestyle, stores that want a memorable footer.

Layout-specific options:

• Background image
• Image position (left/right)
• Media side color
• Newsletter on image (on/off)
• Full bleed (edge-to-edge, on/off)
• Border radius

Layout 3: Stacked

Description: Prominent newsletter at the top, followed by content columns. Emphasizes email capture.

Best for: Stores focused on email marketing, DTC (direct-to-consumer), brands with a strong newsletter strategy.

Layout-specific options:

• Newsletter title
• Newsletter description text
• Number of columns (2-4)

Layout 4: Centered (Minimal)

Description: Minimalist centered footer with optional logo, horizontal menu, and social links in a single centered area.

Best for: Single-page sites, landing pages, portfolios, stores with few navigation links.

Layout-specific options:

• Show logo (on/off)
• Custom logo (or theme logo)
• Logo width
• Horizontal menu (on/off)

Layout 5: Magazine

is displayed in white on top of the image. The look is editorial and immersive.)

Description: Full-width background image with overlay, content layered on top. Creates a spectacular and memorable footer.

Best for: Premium brands, fashion, restaurants, stores with a strong visual identity.

Layout-specific options:

• Background image
• Overlay opacity (0-100%)
• Number of columns (2-4)
• Border radius

Comparing all 5 footer layouts

, Split (image + content), Stacked (newsletter on top), Centered (minimalist), Magazine (background image) at the bottom.)

Available footer blocks

Regardless of the layout, you can add up to 10 blocks from:

Additional important settings

After the 5 main steps, remember to configure these elements:

Favicon

Upload your favicon (browser tab icon) in the theme settings. Recommended format: PNG 32x32px.

Social media

Enter your social media URLs in the theme settings. They will be used by the "Social links" blocks in the footer and for social sharing.

Cart

Configure the cart drawer (slide-out cart): enable the progress bar for free shipping, the gift threshold, and upsells.

Recommended configuration order

For an efficient setup, follow this order:

1. Colors -- Define your palettes (light + dark minimum)
2. Typography -- Choose your fonts and adjust the scales
3. Layout -- Set the page width and padding
4. Header -- Choose the layout, upload your logo, configure the menu
5. Footer -- Choose the layout, add your content blocks
6. Favicon and social media
7. Cart and conversion settings

Next steps

Now that the visual foundations are configured:

• Discover the theme editor in detail to learn how to work with sections and blocks
• Explore the global settings to find all advanced parameters
• Start building your pages with the available sections
• Check the detailed settings for typography, layout, and buttons
• Review the installation steps if you have not yet installed the theme
• Use the Custom Liquid section to add custom code