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 > My Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Theme Features'

Global Container Width

Set a maximum width for the global page container. This will accept numeric values such as 1800 or pixel values such as 1600px. Set a maximum width of 4800px for full width pages. You can configure the header width independently.

Header width

Match container width: constrains all header elements to the global header width.

Relaxed: constrains the navigation to the global page width container but removes the constraints from the topmost elements.

Full page width: All header elements fit the width of the browser, full screen, rather than being constrained by the global page width setting. The search box enlarges to fill some of the whitespace.

Personalization

Enable this option to show customers their recently viewed items on home, product and category pages.

Loading Animations

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

Featured Categories

Camden includes a custom panel on the homepage that will pull in specific categories that you want to feature. This is flexible enough for the store owner to determine which categories they want to feature without having to base it off an existing category structure.

Check the box to enable this feature.

Setup

Once activated, the panel will search for a category you have designated as the top level featured category. You can do this in your control panel by creating a new category, or choosing an existing one. Under the chosen category, add new sub categories - these will appear as featured categories on the home page.

You can assign existing products to appear under these featured categories in addition to their current category assignments.

Set the name of this category in the 'Featured Category Name' field. Note that this field has a 64 character limit and is case sensitive.

The panel will locate the specified top level category, and providing it contains subcategories, will list those as the "Featured Categories" on the homepage. We recommend setting up a category image in the control panel for each featured category that is pulled through into the grid.

Step-by-step Instructions

1. Create a new category (_Products > Product Categories_). We suggest you call it "Featured Categories".

2. Within the new category add any sub-categories that you want to be displayed on the homepage.

   Please note that for these sub-categories to be visible on your storefront, Menu Display Depth ( Store Setup > Store Settings > Display > Category Settings > Menu Display Depth) must be a minimum of 2 levels deep.

3. Add a category image to each of the sub-categories in the 'Featured Categories' category.

   You must add the images using the category image field, shown above, images in the category description aren't be used for this feature.

4. Open the theme editor, 'Home Page Featured Categories' section (_Storefront > My themes > (Current Theme) Customize > Theme Features_), and put a check mark in 'Enable featured categories on the home page' (see below).

5. In this same section the 'Featured category name' must exactly match the name of the top level category you set up in step 1. This is case sensitive. So if as suggested you called the new category "Featured Categories", you must enter "Featured Categories" in this field.

   As noted above the 'Featured category name' entered in the theme editor, must be exactly the same as that entered in step 1. The field has a 64 character limit and is case sensitive. So entering "Featured Categories" as the field name and "Featured categories" in the theme editor would NOT work.

6. That's it! Open your home page, and your featured categories will show.

Hide Category Names in the Grid

If you have uploaded images to your featured categories that already include text, check this option to prevent the text label for each category appearing.

Hide Featured Categories Panel Title

This will prevent the "Featured Categories" title from appearing above the grid.

Hide Featured Categories in the Main Navigation

Activating this option will stop the specified top level "featured" category from appearing in the main navigation bar.

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.

Developer custom CSS is an option used by Flair when setting up paid customisations.