Although you can create a new theme from scratch, it's almost always easier to copy an existing theme and modify it. Live StoreFront themes are located at /Portals/_default/LiveStoreFront/Store/Themes and each folder represents a separate theme.

Let's Create a New Theme:

Copy an existing theme folder (such as Default) and rename it to MyTheme. You can use any theme name as long as it doesn't have any spaces or special characters in it.

Important

The next step to ensure that you're newly created theme works is to edit the Default.css and Print.css files located at /Portals/_default/LiveStoreFront/Store/Themes/MyTheme/Resources/Style/Default.css and ensure that all css declarations begin with .mytheme

You must inherit all Classes, any other CSS Tags in your newly created Default.css and Print.css from class .mytheme(where this is your new theme name in lowercase)

Example:

.lsf_default .fab {
    font-family: 'Font Awesome 5 Brands';
}

The above markup would change to:

.mytheme .fab {
    font-family: 'Font Awesome 5 Brands';
}

Live StoreFront templates are located at /Portals/_default/LiveStoreFront/Store/Themes/Default/Templates

You will also need to replace lsf_default class with mytheme class in all templates.

For Example:

Suppose you want to change in cart's templates, which is located at /Portals/_default/LiveStoreFront/Store/Themes/Default/Templates/Cart

So, you must replace lsf_default class with mytheme class in all .cshtml files which is present at /Portals/_default/LiveStoreFront/Store/Themes/Default/Templates/Cart

Now finally change name of Default.xml file such as MyTheme.xml at /Portals/_default/LiveStoreFront/Store/Themes/Default/

To Apply Theme:

Navigate to Live StoreFront module > Manage > Store > Settings > Store Information >  Theme

To do customization in models of template click here