# 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="/files/DIV2YivprVqcbVPSVQEY" 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="/files/iu4RuktnvDoGKjil8pKg" 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="/files/xIoe5ONLFceChOBEpzKM" alt="Center Menu settings panel"><figcaption><p>Center Menu settings panel with menu dropdown</p></figcaption></figure>

<figure><img src="/files/9S8vIZu4oRZRKYuDDNJ3" 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="/files/yaTGAZYE7mbrxWr1VmxQ" alt="Add section modal in theme customizer"><figcaption><p>Add section modal showing available sections</p></figcaption></figure>

<figure><img src="/files/LUBxC8k463bWpt2EqbEL" 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="/files/zxh4TGTpZrjqvblEtHwn" 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="/files/JV7rIrnMP5MbMu8uv5OQ" 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="/files/7ozqkYjDgx4EMc2WoV6D" 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="/files/hig4f96DRXEkc7oKNcac" 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/getting-started/2.-setting-up-your-homepage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.