How do I hide or change the look of the breadcrumbs?

In this article, we will go over how you can either hide or make changes to the breadcrumb trail on your Underground theme. The breadcrumbs are a list links showing the pages you have visited prior to the page your own. They're a good alternative to using the back button in the browser.

Hiding the Breadcrumbs

If you are using the Icon Theme, Mr Parker Theme, Fashionopolism Theme or Testament Theme you can hide/show the breadcrumbs by choosing a setting in the Theme Editor. Go to the theme you want to edit and choose to Customize click on the Theme Settings tab > Typography and scroll to the bottom to find the "Show breadcrumb trail" option. 

If you are using the Vantage Theme, you will need to add a small line of custom code to your theme. From your Shopify Admin go to Online Store > Themes > next to the theme you want to edit click the Actions dropdown and choose Edit Code. From the sidebar choose the Assets folder > stylesheet.css.liquid. Scroll all the way to the bottom and paste the following code…

#breadcrumb { display:none; }

Save your changes and your breadcrumbs will no longer show on the Vantage theme.

Styling the Breadcrumbs

If you're using any of the Underground themes and would like to edit the way the breadcrumbs look you will need to add custom css to your theme. From your  Shopify Admin go to Online Store > Themes > next to the theme you want to edit click the Actions  dropdown  and choose Edit Code. From the sidebar choose the Assets folder > stylesheet.css.liquid. Scroll all the way to the bottom and paste the following code…

To align breadcrumbs to the left…

#breadcrumb { text-align: left !important; }

To increase the font size of the breadcrumbs (change pixel size to your liking)…

#breadcrumb { font-size: 14px !important; }

To change the color of breadcrumbs (change hex color to your liking)…

#breadcrumb, #breadcrumb a { color: #000000 !important; }

To change the link hover color of breadcrumbs (change hex color to your liking)…

#breadcrumb a:hover { color: #eeeeee !important; }

To change the background color of breadcrumbs (change hex color to your liking)…

#breadcrumb { background-color: #eeeeee !important; }

To change the text case (change to uppercase, capitalize, lowercase)…

#breadcrumb { text-transform: uppercase !important; }

Make all the CSS changes you want and save the file.