0:00 Hi, welcome to the infigo academy. In this video, we'll be walking you through how to modify the look of your storefront using the appearance settings area in the admin platform.
0:11 First, navigate your way to the appearance settings page in the platform. As you can see, we have four main tabs, theme, fonts, image, and icons.
0:23 Starting with the theme tab, right at the top we have the area where you can upload your company logo or the logo you want to display.
0:30 on this specific storefront. The logo will display at the top left of your storefront by default. To the right, we have the area where you can set your brand colors.
0:59 These colors will display on the storefront depending on the area you save them into. At the start, you have primary and secondary.
1:07 Primary will be the main color of your infego storefront and will display in the main background areas like featured products, product pages, featured categories and behind the homepage page banner.
1:18 Secondary will be applied to main buttons, for example, the button displaying on the homepage banner. Then we have text, button, link, link visited and background color.
1:30 The text color will apply to all of the text on the storefront and the link color will display for things like product name hyperlinks.
1:58 Then we have the body font drop down. This will change the font style of the text displaying on your storefront except for the title and subtitle text which you control by this separate title font drop down display in below.
2:28 Moving on, we have the featured images section. The first is login background which displays in the background of the login screen for this specific storefront.
2:40 To the right, we have global background. This displays across the storefront globally on multiple pages and then we have the editor loading background.
2:49 This will display in the background of the mega edit loading screen and other editor products. Below that we have the additional colors options.
2:58 The exact same flow like the ones at the top, but you can control the colors for mega-edit and infigo editor.
3:04 For example, you can change the color of the side menu bars in those products. Moving on, we have the font formatting section.
3:14 You can control things like the storefront and mega-edit font sizes and font styles. Down below you have a bunch of different style choices to pick from.
3:32 The first one is related to products and category grid. All of these options have previews you can look at before you save the changes.
3:39 For example, for the homepage featured product section, you can see you have two different styles, one with buttons displaying on hover and one with buttons displaying permanently.
3:57 Down below that, you have basket style options. Same as before, you can preview the styling changes before saving the changes and you can do the same for checkout style and login style too.
4:09 So you have a nice bunch of preconfigured styling options to pick from. In this section below, we have the Advanced Settings area.
4:17 This is where you can make more granular styling changes. For example, status colors. This is where you can change the colors for the statuses displaying in shared print operations for each order.
4:52 Moving on to the next tab, Fonts. This is where you'll need to upload all of the custom fonts you want to apply to your storefront.
5:00 This is so they can be loaded and chosen in the theme tab in the body font dropdown, for example. Then we have the Images tab.
5:13 As you saw me do this before, you need to upload images you want to be selectable when choosing things like your storefront logo.
5:20 So, upload the image here first and then select it in the Themes tab. In the next tab, we have the Icon section.
5:31 Same as before, this is where you need to upload any custom icons you want to display for your storefront. And that covers all of the settings and configurations within the appearance settings area.
5:45 And that's all for this video. See you in the next one.