Just like a sign outside a brick-and-mortar store,🏬 your logo helps brand your business and lets customers know they’re in the right place. But it’s not just your site that should flaunt your signature emblem. You’ll also want to extend this combo of color, design and font to all of your marketing assets.
As customers move from shopping your site, to receiving your confirmation and shipment emails, to getting their goods, they’ll know it’s your store that’s delivering on their needs. (And keeping top of mind for shoppers is a very good thing.)
With Volusion, it’s easy to add your logo to any of your marketing assets, including your store header, emails, invoices and more. 👍 We’ll tell you how.
To get started adding your logo to your store, go to Design > Logos.
Once on the Logos page, you can create a simple text logo, upload a graphic logo, and even upload images for your invoice logo, mobile store logo, and favicon.
Adding a Text Logo
To add a text-based logo, do the following:
- On the Logos page, select Text under Website Logo.
- Enter the exact text – up to 255 characters – as it should appear on your storefront.
- Click Apply.
By default, the text logo size, font, and color are determined by the style properties of your store's current theme. However, you can customize these settings in your theme files. See the Tips and Special Settings section of this article for more information.
Adding a Graphic Logo
To upload a graphic logo:
- On the Logos page, select Graphic under Website Logo.
- Drag an image file from your computer into the drop zone, or hover over the drop zone and click the Browse icon to find the image on your computer. Image files must be .png, .gif, or .jpg format.
- Once you've dragged or selected an image file, click Yes if you'd like the software to resize the image for your mobile and invoice logos, or click No if you'd rather upload different images for these logos.
Once you've uploaded your logo, you can preview how it will appear on your site by clicking the View icon. If you're not satisfied with your logo, simply drag a new file into the drop zone or click the Upload icon below your existing logo to browse for a new image.
Note that the automatic resizing feature does not generate favicon images. See the Adding a Favicon section of this article for more information. Also note that you cannot delete a logo image; you can only replace it. If you do not add a new image of your own, a default image displays. If you don't want to display a logo image at all, we recommend using the text logo option instead (see previous section for details).
Adding an Email / Invoice Logo
Give your invoices and emails a consistent look by adding your logo to them as well. If you chose not to generate resized images when you uploaded your main logo, your company name will display in place of a logo on invoices. You can upload a custom graphic logo for invoices by doing the following:
- Expand the More Logos section and locate the Invoice Logo heading.
- Drag an image file from your computer into the drop zone, or click Upload to browse for the image on your computer. Image files must be .PNG, .GIF, or .JPG format and use the Recommended Size listed under Invoice Logo.
If you're not satisfied with your invoice logo, simply drag a new file into the drop zone or click the Upload icon below your existing logo to browse for a new image. If you'd rather eliminate the invoice logo entirely, click the Delete icon.
Note that to use a graphic logo on store invoices and emails, you must enable the Graphic option under Website Logo at Design > Logos.
Adding a Mobile Storefront Logo
Please be aware that this section only applies to stores using the Mobile Commerce feature in conjunction with a legacy non-responsive theme. For mobile optimization, we recommend using a responsive theme, which renders the Mobile Commerce feature obsolete.
By default, your store's domain name displays in place of a logo at the top of your mobile storefront. If you're using a Text logo for your website, that text will appear as the mobile logo instead. To add a custom graphic logo for your mobile store:
- Expand the More Logos section and locate the Mobile Logo heading.
- Drag an image file from your computer into the drop zone, or click Upload to browse for the image on your computer. Image files must be .PNG, .GIF, or .JPG format and use the Recommended Size listed under Mobile Logo.
You can preview how the logo will appear by viewing your site on a web-enabled mobile device, or by clicking the View icon below the current image. If you're not satisfied with your mobile logo, simply drag a new file into the drop zone or click the Upload icon below your existing logo to browse for a new image. If you'd rather eliminate the mobile logo entirely, click the Delete icon.
Adding a Favicon
A favicon – short for "favorite icon" – is a small image that represents a particular website. Visitors browsing your site may see the favicon in several areas:
- In the browser address bar
- Next to the page name on its tab (unless the browser does not supports tabs)
- Next to the page name in the bookmark list
Favicons help to personalize the web browsing experience – and may even help customers find your page among their cluttered bookmarks! Keep in mind that since favicons are small images, you should us a simple and readable image. Many companies use a variation or a small portion of their logo, rather than the full image.
Adding a favicon to your site is simple:
- Expand the More Logos section and locate the Favicon Logo heading.
- Drag an image file from your computer into the drop zone, or click Upload to browse for the image on your computer. Image files must be .ICO format and use the Recommended Size of 16 x 16px.
To remove an existing favicon or upload a new one, use the Upload and Delete icons below the current image.
Note that image editing programs such as Adobe Photoshop and Photoshop Elements have the ability to save images in .ICO format, but you can also search online for free tools to convert other file types to .ICO. For more information, see "Customizing Your Favicon Image".
Tips and Special Settings
Styling a Text Logo
If you’re using a text logo for your store, the style of the text logo can be modified by changing the cascading style sheet (CSS) file properties for the store's theme. This requires basic knowledge of HTML and CSS.
Graphic Logo Sizes
Having a big, bold logo can capture customers’ attention, but a logo that’s too large or too small can really detract from a site’s design.
For best results, follow the Recommended Size guidelines listed under each logo type.
If a size of 300 x 120px is recommended, for example, it should be 300 pixels wide and 120 pixels high. These size constraints can be set within a graphic editing program like Adobe Photoshop.
One of the easiest ways to ensure a custom logo image is sized correctly is to simply right-click on the default store logo, save it to your computer, and open it with an image editing program. You can create your new logo using the same file. This way, the size of the new logo will match the size of the original.
Edit the Display Size in Your Theme
Every theme has default logo dimensions set by the theme designer for optimal display. This is particularly important for themes like ours that adjust display size, shape, and style to complement the viewer's device. If the dimensions of your file don't match the default dimensions, the image shrinks or expands to fit the default display area. It may also distort or blur in the process. If you want to adjust the default dimensions of the display area to fit your theme file, follow these steps:
- Create a copy of your theme. This step is very important, because editing your theme incorrectly can cause significant store functionality issues, and having a pre-edit copy will allow you to restore your site to its pre-edit state.
- Go to Design > File Editor.
- On the right side, under the Shortcuts menu, below the Theme Files heading, click template_ABC.html ("ABC" is placeholder for the theme ID number or name).
- In the code editor window, locate this line of code (see below for a visual): <meta id="v65-logo-dimensions" data-height="X" data-width="Y">
- Edit the portions in bold to the new values that you prefer, substituting the appropriate pixel counts for X and Y.
- Click Save.
- Return to Design > Logos.
- Upload the file again.
If your file dimensions don't match the dimensions you set, the image may still shrink, stretch, or distort.
If your theme doesn't contain this line of code, you may be using a legacy theme. In this case, we recommend switching to a current theme.
Having a logo visible throughout your entire customer journey is one of the most effective ways to brand your business in the mind of your shoppers. The flexibility of your Volusion store makes it easy for you to place your logo consistently across your storefront, emails newsletters and invoices!
Don’t have a logo yet? Let our designers and brand experts create one for you.