Logo in SVG
This add-on is part of our Subscription plan.
Subscribe once — enjoy all add-ons without limits.
The add-on lets you use an SVG logo on the storefront: a vector file or ready SVG code instead of a raster image. The logo stays sharp on screens with any pixel density.
What it is for
The add-on is intended for stores that have a vector logo and want it to look equally crisp on monitors, tablets, and smartphones — without preparing raster versions for every screen resolution.
In addition, the add-on helps turn the site into an installable app: it adds desktop and mobile icons and generates the manifest file.
Key features
- an SVG logo on the storefront;
- two ways to add it: upload an SVG file or paste SVG code;
- configurable logo width and height;
- a ready-to-use logo block for the block manager;
- a link from the logo to the home page;
- desktop and mobile icons: favicon, apple-touch-icon, and others;
- automatic creation of the
site.webmanifestfile for the installed icons.
How it works
A logo block template appears in the block manager. The block settings let you choose the logo type — an uploaded SVG file or pasted SVG code — as well as the width, height, and whether the logo should link to the home page. On the storefront the block renders the logo with the configured size, and falls back to the theme logo when no logo is set.
For icons the add-on accepts a ZIP archive, extracts it into the icons directory, and creates the manifest file. On the storefront the add-on builds the icon and manifest tags in the page head from that manifest.
The add-on settings are available in its card under “Add-ons”, and the logo block is added under “Design” → “Block manager”. In the add-on card you set the site name for the icon meta tags, upload the icon archive, and remove the installed icons when needed. In the block settings you choose the SVG type, the logo file or code, the logo dimensions, and whether the logo links to the home page.
Have questions about the add-on?