# 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.
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
* On the right panel, **choose your menu** from the dropdown (e.g., `Test Menu`)

#### 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`
3. Select your menu from the right panel

#### 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
2. Link your menu under `Theme Settings > Global Menu Settings`
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
* 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/plain-jane-interactive/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.