How to Change MUSA Product Page Header Image

Musa have a dedicated product page to display your individual product. This tutorial show you how to upload your own header background for your product pages.


1) Prepare your images

The header is responsive. So depending on the monitor size you are using to view your site, the header image will stretch full width or full height. Because of this feature, the header image may look cut off in different browser shape and/or sizes.

Image Size

Since the header is responsive, there are no specific image size you can use. Our default image size is 1400px by 382px. You can use any image size you like, and we do recommend you to try different image shape to see what will create your desired effects. We do recommend the width of the image be a minimum of 1200px to ensure the image don’t get blurry when viewed in larger monitors.


Image Name

Once you created the image you want, name it as “product-page-bg“. It is important the name is correct both in spelling and in cases (all lower case).


Image Format

The image format you should use is JPEG. When you save the image file in the correct name and format, this is what it will appear: product-page-bg.jpg


2) Upload your image

Click on “design’ and into “edit html/css” to open the Code Editor.

Once in the code editor, scroll down on the left hand column to locate “Add File(s)“. Here upload your new header image


3) Save & publish

Once you have the image uploaded, save and re-publish your site for the change to take effect