Art Storefronts Support Center

Search for answers to your questions by entering keywords below, or look through our knowledge base.

How To: Add a Logo for Use with a Scrolling Navigation Bar or the Mobile Site

Follow

Content

 

How to add a mobile logo image

In addition to your normal Logo image, the platform also utilises a smaller image as the Logo image on the mobile version of your site, and also as the logo image when your desktop site switches to the scrolling navigation menu.

 

Tip: Before we get started, it’s important to know that the suggested size for the navigation bar logo is below 150px by 50px. This is a short rectangle and will look the best on the site. You DO NOT have to use your main logo, and for detailed logo images we would actively recommend against using them in this situation. Instead, we recommend using your initials or other text with minimal graphical content for the scrolling navigation bar logo in order to keep it readable.

 

Once you have your mobile logo image ready to upload to your site (we would suggest saving it as PNG if it has a transparent background, otherwise as JPG), you can open your Site Manager, go to the Header & Footer tab, and make sure you’re on the Header tab.


mceclip0.png

Scroll down until you see the section labelled Logo File For Scrolling & Mobile Navigation. From here you can click on Choose file to select your mobile logo image, and upload it to your site. Click on Save in the bottom right of the browser window, and the site will save the new image.


mceclip1.png

The page will reload, and when you scroll down to this section again, it will display the image you uploaded.


mceclip2.png

If you ever wish to change this image, you will click on Choose file, select the replacement image, and click on Save on the bottom right of the browser window. This will replace the existing image, and reload the page to display it in this location.



How to add a default social sharing image

 

Similarly to how you can upload an image for use on your mobile site and on the scrolling navigation menu of your desktop site, you can also upload a specifically sized image which will be used whenever a page on your site is shared on social media where the page doesn’t have an image to be used as part of the link preview.

 

For Gallery and Product pages, the system will add a preview image which is either the first product on the Gallery page, or the first image on the Product page. However for other page types there is no default image for the system to load, and that is where the Default Social Sharing image comes in.

 

The idea is that you can set a default image which the system will use where there would otherwise not be one available, such as on Form or Standard pages. 

 

Note: It’s not possible to override this and set alternative images for individual pages. The image you upload here will be used for all non-gallery and non-product pages on your site.

 

Important: The resolution of this image should be 600x315 in order to be displayed correctly without being cropped.

 

Once you have your image ready, you can open your Site Manager and open the Header & Footer section of your site, and go to the Header tab.


mceclip3.png

From here, scroll down until you see the section labelled Default Image For Social Sharing Platforms. From here you can click on Choose file to select your mobile logo image, and upload it to your site. Click on Save in the bottom right of the browser window, and the site will save the new image.


mceclip4.png

The page will reload, and when you scroll down to this section again, it will display the image you uploaded.


mceclip5.png

If you ever wish to change this image, you will click on Choose file, select the replacement image, and click on Save on the bottom right of the browser window. This will replace the existing image, and reload the page to display it in this location.

Was this article helpful? Please let us know how we can improve it here