Theme Settings

Local's customizer provides a lot of options in order to brand and customize your website after your own needs. If you're new to Shopify and are not familiar with the theme customizer, take a quick look at this article on Shopify's documentation: https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings

There are 11 main sections in our theme's theme settings, but we will focus on the most important ones.

Typography

Our theme uses two different font families, one for most of the headings and one for body text (everything else). You can choose from the list of font families that are included in Shopify and also change the base size & line heights in order for the selected font to look properly in your store. Local uses responsive typography, meaning that font sizes will change depending on screen size, but they will always be based on the base size that you set. 

You can also change the font weight of the buttons and menu items (desktop).

Colors

The colors are separated in four different areas:

• Header (affects the top part of the theme)
• Body (affects everything in the body, regular page content, drawers & modal popups)
• Cards (affects all the cards layout - cards are individual content holders like the product grid elements, promotion blocks, rich text sections, etc.)
• Footer (affects the bottom part of the theme

Borders & Layout

Borders give you the tools to create a really versatile layout. You can play with the cards, buttons & forms. Again, for individual sections you are able to hide the borders of the cards, so you can really create something unique.

Product cards

These refer to all the instances of product elements, such as in collection pages, recommended products, featured collection settings, etc. The first set of settings allows you to play with the product card's style.

Product badges

Product badges refer to the little tooltips that appear in the right corner. There are some default badges like "sold out" or "discount" that appear automatically based on the product, but you can also configure 3 different custom badges that you can set to appear based on different product tags. For simplicity purposes, all badges will have the same text color, but you are able to change their backgrounds.

See the diagram below for how custom badges are set:

Dynamic icons list 

Local has this unique feature where you can showcase different product features with icons, based on metafields. 

Each product can hold up to six different icons like these and you can add them in two ways. First, as you can see in the Theme Settings, for each icon you need to set two metafields - one for the icon, one for the label. In this area of the customizer you are basically connecting product data to the proper icon.

If you don't have experience with metafields, you might want to read this article from Shopify documentation: https://help.shopify.com/en/manual/metafields/metafield-definitions

Step 1

You need to create the metafield definitions in the metafields area of your store. So go to Settings > Metafields > Products and create two definitions for each icon, one for product icon, one for product label. Then, after metafields are created, you have to populate the theme settings area with the namespace and key from each metafield you've created. 

Please note that icon metafileds should be set as IMAGES, while label metafields should be set as SINGLE LINE TEXT.

Look at the following graphic on how should these work side-by-side:

Step 2

The metafields will now appear in your individual product pages as well, so when you add values for certain products, these will appear in the product cards. 

Pro tip

Because it can be time consuming to add the same icons & labels all over again, we've also come up with a way to simplify this process and only work with LABEL Metafields. For this to work, you need to upload your specific ions in the Files area of your store, and make sure the filenames correspond to the labels that you will use (in a handle form).

Example: You have a label called Gluten Free. If you upload a file named gluten-free.png, that icon will be used for this label without you needing to upload a separate icon in the icon field (https://share.getcloudapp.com/jkuOE8m2). Our theme will always pick the uploaded icon first, then if this fails, it will search for a png file named as the label. 

Other settings

Next on, you have other simpler settings, such as a favicon, some settings to define the cart, breadcrumbs, some search options, social profiles links and very important Google Maps API Key. Since our theme has a great focus on local stores, interactive maps are a big part of this, so if you want to use this feature you'll have to use Google Maps services for this. More info on how to get an API key for this purpose can be found here: https://shopify-support.krownthemes.com/article/385-generate-an-api-key-for-google-map