Combine'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.
Our theme uses three different font families, one for regular page headings, one for section 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. Combine 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.
The colors are separated in three different areas:
- Header (affects the top part of the theme)
- Body (affects everything in the body, regular page content, drawers & modal popups)
- Footer (affects the bottom part of the theme
This is a minimal color scheme, because each section gives you the possibility to complete change it's design with custom colors, allowing you to create really creative designs.
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. You can change the media aspect ratio to something close to your product images, and you have the option to change the image display - Combine allows for the entire product gallery to be displayed in the thumbnail, which can be a great tool to show product images without going to the product page.
Combine was build with what we call "fast purchase" in mind. In various product grids (by your choice), you can add a Quick Buy function, which will add a button for purchasing the product (if the product doesn't have any variants), or list the entire product variants right there, on the product grid.
This area in the Theme Settings control the design of those product variants. You can choose the style of these and also whether you want the product thumbnail to be changed when you change the variant.
To read more about color swatches, check our our product grid article.
Quick buy popup
In addition to the tools described above, we've also included a Quick buy popup in the theme, one which allows customers to purchase items one after the other, and don't get interrupted by the cart drawer or cart page.
Custom 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.
Dynamic icons list
Combine 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
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:
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.
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 Gentle calming. If you upload a file named gentle-calming.png, that icon will be used for this label without you needing to upload a separate icon in the icon field. Our theme will always pick the uploaded icon first, then if this fails, it will search for a png file named as the label.