Shopify Section Nav Section

Description of the Section

The Section Nav is a versatile and customizable navigation section for your Shopify store. This section adds a secondary navigation bar, which is perfect for creating an intuitive and informative user experience. The navigation bar can feature various icons, customizable text and colors, and a sticky behavior that ensures the navigation stays accessible while scrolling pages.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Premium Sections
3. Search for "Section Nav"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Catalogs: Improve the browsing experience by providing direct links to different product categories like "New Arrivals," "Best Sellers," and "Discounts."
2. Special Promotions: Highlight sections for limited-time offers, seasonal sales, or exclusive deals, making it easy for customers to navigate to these sections.
3. Customer Service: Add quick links to sections such as "Shipping Information," "Returns," "Customer Support," etc., to assist customers in finding essential information quickly.
4. Multi-step Forms: Use it for navigating between steps of a multi-step form, enhancing the user's journey in complex processes like product customization or service registration.

Overview of the Configuration Settings

• Text Settings:

  • Text Font: Choose the font for the navigation text.
  • Text Size: Set the font size for the navigation text.
  • Text Color: Choose the color for the navigation text.

• Colors:

  • Background: Set the background color of the navigation bar.
  • Background when Fixed: Change the background when the navigation bar becomes sticky.
  • Menu Background: Set the background color for the menu.
  • Menu Background when Fixed: Change the menu background when the navigation bar is sticky.
  • Active Color: Set the color for active navigation links.

• Dimensions:

  • Max Width of Section: Maximum width of the navigation section.
  • Spacing between menu items: Space between navigation items.
  • Padding: Padding values for the top, bottom, left, and right sides of the navigation bar.

• Nav Settings:

  • Border Radius: Border radius for the menu items.
  • Nav Icon Size: Size of the icons in the navigation items.
  • Nav Icon Spacing: Space between the icon and text within navigation items.
  • Nav Alignment: Text alignment for the navigation items.
  • Hide until scrolled: Option to hide the navigation bar until the user scrolls down.
  • Offset from Top: Vertical offset from the top for sticky behavior.
  • Offset from Top (Mobile): Vertical offset from the top for sticky behavior on mobile devices.

• Blocks:

  • Navigation: Add, remove, or configure individual navigation items. Each navigation item can have:
    • Nav Name: The text displayed in the navigation item.
    • Nav Icon: Choose from a list of predefined icons or upload your own image.
    • Skip Sections: Skip sections in the hierarchy to link farther down the page.