This article covers how to customize your Roots theme using the Theme Editor.

Roots comes with a variety of settings which allow you to customize your store without modifying any code. To access these settings navigate to Storefront > My Themes and click on the "Customize" button associated with the theme currently applied to your store.

image (15).png

Here we will walk through the key settings available in each section and how they effect your store.

Colors

In the colors section there are a variety of options allowing you to tailor the theme colors to your branding. You have the ability to set these with either a HEX or RGB value, or use the color picker to chose a new color.

image (16).png

Fonts

In the fonts section you have control over the font families used throughout the site. You can control the body, headings, text logo, and product card title fonts separately. This section also has options to set font sizes for various elements.

image (17).png

Settings

Global

Primary Navigation Link Alignment this setting has two options: Left and Justify. The Left option will left align the links in your main navigation leaving any extra space to the right of the links.

image (18).png

The Justify option will equally space your links so they fill up the entire width of the navigation bar.

image (19).png

Number of links per column in drop downs allows you to select how many sub links are shown in each column of the navigation drop downs. The theme is setup to do a smart calculation based on this number to ensure that third level links don't get split into multiple columns. This also means if a column doesn't have enough space to fit the next group of second and third tier links it will start a new column.

Below is an example where the number of links per column is set to 10. You can see the 'Hydration' category along with its sub-categories are in a new column because there wasn't enough room in the first column to fit them all.

image (20).png

Require Customer Login to Purchase, when this option is checked, makes it impossible for visitors to purchase from your store without having an account and being logged in.