First of all upload the banner image to Shopify
Open the Shopify admin and go to settings and search the files in the left sidebar and upload the banner image you want to set before the footer section. and copy the link to that image.
Then after going to Shopify admin click on online store > Edit code
Then search the theme.liquid file in the Layout folder
Search the {{ content_for_layout }} in header section and paste below image code after it in theme.liquid file.
Must remember to paste this code before </main>
|
<div class=”custom-banner”> <img src=” paste the link which you copied from file” class=””/> </div> |
If you want to upload any product banner and want to link your product page then paste the below code
|
<div class=”custom-banner”> <a href=”product link”><img src=”paste the link which you copied from file” class=””/></a> </div> |
If you want this image only on the home page then paste this below code
|
{% if template contains ‘index’%} <div class=”custom-banner”> <img src=”paste the link which you copied from file” class=””/> </div> {% endif %} |
with product link :
|
{% if template contains ‘index’%} <div class=”custom-banner”> <a href=”product link”><img src=”paste the link which you copied from file” class=””/></a> </div> {% endif %} |
without CSS it can not look better so search the theme.scss file and paste the CSS class code into the theme.scss file.
|
.custom-banner img { width:100%; } |
With product link CSS.
|
.custom-banner a { display: flex; } .custom-banner a, img { width:100%; } |
