Appearance
Breadcrumbs ​
This guide describes setting up the Breadcrumbs section.
Breadcrumbs show your store's visitors how the current store page is positioned within your store's overall page structure. For example, the breadcrumb "Pages / Contact" indicates that the Contact page is one page-level below the level of Pages. Store visitors use breadcrumbs to navigate your store's pages.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks
Configure the Breadcrumbs section ​
To configure your Breadcrumbs section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a store page that contains a Breadcrumb section.
Note
You can add the section to the:
- Header, Footer, and Overlay areas of any page excluding Checkout, Gift card, and Password pages.
- Template area of any page excluding 404, Cart, Checkout, Collection list, Gift card, and Home pages.
From the side menu, select Breadcrumbs.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Separator | Use the Separator options to specify a separator character to display inside the section. In the example breadcrumb Pages / Contact, the separator character is a forward slash or "/". The options include various slash, dash, dot, bar, and arrow characters. |
| Text alignment | Use the Text alignment options to align the section's text to the Left, Center, or Right. |
| Font size | Use the Font size options to specify a font size for the section's text. You can apply a Base or Small font size to the section's text. |
| Active text color | Use the Active text color options to specify a color for the section's active text. You can apply the Text, Accent 1 or Accent 2 color from the section's color scheme to the section's active text. Active text refers to the lowest level in the breadcrumb text. In the example breadcrumb "Pages / Contact", the active text is "Contact". |
| Color > Color scheme | Use the Color scheme selector to select a color scheme for the section. |
| Color > Theme settings (link) | Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store. |
| Theme settings | If available, 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. |
| Remove section | Select Remove section to delete the section from the current page. |