Openspaces Labs
  • 🏠 Getting Started
    • Installing the Plain Jane Theme
    • Theme Versions + Features Table
  • 🧰 Theme Settings
    • Announcement Bar
    • Animations
    • Cart Drawer
    • Clock Settings
    • Collection Layout Settings
    • Cursor Settings
    • Footer Settings
    • Global Menu Settings
    • Music Player Settings
    • Logo Settings
    • Skip Home Screen
    • SEO Settings
    • Main Theme Color
    • Typography Settings
  • 🗂 Pages & Menus
    • Homepage + Menu
      • Center Menu
      • Side-Aligned Menu
      • Compact Menu Layout (Global Menu)
    • Collection Page
      • Classic Collection
      • Sidebar Collection
    • Collection List Page
    • Product Page
      • Product Section (Showcase)
      • Product Section (Thumbnail)
    • About Page
    • Contact Page
    • Lookbook Page
      • 🛠 How to Create a Lookbook Page
      • 🗂 Creating a Lookbook Archive
      • ⚙️ Lookbook Settings & Features
    • Password Page
      • How To Password Lock Store
      • How To Add and Set Timer
      • How To Collect Emails + SMS
      • Using The Store Unlock Animation
  • 🧩Sections and Features
    • Blog Feed Section
    • Collection Display Section
    • Collection List Section
    • Email Signup (Popup)
    • Email Signup (Embed)
    • FAQ Section
    • Hero Section
    • Image Selector Section
    • Image Stream Section
    • Marquee Section
    • Preloader Section
    • Product Carousel Section
    • Text Block Section
    • Video Spotlight Section
  • 🏷️Advanced
    • How to Add Size Charts to Each Product
    • Setting Up Color Swatches
    • Setting Up Model Info
    • Setting Up Pre-Orders
  • 👥Customer Accounts
    • How To Setup Customer Accounts
    • Login Page
    • Register Page
    • Account Dashboard Page
    • Address Management Page
  • 🌎Languages & SEO
    • Language Files (Locales)
    • Update Favicon
    • Meta Descriptions
  • ⭐️Plain Jane Interactive
    • How to Create an Interactive Space
    • Setting The Background
    • Adding Interactive Points
    • Using Transition Arrows
    • Best Practices for Mobile + Spacing
  • 💬 FAQ & Troubleshooting
Powered by GitBook
On this page
  • About the Side-Aligned Menu
  • How to Set It Up
  • Customizing Your Menu
  • Background Customization
  • When to Use This Layout
  • Need Help?
  1. 🗂 Pages & Menus
  2. Homepage + Menu

Side-Aligned Menu

For Plain Jane and Plain Jane Interactive

PreviousCenter MenuNextCompact Menu Layout (Global Menu)

Last updated 4 days ago

What You’ll Learn

  • How to create a homepage using the Side-Aligned Menu layout

  • How to customize background, menu links, and styling

About the Side-Aligned Menu

The Side-Aligned Menu layout places your logo and navigation vertically along the left side of the screen. This layout is clean and minimal, giving visual priority to your background or brand image.

How to Set It Up

1. Start with a Clean Canvas

  1. In the Theme Editor, remove all existing sections.

  2. Keep only the Page Canvas section.

2. Add the Side-Aligned Menu

  1. Click Add Section > Side-Aligned Menu

  2. Your navigation will now appear on the left side of the screen.

  3. Select a Shopify menu to connect your navigation links.

💡 If you don’t have a menu yet, go to Shopify Admin > Online Store > Navigation to create one.

Customizing Your Menu

Once added, you can configure the following:

Menu Content and Behavior

  • Choose Menu: Connect a menu from your Shopify navigation

  • Social Media Icons: Click "Add Social Media Link" to add icons for X, TikTok, Threads, and more

  • Show Login Link: Choose to show it at the Top, Bottom, or hide it completely

Logo and Link Styling

  • Logo Alignment: Left or Right

  • Menu Alignment: Align links left or right within the menu

  • Link Text Color / Hover Color

  • Link Background Color (on hover)

  • Link Font Size and Vertical Spacing

Visual Effects

  • Disable Highlight Effect: Turns off the hover highlight style

  • Enable Nav Scaling: Enables animation for menu item scaling

Background Customization

The Side-Aligned Menu section includes built-in background options, so you no longer need to use the Dynamic Background section. In newer versions of the theme, Dynamic Background is deprecated for this layout.

Background Style Options:

  • Solid Color: Set a color for desktop and mobile

  • Image: Upload different images for desktop and mobile

  • Slideshow: Add up to 3 rotating image slides

  • Video: Upload a video background (note: may not autoplay on iPhones with Low Power Mode)

Additional Background Settings:

  • Section Height: Set to Full Height (100%) or custom

  • Overlay Colors & Opacity:

    • Separate control for top and bottom overlays

    • Independent settings for desktop and mobile

💡 Tip: Use overlays to create contrast between text and background visuals.

When to Use This Layout

Use the Side-Aligned Menu when:

  • You want a clean, modern layout with vertical nav

  • Your background image or brand art is central to the experience

  • You don’t plan to use many scrollable sections on the homepage

Need Help?

  • 📧 Email us at: support@openspaces.design

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

💬 Join our community on Discord:

https://discord.gg/hcc2GvgZc6