2. Setting Up Your Homepage

For Plain Jane and Interactive

⚠️ 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.

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.

Theme customizer interface showing homepage sections

1. 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

Center Menu section selected showing settings panel

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

Center Menu settings panel with menu dropdown

Menu dropdown showing available navigation menus

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

Add section modal showing available sections

Side Aligned Menu section successfully added

1. Select your menu from the right panel

Side Aligned Menu settings and customization options

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

Compact Menu section added to homepage

1. Link your menu under Theme Settings > Global Menu Settings

Global Menu Settings for configuring Compact Menu

1. 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

Page Canvas settings for adding background images and colors

• 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: [email protected]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website