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 Center Menu
  • How to Set It Up
  • Customizing the Center Menu
  • Background Options
  • When to Use This Layout
  • Need Help?
  1. 🗂 Pages & Menus
  2. Homepage + Menu

Center Menu

PreviousHomepage + MenuNextSide-Aligned Menu

Last updated 4 days ago

What You’ll Learn

  • How to build a homepage using the Center Menu layout

  • How to connect your menu links and customize fonts, colors, and alignment

About the Center Menu

The Center Menu layout places your logo and navigation items stacked vertically in the center of the page. It’s inspired by brands like Supreme and is designed for stores that want a high-impact landing experience with minimal scroll.

This layout works best with a strong background (image or video) and minimal homepage content.

⚠️ The Dynamic Background section has been deprecated in the latest theme versions. All background customization should now be handled directly within the Center Menu section.

How to Set It Up

1. Start with a Clean Canvas

  • In the Theme Editor, remove all sections except Page Canvas.

2. Add the Center Menu Section

  • Click Add Section > Center Menu

  • Your logo and menu will appear centered on the page

3. Connect Your Navigation Menu

  • In the Center Menu settings, select a Shopify menu from the dropdown

  • If you don’t have a menu yet:

    • Go to Shopify Admin > Online Store > Navigation and create one

Customizing the Center Menu

Logo Settings

  • Clock: Enable or disable the live store clock display

  • Date Format: Choose your preferred date format

  • Time Color: Customize clock text color

Menu Configuration

  • Choose Menu: Connect your navigation

  • Alignment: Align your links to the left, center, or right

  • Show Login Link: Optionally display a customer login button

Styling Options

  • Link Text Color

  • Link Text Color (on hover)

  • Link Background Color (on hover)

  • Link Font Size

  • Link Vertical Spacing

Social Media Icons

  • Add links for X, Instagram, TikTok, and more via the Social Media Link block under the section

Background Options

The Center Menu section allows the following background types:

  • Solid Color: Set different colors for desktop and mobile

  • Image: Upload background images per device

  • Slideshow: Add up to 3 rotating images

  • Video: Add a looping video background (Note: videos may not autoplay on iOS with Low Power Mode enabled)

Additional Settings

  • Section Height: Set to Full Height or adjust manually

  • Overlay Options:

    • Control top and bottom overlay colors and opacity

    • Separate controls for desktop and mobile

💡 Tip: Use overlays to help white or light text stand out against background images or video.

When to Use This Layout

Use the Center Menu layout when:

  • You want a bold, minimal homepage

  • You want the first interaction to be a simple menu with high visual impact

  • You want to drive traffic directly into collections or product pages

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