Maison quick start guide

Welcome to Maison! This Quick Start Guide walks you through everything you need to launch a beautiful store with the Maison theme — from uploading your logo on day one to going live by day five. No coding required.

This guide is built around a simple, paced workflow:

• Day 1 — Brand your store. Logo, colors, fonts, favicon.
• Day 2 — Build your homepage. Hero, featured collections, key sections.
• Day 3 — Set up your products. Variants, swatches, product page layout.
• Day 4 — Navigation, header & footer. Menus, mega menu, announcements, footer.
• Day 5 — Pre-launch checklist. Mobile testing, policies, going live.

You don't have to follow this in five literal days — go at your own pace. Many merchants finish in a long weekend; others spread it out over two weeks. The structure exists to give you a clear order so nothing important gets skipped.

On this page

1. Day 1 — Brand your store
   • 1.1 Open the Theme Editor
   • 1.2 Upload your logo
   • 1.3 Set your brand colors
   • 1.4 Choose your typography
   • 1.5 Add your favicon
2. Day 2 — Build your homepage
   • 2.1 Understand the homepage structure
   • 2.2 Edit the hero / slideshow
   • 2.3 Add featured collections
   • 2.4 Highlight your value propositions
   • 2.5 Add a newsletter signup
   • 2.6 Reorder, hide & remove sections
3. Day 3 — Set up your products
   • 3.1 Product essentials in your catalog
   • 3.2 Enable color swatches
   • 3.3 Show multiple images per variant
   • 3.4 Customize the product page layout
   • 3.5 Show related and recommended products
4. Day 4 — Navigation, header & footer
   • 4.1 Build your main menu
   • 4.2 Configure the header layout
   • 4.3 Set up a mega menu
   • 4.4 Configure the announcement bar
   • 4.5 Edit the footer
   • 4.6 Set up the mobile dock
5. Day 5 — Pre-launch checklist
   • 5.1 Test on mobile
   • 5.2 Check cart and checkout
   • 5.3 Add legal & policy pages
   • 5.4 Connect social media
   • 5.5 Customize the password page
   • 5.6 Final review & go live

Day 1 — Brand your store

Today's goal: make your store look unmistakably yours. By the end of Day 1 your logo, colors, fonts, and favicon will all reflect your brand. Everything you do today happens in one place — Theme Settings — and applies globally across every page of your store.

1.1 Open the Theme Editor

The Theme Editor is the visual workspace where you'll do almost all of your store customization. Get comfortable opening it — you'll be here a lot.

1. From your Shopline admin, go to Online Store > Design.
2. Find the Maison theme card under "Current theme".
3. Click Design (or Customize).

You should now see a split view: a live preview of your store on the right, and a sidebar with sections, blocks, and settings on the left. The gear icon in the sidebar opens Theme Settings — the global controls we'll use today.

1.2 Upload your logo

Your logo is the first thing customers see in the header on every page.

1. In Theme Settings, open the Logo section.
2. Click Select image and upload your logo file.
3. Adjust the Logo width slider until it looks balanced in the live preview.
4. If you have a separate Mobile logo, upload it in the field below.

1.3 Set your brand colors

Maison gives you control over every color used across the store — text, backgrounds, buttons, prices, drawers, alerts, and more. Don't try to set them all at once. Focus on these essentials first:

• Background color — the main color behind page content (usually white or a soft off-white).
• Text color — the main text color (usually near-black or dark gray for readability).
• Highlight color — your brand accent. Used for links, hover states, focus rings.
• Button background and Button text — the main call-to-action button (e.g., "Add to cart").
• Price color and Discount tag color — for product prices and sale badges.

To set them:

