Logo and favicon
Use settings from the following section to customize the Logo and Favicon in your store.
Logo
Tip: The "Image" and "SVG" settings will be applied to both desktop and mobile. Inspect whether these settings work well for desktop and mobile in your store.
Configure the display method of your store’s logo using the "Type" picker. The corresponding settings will be shown after selecting an option:
"Image". Select the option to set up a logo in your store using an image. Specify an image in the "Logo" picker. Press the "Select" button and choose an image from the library or upload it from your device.
"SVG". Activate the option to show the "SVG logo" input field, where you can place your SVG code.
The "Image" and "SVG" options additionaly provide the following settings to customize the Logo on desktop and mobile:
Use the "Width" slider to control the logo size in the Header from 20 to 300 pixels. This option controls the Logo size for all screen sizes.
To set up width settings individually for mobile, activate the "Enable mobile width limit" option, which enables width scaling for mobile devices.
Change the logo size on mobile from 0 to 280 pixels using the "Mobile width" scale.
"Text". This option generates the default logo text, which corresponds to the store name specified in your admin.
Favicon
If you need to display a brand logo of your store next to the meta title on your browser tab, add an image by pressing the "Select" button in the "Favicon" image picker.
Here is how the favicon might be showing in the browser tab:
Full-width logo for Header
Note! The following settings can be used with the enabled "Image" or "SVG" logo options described above.
The Full-width logo animation is disabled in the Theme Editor. Thus, you can check the settings only in the preview.
The Full-width logo works on the Home Page on the desktop. It does not display on mobile by default.
Activate the "Enable" option to display additional settings.
Show the logo width settings by activating the "Enable width limit" option.
You can control the full-width logo size on the "Width" scale. Here you can apply changes from 0 to 2000 pixels, where 0 pixels means disabling the logo width limit, while 2000 pixels stretches the logo across the full screen width.
Here is how the settings display in a store:
Note! The full-width logo placeholder works with the sticky header layout - Full-width logo. If you disable the full-width logo in the "Sticky header" drop-down of the "Layout" section, the theme will replace the date with the logo.
The option works only on the Home page. By default, the date will be replaced with the logo on other pages.
Placeholder
Place the current date in the header by adding the variable [date] to the field. To disable the option, leave the field empty.
Placeholder months
In the provided field, type the list of months using your store's language, separating them with commas. The theme will display the current month within the animated logo.
Eg.: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
Placeholder days
Specify the list of days in your store's language in the provided field. The theme will automatically show the current day.
Eg.: Mon, Tue, Wed, Thu, Fri, Sat, Sun
Animation delay
Use the given scale to set the delay time, up to 500 milliseconds, for the logo to appear beneath the Header when scrolling down from the top of a page.
Using this option will ensure a smoother transition of the Logo into full-screen mode due to a time delay.
Here is how the date is displayed in a store:
Full-width logo for Footer
Use the "Enable" option to activate the full-width Logo in the Footer section. Additionally, this option enables other Logo settings.
The 'Enable width limit' option will be shown after activating the previous option. Turn on the option to display the width scale.
Control the full-width logo size on the "Width" scale. You can adjust the value from 0 to 2000 pixels, where a value of 0 removes the logo width restriction, while 2000 pixels maximizes the logo to the screen’s full width.
Last updated