Global Theme Features (Camden)

Learn how to configure and use the features in Camden including the featured categories home page module. In your control panel, go to Storefront > Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Global Theme Features'.

Global Container Width

Setting	Description
Maximum page width	Set the maximum width in pixels for all content containers on the site.
Header width	This changes the header width to either Match container width, Relaxed or Full page width. Find out more about the navigation modes on this article.

Personalization

Setting	Description
Show customers their recently viewed items on home, product and category pages	Select this option to show customers their recently viewed items on home, product and category pages.

Loading Animations

Setting	Description
Animation style	Choose the animation style that displays in the mini cart when a product is added.

Image Loading

Setting	Description
Lazyloading mode	This controls how images load before the user scrolls to them on the screen. Enable "Lazyloading with LQIP" below if you prefer to show a preview image and replace it with a better quality version as the user scrolls. Select "Disabled" below to fully turn off this feature.

Fonts

Setting	Description
Enable custom Google fonts	Select this to include any font from Google Fonts. Instructions to configure this feature can be found here.
Heading font family	Choose the font style to be used for all headings.
Body text font family	Choose the font style to be used for all body text.

Font Sizes

Setting	Description
Body text font size	Choose the font size to be used for all body text.
H1 font size	Choose the size of large titles.
H2 font size	Choose the size of h2 headings.
H3 font size	Choose the size of h3 headings.
H4 font size	Choose the size of h4 text.
H5 font size	Choose the size of h5 text.
H6 font size	Choose the size of h5 text.

Breadcrumbs

Setting	Description
Hide desktop breadcrumbs	Breadcrumbs are removed from product and category pages on larger screens.
Hide mobile breadcrumbs	Breadcrumbs are removed from product and category pages on smaller screens.

Blog

Setting	Description
Blog image size	Select this to change the size of the blog page header image. Use this article to help you choose what image sizes are best for you.

Custom CSS

Enable custom store and checkout CSS to add overrides and additional CSS without having to edit your theme files. This allows you to use the master copy of the theme and still benefit from updates. These files are loaded last so override all built in styles.

Before activating, you will need to create files named custom.css and checkout.css locally. These correspond to the two options in the settings panel. You will need to upload these files via WebDAV to your store. Inside the Content folder, create a new directory called css, and upload your new CSS files to this location.

Setting	Description
Enable custom store CSS	Pick this to add custom store CSS to add overrides and additional CSS without having to edit your theme files.
Enable custom checkout CSS	Pick this to add custom checkout CSS to add overrides and additional CSS without having to edit your theme files.
Enable developer custom store CSS	Select this to add developer custom store CSS. This is used by Flair when setting up paid customizations.
Enable developer custom checkout CSS	Select this to add developer custom checkout CSS. This is used by Flair when setting up paid customizations.
Enable developer fixes	Select this to add developer fixes. If a bug is discovered and providing it can be fixed using only CSS, we'll be able to add it to a custom style sheet quickly before applying it to a future theme update.