Skip to content

Sidebar menu

This guide describes setting up your store's Sidebar menu section to provide visitors with a menu for navigating your store's pages. The sidebar menu is typically displayed in a static position, on the left side of your store's pages.

The following image shows an example of a sidebar menu section on a store's homepage. To display images in the sidebar for the collections New arrivals and Sale, inside the section, the option is enabled to Feature second level links.

An example sidebar menu section on a store's homepage.

For general guidance with modifying sections, refer to Sections overview.

Set up the sidebar menu section

To set up your store's sidebar menu section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select the Home page template.

    Note

    The sidebar menu section is accessible from all page templates, excluding the Checkout, Password and Gift card page templates.

  2. From the side menu, select Sidebar menu.

    The sidebar menu section selected in Theme editor.

  3. Select a section setting described in the following table.

Section setting nameDescription
Menu > Static menuSet a menu to use inside the section. Refer to Set a menu for the sidebar.
Feature second level linksSelect the checkbox Feature second level links to show/hide second level links inside the section. With this setting enabled, the section displays second level links to products or collections. Note this setting also rearranges the order of products and collections inside the section.
Collection image cropSelect the dropdown Collection image crop to set the shape of collection images inside the section. The dropdown options are No crop, Portrait, Square, and Landscape. This setting applies to collection images, if the option is enabled to Feature second level links.
Secondary menuSet a secondary navigation menu to use inside the section, like a footer menu. Refer to Set a menu for the sidebar.
Logo > Custom logoUse the Custom logo menu options to set up an image to use as a logo inside the section. The recommended image dimensions are 800 x 300 pixels, in .jpg format.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
Logo > Custom logo widthSelect the slider Custom logo width to set a size for the logo image inside the section between 80 and 270 pixels or px.
Logo > Show searchSelect the Show search checkbox to show/ hide a search bar inside the section.
Logo > Show social iconsSelect the checkbox Show social icons to show/ hide links to your store's social media, inside the section. Refer to Social media.
Color > Color schemeUse the Color scheme dropdown to set the section's color scheme to Primary, Secondary or Tertiary. Refer to Colors.
Theme settingsSelect Theme settings to access additional settings for the section. Refer to Section theme settings menu.

Set a menu for the sidebar

Apply the following settings in Sidebar menu > Menu, to set a menu for the sidebar section. For a secondary navigation menu, like a footer, apply the following settings in Sidebar menu > Secondary menu.

  • To use an existing menu, choose Select menu. Enter the name of the menu into the Search box, or pick a menu from the list, and then choose Select.

  • To create a new menu, choose Select menu, and then follow the Create menu link. The link opens the Navigation > Add menu editor on your store's admin page. Use the editor to create a new menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.

    The menu selection options in Theme editor for the sidebar menu section.

  • To edit the current menu, select the Edit menu link. The link opens the Navigation menu editor on your store's admin page. Use the editor to modify the menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.

  • To replace the current menu, use the Change dropdown to select Change menu. Enter the name of the replacement menu into the Search box, or pick a replacement menu from the list, and then choose Select.

  • To delete the current menu, use the Change dropdown to select Remove menu.

    The menu modification options in Theme editor for the sidebar menu section.