General settings

Before going further with the sections, we should tackle the general settings. These are a small group of settings that affect your entire website. Some can be seen from within other sections, others not. 

1. Log into your Shopify dashboard.
2. Click the Online Store link.
3. From the theme view, hit the Customize theme button (top right corner).
4. Enter the Theme settings tab.

Customizing the colors

1. Enter the Colors tab.
2. There are three different sections, all with the same three available colors.
3. Sidebar. These colors will apply to the store's sidebar and other drawers (such as the cart form or collection filters).
4. Body. These colors will apply to the rest of the site, except the footer.
5. Footer. These colors will apply only to the store's footer.

Customizing the fonts

1. Enter the Typography tab.
2. From the Headings list, choose a font for all of your store's titles and call to actions. You can then also change the size for the headings, by choosing a different base size. 
3. From the Body list, choose a font for the general typography of your store. The same, you can choose the base size of the font and also the size of the primary navigation.

Customizing the product grid

Here you can configure the general design of the product thumbnails.

1. Choose an Image aspect ratio. If your thumbnails are not the same size, our theme has a few popular options for square, tall or short images that you can use, in order to resize all of your images to the same size. If you choose the natural aspect ratio, in which your images will not get cropped, make sure that all of your images will have the same size, for a clean design.
2. You can also choose to show the second product image on hover (only works on desktop).
3. Emphasize featured products will make certain products larger in the grid, as you can see in our online demos. Here are the steps to make this feature work:
   1. Make sure that you have the "emphasize featured image" enabled in Theme settings > Product grid - screenshot.
   2. Go to a product and give it featured tag - screenshot.
   3. Since featured products will have enlarged thumbnails, you might consider using these as the first products in the grid. If you choose another place please check this out and reorder your products until you're happy with the grid display.
4. You can show discounts as a percentage or a badge. To add other badges to product thumbnails:
   1. "Sold out" will appear automatically if a product has the inventory at 0.
   2. "On sale" will appear automatically when using the "compare at price" option for a product page.
   3. "Preorder" will appear if you give a product the preorder tag.
   4. "New" appears if you give a product the new tag.
5. Choose the caption placement, but keep in mind that the caption will always be visible on mobile devices (because here there is no hover), so the overlay design is only for desktops.

Adding a favicon

The favicon needs to be an icon associated with your store, typically displayed in the address bar of a browser accessing the site or next to the site name in a user's list of bookmarks.

Customizing the cart 

You can either have a Drawer (AJAX) cart, which will update after users add items to their cart and show this in the sidebar or the Page cart, which will simply redirect users to the cart after they add an item to their cart. From both type of cart the users can check out directly or make edits to their list. 

Embellishments

Here you can choose to display an Image preloader for all the images (it is a great indicator for your users that the store is working, while waiting for the images to load). You can also Show breadcrumb navigation, which will appear in collection pages, product pages and the search page.

Setting up your social sharing image

Our theme is optimized for social sharing, so when you share a link to a product or article, this link will have the featured image attached to it. However, there are a lot of pages without a featured image (the homepage or any regular page). For these pages you can choose to upload a dedicated image that will be used for sharing platforms. By default (if you don't have any image uploaded here) the logo image will display when sharing the pages without a featured image. 

Customizing the checkout experience

Shopify's checkout page is a standard Shopify page that is not included in the theme and this is why there isn't too much control over the checkout page design. You can, however, customize it a bit in order to suit your store's design better. You have the possibility to add background images, upload your own logo, play with typography and colors. These features don't depend on the theme as they are pure Shopify features.

UP NEXT: Homepage sections