Update your Site Logo

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"

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.

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

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

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.

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.

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

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.

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.