Are you looking for How to add a background image in Shopify theme? Welcome, You have reached the right destination.
A dynamic way to develop your brand identity on your website is to use a visually stunning background image. Whether or whether it is abstract, a well-selected image has a powerful User Experience. It’s important to understand that most modern Shopify themes are built utilizing parts. As a result, it is unlikely that trying to add a background image directly to the entire page will produce the intended results.
Therefore, in this tutorial, we’ll cover how you can add an image to both the website and how you can add an image to each individual section. In the end, we’ll also take a look into optimizing your image’s performance.
Table of Contents
How to add a background image in Shopify for the whole website
Step 1: Go to Admin Panel -> Contents -> Files -> Upload Files ->Upload your Background Image here.
Step 2: Copy the uploaded image URL by clicking on Link Icon as shown in the image below.
Step 3: Now, Go to Sales Channels -> Online Store -> Themes -> Click on 3 dots -> Click on Edit code.
Step 4: Go to Layout -> theme.liquid and paste the below code before </head> as shown in the image below. Make sure to replace ‘replace-url’ with the actual URL which you copied in the Files section after uploading the image.
This will result in the image shown below. In case, this solution does not work for you, then comment down below. I will help you to provide you with a solution.
How to add a background image in Shopify for a specific page
Step 1: Go to Admin Panel -> Sales Channel -> Online Store -> Pages -> Your Specific Page.
Step 2: Click on Edit website SEO -> Copy URL after /pages/. For example, in our case, it is contact
Step 3: Go to Online Store -> Themes -> Edit code -> Layout -> theme.liquid and paste the below code before </head> as shown in the image below. Make sure to replace ‘replace-url’ with the URL which you copied on the Page. In our case, it is a contact
It will be resulted as shown in the below image. In case, this solution does not work for you, then comment down below. I will help you to provide you with a solution.
How to add a background image in Shopify for a specific Section
Step 1: Go to Admin Panel -> Sales Channel -> Online Store -> Themes -> Click on Customize
Step 2: Go to Specific Section -> Custom CSS
Step 2: Copy the below code and paste it into the Custom CSS. Remember, replace ‘replace-url’ with the image URL.
> * { background: url('replace-url') !important; }
This will be resulted in the image as shown below.
You might also like: How to add a back-to-top button in Liquid Shopify
