Sidebar

This guide describes setting up the Sidebar section.

Use the section to provide store visitors with a sidebar menu for navigating the pages in your store.

An example Sidebar section on a store's Homepage page.

The previous image shows a Sidebar section on the left side of a store's Homepage.

Important

By default, the Sidebar's visibility is set to off or "hidden". To display the Sidebar section, in Theme settings > Sidebar, set the Enable sidebar checkbox to on. After you enable the Sidebar in Theme settings, follow the steps in this article to Set up a Sidebar section.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

To set up a Sidebar section:

Go to Customize theme.
At the top of the page, use the dropdown to select the Homepage template.
Note
After you enable the Sidebar section in Theme settings, by default, Theme editor displays the section in the Sidebar area of all page templates, excluding the Checkout, Password, and Gift card pages.
From the side menu, select Sidebar.
Select a setting described in the following table.

Setting name	Description
Logo > Logo max width	Adjust the slider Logo max width to set a maximum width for image(s) inside the section. The minimum slider value is `10px` or pixels, and the maximum value is `500px`. Edit your logo in Theme settings > Logo. For example, to display your logo in the sidebar, in Theme settings > Logo, set the Show logo checkbox to `on`. The width of the image does not exceed the width of the sidebar.
Layout > Padding	Adjust the Padding slider to resize the empty space that's displayed around the section. The minimum slider value is `0px` or pixels, and the maximum value is `2px`.
Layout > Vertical spacing between blocks	Adjust the slider Vertical spacing between blocks to resize the empty vertical space that's displayed around the blocks inside the section. The minimum slider value is `0px` or pixels, and the maximum value is `2px`.
Theme settings	Select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

A default Sidebar section contains no blocks. To configure a block inside the section:

Go to Customize theme.
At the top of the page, use the dropdown to select the Homepage template.
From the side menu, expand the Sidebar section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add block, choose a block to add, and then select the block you added.
Note
Inside the section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.
Apply a block setting described in the Table: Sidebar blocks.

The following table describes the blocks inside the Sidebar section, and their corresponding settings.

To configure a block, refer to Configure a block within a Sidebar section.

Block name	Block description	Block setting(s)
Menu	Display a navigation menu inside the section.	Use the Menu selector options to set up a menu inside the block. Refer to Set up a Sidebar menu block. Select the Nested navigation style radio buttons to set a layout style for nested navigation menu items inside the block. The style options are Accordion, Contextual, and Expanded. Select the checkbox Enable main navigation semantics to show/hide semantics for main navigation menu items inside the block. Enable this setting if you use the block as your store's main navigation. Select the checkbox Show cart link as last menu item to show/hide a link to your store's Cart page as the last menu item inside the block. Select the checkbox Show collection products count to show/hide the number of products associated with each collection that's linked inside the block. The count is displayed beside the name of the collection. Select Remove block to delete the block from the section.
Rich text	Display an area containing formatted text inside the section.	In the Paragraph box, enter text to display inside the block. Format the text and add links using the Text editor pane. To display text from a dynamic source, select the Insert dynamic source icon, beside the Paragraph box, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the Text alignment dropdown to position text inside the block to the Left, Center, or Right. Select Remove block to delete the block from the section.
Avatar	Add an image to use as an Avatar inside the section.	Use the Image selector options to set up an image inside the block. Refer to Add, replace or remove an image or video inside a section or block. To display an image from a dynamic source, select the Connect dynamic source icon, beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. Adjust the Image max width slider to set a maximum width for the image inside the block. The width of the image does not exceed the width of the sidebar. Select the Crop radio buttons to set a cropping style for the block's image to Circle or Square. Select Remove block to delete the block from the section.
Button	Display a (linked) button inside the section.	In the Label box, enter text to display as button label text. The button is displayed inside the block when the Link box is populated. In the Link box, enter a URL or select a link to store page. The link is used by the button that's displayed inside the block. To remove a link, select the X icon inside the text box. To visit the link, select the Visit link icon above the Link box. To display a button link from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields Select Remove block to delete the block from the section.
Social media	Display links to your store's social media inside the section.	Select the Display as radio buttons to display links to your store's social media as Icons or Text. Select the Text layout radio buttons to set a layout style for the block's text to Vertical or Horizontal. Select Remove block to delete the block from the section.

To set up a menu inside a Sidebar menu block, apply the following settings in Sidebar > Menu (block).

If the block has no menu, to select a menu, choose Select menu. Enter the name of a menu into the Search box, or pick a menu from the list, and then choose Select.
To edit the current menu, select the Menu link. The link opens the Navigation menu editor in Shopify admin. Use the editor to modify the menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.
To create a new menu, select Change > Change menu, and then follow the Create menu link. The link opens the Navigation > Add menu page in Shopify admin. Use the menu editor to create a new menu, and then the select the new menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.
To replace the current menu, select Change > 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, select Change > Remove menu.

Sidebar ​

Set up a Sidebar section ​

Configure a block within a Sidebar section ​

Table: Sidebar blocks ​

Set up a Sidebar menu block ​

Set up a Sidebar section

Configure a block within a Sidebar section

Table: Sidebar blocks

Set up a Sidebar menu block