Content

Update your Site Logo

Out of Stock Out of Stock
Call to order

You can easily update the logo on your site by uploading the new logo image and modifying the CSS.

First, select the Design link on the header. In the drop down menu, select the "view img folder"

view-img-folder.png

Second, select "Upload" on the Assets Manager, and browse for the logo you wish to upload, select the file and click "Open" in the dialogue box.

upload-img.png

Once the new image/logo has been uploaded, select the "edit site.less" link from the Design link on the header.

view-site-less.png

You will now see the site.less file in the content box

site-less-view.png

Click inside the content box and use the Find command within your browser by pressing CTRL+F (Windows) or COMMAND+F (Mac), in the Find/Search Dialogue box, type in "page-header-logo" and press the Enter key (Windows) or the Return key (Mac). This will highlight page-header-logo ID that is associated with your site logo. As seen in the image below.

find-command-in-browser.png

You will want to know the width and height of the logo you uploaded to the img folder in the prior steps. For demonstration purposes, lets say the image you uploaded was 250px in width, 50px in height, and lets say that you named the image "new-site-logo.png"

Here is where you will update those values in the CSS (site.less) file (as seen in the image below). You will update the width value from 300px to 250px, you will update the padding-top value from 70px to 50px, and change the value of the background property from logo.png to new-site-logo.png.

default-logo-values.png

Once you have updated those values, they should look exactly the same as the image below.

updated-site.les-values.png

Now you will want to save the site.less file in NOPS. To do so, click the save button on the bottom left corner of the content box.

save-site.less.png

Now go to your storefront and press CTRL+F5 (Windows) or COMMAND+F5 (Mac) with your browser open and the new logo will appear, replacing the original logo that was in place before.