# 2. Setting Up Your Homepage

{% embed url="<https://youtu.be/KpO8Wdo-LeI>" %}

{% hint style="info" %}

> ⚠️ Note: The `Dynamic Background` section has been deprecated in the latest versions of Plain Jane and Interactive. Use `Page Canvas` instead—it offers the same functionality for background images, videos, colors, etc.
>
> ⚠️ Note: This guide does **not** apply to Plain Jane Starter users.
> {% endhint %}

### What You'll Learn

* How to customize your homepage layout in Plain Jane v3 and Interactive v2
* How to add and configure Center, Side-Aligned, and Compact menus
* When to use each layout for best results
* How to link menus and manage navigation
* How to skip the homepage entirely if desired

>

***

### 🛠️ For New Users: Setting Up a Menu

1. Go to **Online Store** > **Navigation** in your Shopify Admin.
2. Click **Add Menu** and name it something like `Test Menu`.
3. Add menu items like:
   * `Men` → link to your Men's collection
   * `Lookbook` → link to a custom page or homepage
   * `Contact` → link to Shopify's built-in contact page
4. Click **Save**.

***

### 🎨 Layout 1: Center Menu

This is the most popular layout (e.g., Supreme-style homepage).

#### How to Set It Up

1. Open your theme in the **Customize** editor.

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-c883d8bfbd9e224dcf5718a28d8015050b329e5d%2F01-customizer-overview.png?alt=media" alt="Shopify theme customizer overview"><figcaption><p>Theme customizer interface showing homepage sections</p></figcaption></figure>

2. Make sure these sections are present:
   * `Preloader`
   * `Email Popup`
   * `Page Canvas`
   * `Center Menu`

> 💡 Tip: `Page Canvas` replaces the deprecated `Dynamic Background` section. Use it for background images or colors.

#### Link Your Menu

* Click the `Center Menu` section

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-3f42ed5ed036d46abeadf7d8af7bbc1145e06572%2F02-center-menu-section.png?alt=media" alt="Center Menu section selected in theme customizer"><figcaption><p>Center Menu section selected showing settings panel</p></figcaption></figure>

* On the right panel, **choose your menu** from the dropdown (e.g., `Test Menu`)

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-3f42ed5ed036d46abeadf7d8af7bbc1145e06572%2F03-center-menu-settings.png?alt=media" alt="Center Menu settings panel"><figcaption><p>Center Menu settings panel with menu dropdown</p></figcaption></figure>

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-2c6534c87d0ceb421faa08bcb7cef1ce77fde9a6%2F04-center-menu-dropdown.png?alt=media" alt="Center Menu dropdown selection"><figcaption><p>Menu dropdown showing available navigation menus</p></figcaption></figure>

#### Social Media Icons

* Toggle icons **on**
* Paste full URLs to your profiles (e.g., TikTok, Threads, Tumblr)

> 💡 Tip: Don't add scrollable content below the center menu. Keep it clean and simple.

***

### 🎨 Layout 2: Side-Aligned Menu

Good for brands that want minimal vertical menus.

#### Setup Steps

1. In the theme editor, remove the `Center Menu`.
2. Click **Add Section** > `Side Aligned Menu`

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-d8254d94e31bbf3b4f58eb0a65e940b6d493706e%2F05-add-section-modal.png?alt=media" alt="Add section modal in theme customizer"><figcaption><p>Add section modal showing available sections</p></figcaption></figure>

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-004c313d78af8a806f09d4c79f19ac3f749943b1%2F06-side-menu-added.png?alt=media" alt="Side Aligned Menu section added"><figcaption><p>Side Aligned Menu section successfully added</p></figcaption></figure>

3. Select your menu from the right panel

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-f05239c4f2e4079bdf7f43580451255a50917303%2F07-side-menu-settings.png?alt=media" alt="Side Aligned Menu settings"><figcaption><p>Side Aligned Menu settings and customization options</p></figcaption></figure>

#### Customization Options

* Adjust **font size**, **link spacing**, and **colors**
* Toggle **login link** visibility (requires customer accounts enabled)
* Choose **logo alignment** (left or right)
* Change **font family** under `Theme Settings > Typography`

> 💡 Tip: Avoid stacking product sections beneath this layout—it’s not scroll-friendly.

***

### 🎨 Layout 3: Compact Menu

This layout features a hamburger icon in the top right.

#### Setup Steps

1. Add the `Compact Menu` section

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-e4c5394e029df5e8bc647eb1316d70dddd7b64ee%2F08-compact-menu-section.png?alt=media" alt="Compact Menu section in theme customizer"><figcaption><p>Compact Menu section added to homepage</p></figcaption></figure>

2. Link your menu under `Theme Settings > Global Menu Settings`

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-9267839022fcd2cd09642d0d46310498ad3b9fa4%2F09-global-menu-settings.png?alt=media" alt="Global Menu Settings in Theme Settings"><figcaption><p>Global Menu Settings for configuring Compact Menu</p></figcaption></figure>

3. Center or align your logo however you'd like

#### Add Background + Content

* Use the `Page Canvas` section to:
  * Set a background color or upload an image

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-be1d8165c18421fd3c1c29d5119a10d3033dacc3%2F10-page-canvas-settings.png?alt=media" alt="Page Canvas settings for background customization"><figcaption><p>Page Canvas settings for adding background images and colors</p></figcaption></figure>

* Add sections like `Collection List` or `Product Carousel`

> ⚠️ Warning: This is the **only layout** recommended for scrollable homepages.

***

### 🚀 Skipping the Homepage (Optional)

Want to take visitors straight to a collection?

1. Go to `Theme Settings > Homepage Settings`
2. Enable **Skip Enter Screen**
3. Set the destination page (e.g., a specific collection)

> 💡 Tip: This is useful for product-focused brands that don’t need a homepage.

***

### 📌 Final Notes

* Use **Page Canvas** for all homepage background customization
* Keep your layout minimal and functional
* Always save and refresh to preview your changes

Supported Layouts:

* Center Menu (static landing)
* Side-Aligned Menu (minimal vertical nav)
* Compact Menu (scrollable homepage builder)

### **Need Help?**

* 💬 **For Tech Shpport Join Us On Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website