Logo and Favicon
This section allows you to configure logo and favicon according to your needs.
Last updated
This section allows you to configure logo and favicon according to your needs.
Last updated
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.
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.
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.
Here you can decide, what width your logo should have.
The width can vary from 50 px to 250 px.
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!
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”:
For the logo type “SVG” this option is irrelevant.
Here you can decide, what width your logo should have.
The width can vary from 50 px to 250 px.
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.
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.
Here you can decide, what width your mobile logo should have.
The width can vary from 20 px to 220 px.
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!
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”:
For the logo type “SVG” this option is irrelevant.
Here you can decide, what width your logo should have.
The width can vary from 20 px to 220 px.
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.
Operate settings from the current sub-section if using the transparent header background. This option can be applied in Headder -> Transparent background.
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.
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.
Here you can decide, what width your mobile logo should have.
The width can vary from 20 px to 220 px.
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!
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.
For the logo type “SVG” this option is irrelevant.
Here you can decide, what width your logo should have.
The width can vary from 20 px to 220 px.
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 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.
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.
Here you can decide, what width your footer logo should have.
The width can vary from 50 px to 250 px.
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!
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”:
For the logo type “SVG” this option is irrelevant.
Here you can decide, what width your logo should have.
The width can vary from 50 px to 250 px.
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.
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.
Here you can decide, what width your footer logo should have.
The width can vary from 20 px to 220 px.
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!
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”:
For the logo type “SVG” this option is irrelevant.
Here you can decide, what width your logo should have.
The width can vary from 20 px to 220 px.
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:
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.
