Picture of How to Apply Styling to Your Storefront Using Appearance Settings

How to Apply Styling to Your Storefront Using Appearance Settings

This tutorial explains how to customize the look and feel of your Infigo storefront using the Appearance Settings area in the admin platform. It covers how to upload your company logo, set brand colours, and choose fonts to match your branding. You’ll also learn how to adjust images and icons, customize background visuals, and fine-tune layout elements such as product grids, basket styles, and checkout pages. The video demonstrates both basic and advanced styling options—helping you apply consistent, professional design across your storefront without needing to write any code.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

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.

Incomplete
Step by Step Guide

Modifying Your Storefront Appearance in Infigo Academy

 

1. Navigate to Appearance Settings 0:11

generated-image-at-00:00:11

  • Access the appearance settings page in the admin platform.

  • Note the four main tabs: Theme, Fonts, Images, and Icons.

 

2. Modify Theme Settings 0:23

generated-image-at-00:00:23

  • Upload Company Logo:

    • Upload your logo to display at the top left of your storefront.

  • Set Brand Colors:

    • Define primary and secondary colors:

      • Primary Color: Main background areas (featured products, product pages, etc.).

      • Secondary Color: Main buttons (e.g., homepage banner button).

    • Additional color settings for text, links, and backgrounds.

 

3. Adjust Font Settings 1:58

generated-image-at-00:01:58

  • Body Font:

    • Change the font style for most text on your storefront.

  • Title Font:

    • Control the font style for title and subtitle text separately.

 

4. Set Featured Images 2:28

generated-image-at-00:02:28

  • Login Background:

    • Set the background for the login screen.

  • Global Background:

    • Set a background that displays across multiple pages.

  • Editor Loading Background:

    • Set the background for the mega edit loading screen.

 

5. Additional Color Options 2:58

generated-image-at-00:02:58

  • Control colors for mega-edit and Infigo editor, including side menu bars.

 

6. Font Formatting and Style Choices 3:14

generated-image-at-00:03:14

  • Adjust font sizes and styles for storefront and mega-edit.

  • Preview different styles for:

    • Products and category grid.

    • Basket style.

    • Checkout style.

    • Login style.

 

7. Advanced Settings 4:09

generated-image-at-00:04:09

  • Make granular styling changes, such as status colors for shared print operations.

 

8. Upload Custom Fonts 4:52

generated-image-at-00:04:52

  • Use the Fonts tab to upload custom fonts for your storefront.

 

9. Upload Images for Storefront 5:00

generated-image-at-00:05:00

  • Use the Images tab to upload images for your storefront logo and other selections.

 

10. Upload Custom Icons 5:31

generated-image-at-00:05:31

  • Use the Icons tab to upload any custom icons you want to display.

 

11. Conclusion 5:45

generated-image-at-00:05:45

  • Review all settings and configurations within the appearance settings area.

Link to Loom

https://loom.com/share/1ae16e621bcc490197c560a7011e43d2

Alternate Search Terms

customize storefront appearance, change storefront colors, upload company logo, edit storefront fonts, update website theme, adjust product grid style, change basket and checkout layout, manage background images, upload custom icons, branding settings for storefront