Logo and Favicon

This section allows you to configure logo and favicon according to your needs.

Theme settings -> Logo and Favicon

Here you can select a logo type for your store. There are 2 logo types: Image and SVG. Please select 'Image' if you want to use and download images for your logo. If you use 'SVG', replace the code in the logo file with yours.

Main Logo

For logo type “Image”:

Logo file name

For the logo type “Image” this option is irrelevant. You can leave this field empty if you are going to upload an image and not an SVG for your main logo.

Logo image

Here you can select or upload an image for your logo, which can be changed, edited, and removed at any time.

The recommended size for the image is 64x27 pixels.

Logo width

Here you can decide, what width your logo should have.

The width can vary from 50 px to 250 px.

For logo type “SVG”:

Please note, that due to its complexity, an SVG logo type should be chosen by the customers with advanced computer skills or by developers only!

Logo file name

Here you should write an SVG logo file name, but before you do that, you need to add a snippet. This can be done in a few steps:

1. If you already have an SVG code, press the dotted [...] button in the top left of the theme Editor, then hit “Edit code” (If you do not know where to get the SVG code, check our “Tips for logo type “SVG”):

2. Click on “Snippets”:

3. Click on “Add a new snippet”, and type a snippet name and click on “Create snippet”. In this example, we will use the snippet name: svg-lightbulb:

4. Add a snippet code and click on “Save”:

5. Now type the name of the SVG snippet (in our case it is svg-lightbulb) in the logo file name and click on “Save”:

Logo image

For the logo type “SVG” this option is irrelevant.

Logo width

Here you can decide, what width your logo should have.

The width can vary from 50 px to 250 px.

Mobile Header Logo

For logo type “Image”:

Mobile logo file name

For the logo type “Image” this option is irrelevant. You can leave this field empty if you are going to upload an image and not an SVG for your mobile logo.

Mobile logo image

Here you can select or upload an image for your mobile logo, which can be changed, edited, and removed at any time. This image can be different from the main logo image. It is up to you to decide which one you prefer.

The recommended size is 34x27 pixels.

Mobile logo width

Here you can decide, what width your mobile logo should have.

The width can vary from 20 px to 220 px.

For logo type “SVG”:

Please note, that due to its complexity, an SVG logo type should be chosen by the customers with advanced computer skills or by developers only!

Mobile logo file name

Here you should write an SVG logo file name, but before you do that, you need to add a snippet. This can be done in a few steps:

1. If you already have an SVG code, press the dotted [...] button in the top left of the theme Editor, then hit “Edit code” (If you do not know where to get the SVG code, check our “Tips for logo type “SVG”):

2. Click on “Snippets”:

3. Click on “Add a new snippet”, and type a snippet name and click on “Create snippet”. In this example, we will use the snippet name: svg-lightbulb:

4. Add a snippet code and click on “Save”:

5. Now type the name of the SVG snippet (in our case it is svg-lightbulb) in the logo file name and click on “Save”:

Mobile logo image

For the logo type “SVG” this option is irrelevant.

Mobile logo width

Here you can decide, what width your logo should have.

The width can vary from 20 px to 220 px.

Sticky Header Logo

Use the next options to set up changes for the logo in the sticky header.

Sticky Header Logo has the same options as other logo options in current theme settings.

Please note, the Logo on the sticky header will be displayed for the sticky type “Wide (Full header)” selected in the Header -> Sticky header -> Sticky type (Desktop), no matter if you applied settings in “Sticky Header Logo” block, or not.

For Header type #3 and Header type #4 (slim menu line), the Logo on the sticky header will be displayed even if you select “Slim (Menu line)” and do not apply settings in the present block.

More information about how to customize the “Sticky Header” can be found here.

Transparent header logo

Operate settings from the current sub-section if using the transparent header background. This option can be applied in Headder -> Transparent background.

For logo type “Image”:

Transparent header logo file name

For the logo type “Image” this option is irrelevant. You can leave this field empty if you are going to upload an image and not an SVG for your logo.

Transparent header logo image

Here you can select or upload an image for your transparent logo, which can be changed, edited, and removed at any time.

The recommended size is 34x27 pixels.

Transparent header logo width