1. In Theme Settings, open the Colors section.
2. Click any color swatch to open the color picker.
3. Enter your HEX code (e.g., #2B2B2B) or pick visually.

1.4 Choose your typography

Maison lets you set separate fonts for titles, body text, and buttons — but you don't have to use three different fonts. The cleanest look is usually one font for titles + one font for everything else, or even one font throughout.

1. In Theme Settings, open the Typography section.
2. Click each font field (Title font, Body font, Button font) to browse the available system and Google fonts.
3. Adjust the size, line height, and weight ranges to taste — but the defaults are designed to look good out of the box.

1.5 Add your favicon

The favicon is the tiny icon shown in browser tabs and bookmarks. It's small but missing it makes your store feel unfinished.

1. In Theme Settings, open the Favicon section.
2. Upload a square image of your logo or brand mark.
3. Recommended size: 32 × 32 pixels (or any square image up to 192 × 192 px).

Save your changes when done. Click anywhere in the preview to refresh and see your branding applied across the store.

Day 1 done. Your store now has a logo, brand colors, typography, and a favicon. Tomorrow we'll build your homepage.

Day 2 — Build your homepage

Your homepage is the front door of your store. Today we'll customize the demo homepage to showcase your products and message. The good news: Maison's demo homepage already has a polished layout — you're mostly swapping in your own content, not building from scratch.

2.1 Understand the homepage structure

The Maison demo homepage is built from a stack of sections. Each section is an independent block of content (a hero image, a row of featured products, a newsletter form, etc.) that you can edit, reorder, hide, or remove individually.

To see all sections of your homepage:

1. In the Theme Editor, make sure the page selector at the top is set to Home page.
2. Look at the sidebar — every section in your homepage is listed there in order.
3. Click any section name to select it; the live preview will scroll to it and highlight it.

2.2 Edit the hero / slideshow

The hero is the first thing visitors see — a large banner image (or a slideshow of multiple banners). It should communicate what you sell and why it matters in under three seconds.

How sections are structured. Maison uses a block-based architecture: every section is a tree of smaller blocks, and each block has its own settings panel. Expanding Slideshow in the sidebar reveals its slides (each an Image block), and inside each slide a Content container holds the text blocks (Subheading, Heading, Button). To edit a piece, click the specific block — not the parent section. This same pattern repeats for every other section, so learning it once pays off all day.

Steps to customize the hero:

1. In the section list, click the Slideshow section name — the settings panel shows section-level options (autoplay, slide duration, height, transition).
2. Expand the section to reveal individual slides, then click a slide (Image block) to replace the image. Recommended size: 1920 × 1080 px or wider.
3. Expand the slide → Content container → click Heading, Subheading, and Button blocks one at a time to edit their text.
4. Set the Button link to your most important page (e.g., a featured collection).

2.3 Add featured collections

Below the hero, you typically want to point visitors toward your product categories. Maison's demo homepage uses the Featured collections (plural) section for this — it renders a row of collection cards (one per collection) that shoppers click to enter each collection page.

The block tree is deeper than Slideshow — five levels. Where each control lives is not obvious, so learn it once:

Featured collections          ← section: color, width, spacing
├─ Heading                    ← edit the title above the row
└─ List                       ← edit layout (grid/carousel), columns, spacing
   └─ Collection card         ← pick WHICH collection this card represents
      └─ Image                ← image style (aspect ratio, hover)
         └─ Info
            ├─ Product count  ← show/hide "12 products"
            └─ Title          ← show/hide the collection name

Steps to customize:

1. Edit the heading. Click the Heading block directly under the section → change the title (e.g., "Shop by room").
2. Set the layout. Click the List block → choose Grid or Carousel, set Columns (3 is typical), and adjust spacing. This is where the look is controlled — not at section level.

   

3. Pick which collections show. Click an individual Collection card block → use the Collection picker to select which collection it represents. Repeat for each card. Use Add block → Collection card inside the List to add more, or remove any you don't need (max 12).

   

2.4 Highlight your value propositions

Visitors want to know quickly: Why should I buy from you? A short row of value propositions (free shipping, quality guarantee, sustainable materials, etc.) builds trust.

Maison's Multicolumn section is perfect for this — but it's not on the default homepage, so this is also the moment to learn how to add any new section.

Add a new section. Scroll to the bottom of the section list in the sidebar and click + Add section. The section picker opens with all available templates grouped by category (Banner, Gallery, Content, etc.). Find Multicolumn, click it, and it gets inserted at the bottom of the page — drag it to your preferred position.

Multicolumn's block tree follows the same pattern as Featured collections — a List with repeatable children:

Multicolumn
├─ Heading             ← optional title above the row
└─ List                ← columns count, layout, spacing
   └─ Column           ← repeatable, one per value prop
      ├─ Image         ← the icon
      ├─ Title         ← 2-4 words
      └─ Text          ← one supporting sentence

Steps to customize:

1. Click the Heading block → write a short title ("Why shop with us", or leave blank if the icons speak for themselves).
2. Click the List block → set 3-4 columns. More than 4 starts to feel cluttered.
3. For each Column block's children: click Image to upload an icon (a simple line illustration works best), click Title for a 2-4 word label, click Text for one supporting sentence.
4. To add or remove columns: select the List block and use the add/remove controls, or duplicate an existing Column block.

2.5 Add a newsletter signup

Even if you're not running email campaigns yet, start collecting subscribers from day one. By the time you launch a sale, you'll have a list ready.

Maison ships an Email signup section you can add to the homepage, and also includes an email-signup block inside the Footer section (great if you want it visible on every page).

1. Option A — Dedicated section on the homepage: click + Add section at the bottom of the section list, pick Email signup, and drop it wherever you want. Its tree is flat — just three blocks:

   Email signup
   ├─ Heading         ← e.g., "Get 10% off your first order"
   ├─ Rich-text       ← supporting sentence
   └─ Email signup    ← the actual form (email input + submit)
   

2. Option B — Inside the footer: scroll to the Footer section in the sidebar, expand it, and open the Contact group column — that's the only footer column where the Email signup block is allowed (alongside Social media).
3. Either way, edit the heading and supporting text to fit your voice. "Get 10% off your first order" outperforms "Subscribe to our newsletter" in most stores.
4. The form is connected to your Shopline customer list by default — subscribers show up in Customers → Subscribers in the admin.

2.6 Reorder, hide & remove sections

The demo homepage has 11 sections by default. You probably don't need all of them. Be ruthless — fewer sections = a faster, cleaner store.

To reorder a section:

1. In the section list, drag the section by its handle (or use the up/down arrows).
2. Drop it into its new position.

To hide a section temporarily, click the eye icon. To remove it permanently, click the section, then click the trash icon (or "Remove section").

Day 2 done. Your homepage now showcases your hero message, products, value propositions, and a way to capture emails. Tomorrow we'll set up the product pages.

Day 3 — Set up your products

Today we focus on the product pages — where customers actually decide to buy. The goal: make every product page clear, beautiful, and trustworthy. Most of the heavy lifting today happens in your Shopline admin (where you manage products and inventory), with a few theme-side tweaks.

3.1 Product essentials in your catalog

Before customizing the product page template, make sure each of your products has these essentials in the Shopline admin (under Products):

• Multiple high-quality images. At least 3-5 per product, showing different angles, scale, and detail. The first image is what appears on the product card.
• A clear product title. Short, descriptive, and free of marketing fluff.
• A useful description. Specifications, materials, dimensions — answer the questions buyers ask before purchasing.
• Variants set up correctly. If your product has options (size, color, material), use Shopline's variant system. Each variant should have its own SKU and inventory.
• A price and a compare-at price if you want to show a discount.

3.2 Enable color swatches

If your products come in multiple colors, plain text buttons ("Navy", "Olive", "Beige") are far less effective than visual swatch circles. Setting this up is a one-time configuration that applies to every product across your store.

This is its own deep-dive guide — see Color Swatches Guide for the complete walkthrough. The short version:

1. Define your color palette in Theme Settings > Color swatches (one color per line: Navy: #4A5875).
2. In your product page template, open the Variant picker block and enable Color swatches.
3. Optionally, add a color swatches block to your product cards as well.

3.3 Show multiple images per variant

By default, Shopline lets you assign one featured image per variant. But if your product has, say, a Purple and an Olive version, you probably want multiple photos of each color — front, side, detail, in-context. Maison supports this through a feature called variant media grouping.

Full instructions: see Multiple Images Per Variant Guide. The short version:

1. Set up the theme.gang_media metafield definition in Shopline admin (one-time setup).
2. For each variant, assign the relevant images via the metafield.
3. In your product page template, enable the Multiple media per variant toggle in the Product Media block.

3.4 Customize the product page layout

The product page is built from blocks: title, price, variant picker, buy buttons, tabs, share, and so on. You can reorder them, hide unused ones, and customize each block's settings.

1. In the Theme Editor, switch to a Product page using the page selector at the top.
2. The sidebar loads the main-product section. Expand it to see two big areas: product-main (image gallery + buy box) and product-additional (everything below the fold — description, tabs, specs, related blocks).
3. Click any block to edit its settings. Drag to reorder. Click the eye icon to hide.

Editing the Shipping / Returns / Manufacturing content. By default, Maison renders this info as a Tabs block (product/tabs) inside product-additional. Each tab has its own Content container holding the body — three levels under Tabs:

Tabs                       ← block: title size, alignment, spacing
├─ Tab "Shipping"          ← title field only
│  └─ Content container    ← background, layout, padding
│     └─ Rich-text         ← the actual body content lives here
├─ Tab "Return policy"
│  └─ Content container
│     └─ Rich-text
└─ Tab "Manufacturing"
   └─ Content container
      └─ Rich-text

To rename a tab, click the Tab block and edit its title. To edit the body, drill down: Tab → Content container → Rich-text block, then type/paste in the rich-text editor. To add a new tab, select the parent Tabs block and use Add block → Tab (max 6) — the new tab comes with an empty Content container you can fill in. Other content blocks (Image, Video, Heading, etc.) can also live inside Content container if you want richer tab bodies.

Other common adjustments:

• Buy buttons — Decide whether to show a quantity selector and accelerated checkout buttons (Apple Pay, Google Pay, etc.).
• Share button — Position it where it doesn't distract from the buy flow.
• Specs / Description / Selling points — All available as separate blocks in product-additional.

3.5 Show related and recommended products

At the bottom of every product page, show related products to keep customers browsing. Maison's product page template includes a Recommended products section by default.

1. Find the Recommended products section in your product page template.
2. Set how many products to show (4 is a good default).
3. Choose a heading like "You might also like" or "Pairs well with".

Day 3 done. Your products now have polished product pages with clear images, swatches, and recommendations. Tomorrow we'll handle navigation.

Day 4 — Navigation, header & footer

Today we make sure customers can find what they're looking for. Navigation is invisible when it works and infuriating when it doesn't. Spend time here — it pays back forever.

4.1 Build your main menu

The main menu is the row of links at the top of every page. Important: the menu is managed in Shopline admin, not the Theme Editor. The theme just displays whatever menu you've configured.

1. From your Shopline admin, go to Online Store > Navigation.
2. Click the menu currently used as your main menu (often called "Main menu" or "Header menu").
3. Add menu items by clicking Add menu item. Each item has a Name (what shoppers see) and a Link (where it goes — a collection, product, page, or URL).
4. To create a dropdown, drag a menu item and indent it underneath a parent item.
5. You can nest two levels deep (parent > child > grandchild).

4.2 Configure the header layout

Back in the Theme Editor, the Header section controls how your header is laid out — where the logo sits, where the menu sits, what icons appear in the toolbar.

1. In the section list, click the Header section.

2. Choose a Header layout. Maison offers seven arrangements:

   • Left — logo left, menu right of logo. Classic e-commerce.
   • Left-center — logo left, menu centered on the row.
   • Left-drawer — logo left, menu hidden behind a hamburger drawer. Minimalist.
   • Center-left (default) — logo centered, menu on the row above/below.
   • Center-split — logo centered, menu split into two halves on either side. Boutique / fashion feel.
   • Center — logo centered, menu toggled via a button. Gives the logo maximum prominence.
   • Center-drawer — logo centered, menu hidden behind a hamburger drawer.
3. Choose which toolbar icons to show: search, account, wishlist, cart.
4. Decide whether the header should be sticky on scroll (recommended).

4.3 Set up a mega menu

If you sell across many categories, a standard dropdown isn't enough. The Mega Menu turns a dropdown into a full-width panel with submenu links plus promotional cards (images, videos, calls to action).

Full walkthrough: see Mega Menu Guide. The short version:

1. In the Header section, add a Mega Menu block.
2. Set its Menu title to exactly match a top-level item from your main navigation (e.g., "Shop").
3. Add up to 5 column blocks inside it (link lists and/or promotion columns — each promotion column holds one promo card).

4.4 Configure the announcement bar

The announcement bar is the slim strip above the header — perfect for shipping promos, sale messages, or store-wide notices.

1. In the section list, click the Announcement section (it sits above Header in the Header group).
2. Edit the messages — you can add multiple and they'll cycle automatically.
3. Set the switch interval (3-20 seconds).
4. Pick a Display mode — Maison offers four:
   • Marquee — messages scroll continuously sideways (newsticker style).
   • Horizontal — messages slide left-to-right on a timer.
   • Vertical — messages slide up-to-down on a timer.
   • Manual — visitors step through with arrows; no auto-cycling.
5. Optionally enable the country picker to confirm the visitor's market, and the locale picker for language switching.

4.5 Edit the footer

The footer is your secondary navigation — where customers go when they didn't find what they needed in the main menu. It should contain: contact info, secondary menus, social links, payment icons, and your legal pages.

1. In the section list, click the Footer section.
2. Edit each block: Information, Contact, Newsletter, Social media, etc.
3. Add or rearrange blocks as needed (max 5 information groups, 1 contact group, 1 additional group).
4. Edit the copyright text in the Footer copyright section below.
5. Make sure your payment icons reflect the payment methods you actually accept.

4.6 Set up the mobile dock

On mobile, Maison can show a fixed dock at the bottom of the screen with quick-access icons (Home, Menu, Search, Account, Cart). This dramatically improves mobile UX.

1. In the section list, find the Mobile dock section (or similar).
2. Add up to 6 dock items. Common combinations: Home, Menu, Search, Account, Cart.
3. Each item picks an icon and a destination link.

Day 4 done. Customers can now find anything in your store from any device. One day to go.

Day 5 — Pre-launch checklist

Today is about polish and verification. You won't be designing much — you'll be testing, fixing small issues, and getting the store ready to go public.

5.1 Test on mobile

More than half of your customers will visit on a phone. The Theme Editor has a mobile preview button at the top — use it constantly.

Walk through your store on mobile and check:

• The hero image looks good on a narrow screen (no important content cut off).
• Text is readable without zooming.
• Buttons are large enough to tap with a thumb.
• The menu drawer opens and closes smoothly.
• The cart drawer works.
• Filters and sorting work on collection pages.
• The mobile dock (if enabled) doesn't cover important content.

Then preview on a real phone — open your store on your own device. There's no substitute for actually using it.

5.2 Check cart and checkout

Run a full test purchase on your store before going live. Don't skip this — checkout bugs are the costliest kind.

1. From the live preview, add a product to the cart.
2. Open the cart drawer (or page). Confirm the line item, price, and quantity all look correct.
3. Test removing an item.
4. Test changing quantity.
5. Apply a discount code if you have one.
6. Proceed to checkout. Confirm shipping options appear, payment options work, and the confirmation page displays correctly.

5.3 Add legal & policy pages

Most regions require online stores to publish certain policies. At minimum, create:

• Privacy Policy — how you collect and use customer data.
• Refund / Return Policy — your conditions for returns.
• Terms of Service — the contract between you and your customers.
• Shipping Policy — delivery times, costs, regions covered.

Shopline has built-in policy templates you can adapt. Generate them under Settings > Policies in your admin, then link them in your footer.

5.4 Connect social media

Add your social media URLs in Theme Settings > Social media. Once filled in, the social icons in your footer (and elsewhere) will automatically link to the right places.

1. Open Theme Settings > Social media.
2. Paste your full URLs (e.g., https://instagram.com/yourstore) into each field.
3. Leave any fields blank if you don't use that platform — only filled-in icons will appear.

5.5 Customize the password page

If your store is still password-protected before launch, the password page is what visitors see first. It's your "coming soon" page — make it look intentional.

1. From your Shopline admin, switch to the password page or open it from the Theme Editor's page selector.
2. The password template uses a single main-password section. Its main controls are the background image (with overlay opacity), color override, and a Content container ($group) block where your headline, subheadline, and any marketing copy live — edit the Content container's child blocks (Heading, Rich-text, Image, etc.) to compose your "coming soon" message.
3. The section also includes password-header (logo area) and password-footer (social + legal links) blocks you can customize.
4. Make sure the built-in password prompt is visible — visitors need somewhere to type the store password.

5.6 Final review & go live

One last walk-through before you go live. Click through every important page in your live preview:

• Homepage — does it tell your story?
• A collection page — do filters and sorting work?
• A product page — are images, swatches, price, and buy button all correct?
• Cart and checkout — final test purchase.
• Account / login pages — even if you don't expect visitors here, they should look polished.
• 404 page — visit any non-existent URL and check the error page is on-brand.
• Search results — search for a product name and a typo to see how results look.

When everything looks good:

1. From your Shopline admin, go to Settings > General (or Online Store > Preferences).
2. Disable the password protection.
3. Confirm your store domain is set up correctly.
4. Your store is now live.

Day 5 done. Your store is live. Congratulations.

Your store will keep evolving — come back to this guide whenever you onboard a teammate or rebuild a section from scratch.

---

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our website for assistance.