Here you can decide, what width your mobile logo should have.

The width can vary from 20 px to 220 px.

For logo type “SVG”:

Please note, that due to its complexity, an SVG logo type should be chosen by the customers with advanced computer skills or by developers only!

Transparent header logo file name

You can paste an SVG logo file name here, but first, you need to add a snippet by navigating to Edit Code and creating a file under the path: snippets/[svg-file-name].liquid.

Transparent header logo image

For the logo type “SVG” this option is irrelevant.

Transparent header logo width

Here you can decide, what width your logo should have.

The width can vary from 20 px to 220 px.

Footer Logo

Please note, the Footer Logo will be shown only for the Footer types: Type #1, Type #2, and Type #6. The design of other header types does not include the option to display the logo.

For logo type “Image”:

Footer logo file name

For the logo type “Image” this option is irrelevant. You can leave this field empty if you are going to upload an image and not an SVG for your footer logo.

Footer logo image

Here you can select or upload an image for your footer logo, which can be changed, edited, and removed at any time. This image can be different from the main logo image. It is up to you to decide which one you prefer.

The recommended size is 64x27 pixels.

Footer logo width

Here you can decide, what width your footer logo should have.

The width can vary from 50 px to 250 px.

For logo type “SVG”:

Please note, that due to its complexity, an SVG logo type should be chosen by the customers with advanced computer skills or by developers only!

Footer logo file name

Here you should write an SVG logo file name, but before you do that, you need to add a snippet. This can be done in a few steps:

1. If you already have an SVG code, press the dotted [...] button in the top left of the theme Editor, then hit “Edit code” (If you do not know where to get the SVG code, check our “Tips for logo type “SVG”):

2. Click on “Snippets”:

3. Click on “Add a new snippet”, and type a snippet name and click on “Create snippet”. In this example, we will use the snippet name: svg-lightbulb:

4. Add a snippet code and click on “Save”:

5. Now type the name of the SVG snippet (in our case it is svg-lightbulb) in the logo file name and click on “Save”:

Footer logo image

For the logo type “SVG” this option is irrelevant.

Footer logo width

Here you can decide, what width your logo should have.

The width can vary from 50 px to 250 px.

Mobile Footer Logo

For logo type “Image”:

Mobile footer logo file name

For the logo type “Image” this option is irrelevant. You can leave this field empty if you are going to upload an image and not an SVG for your mobile footer logo.

Mobile footer logo image

Here you can select or upload an image for your mobile footer logo, which can be changed, edited, and removed at any time. This image can be different from the main logo image. It is up to you to decide which one you prefer.

The recommended size is 64x27 pixels.

Mobile footer logo width

Here you can decide, what width your footer logo should have.

The width can vary from 20 px to 220 px.

For logo type “SVG”:

Please note, that due to its complexity, an SVG logo type should be chosen by the customers with advanced computer skills or by developers only!

Mobile footer logo file name

Here you should write an SVG logo file name, but before you do that, you need to add a snippet. This can be done in a few steps:

1. If you already have an SVG code, press the dotted [...] button in the top left of the theme Editor, then hit “Edit code” (If you do not know where to get the SVG code, check our “Tips for logo type “SVG”):

2. Click on “Snippets”:

3. Click on “Add a new snippet”, and type a snippet name and click on “Create snippet”. In this example, we will use the snippet name: svg-lightbulb:

4. Add a snippet code and click on “Save”:

5. Now type the name of the SVG snippet (in our case it is svg-lightbulb) in the logo file name and click on “Save”:

Mobile footer logo image

For the logo type “SVG” this option is irrelevant.

Mobile footer logo width

Here you can decide, what width your logo should have.

The width can vary from 20 px to 220 px.

Tips for logo type “SVG”

If you do not know what is an SVG code, follow these steps:

1. Find an SVG file for your logo on your computer. It might look like this:

2. Hover over the file, click the right mouse button, and open it with Notepad ++ (we recommend you use Notepad ++). You see the SVG code in the window of Notepad ++, which you can copy and paste in the snippet:

Favicon

Here you can select or upload an image for your favicon, which can be changed, edited, and removed at any time.

The recommended size is 32x32 pixels.