Re: How can I add a custom background image on multicolumn (using Dawn theme)

Solved

How can I add a custom background image on multicolumn (using Dawn theme)

erika_brandlab1
Tourist
20 0 2

I'd like to add a custom background image on multicolumn - similar to the one below: 

 

WhatsApp Image 2023-01-19 at 9.06.27 AM.jpeg

 

Thank you!

 

URL: https://39o7xea6sanmy82v-68790550809.shopifypreview.com

Code: teagau

Accepted Solution (1)
BSS-Commerce
Shopify Expert
3477 463 526

This is an accepted solution.

Hi @erika_brandlab1 

Please follow these steps:

1. From Shopify admin -> Online store -> Edit code:

view - 2023-02-09T102643.506.png

2. You find the file base.css and add the following code at the end of the file:

.section-template--17118277304601__e1225a6b-f8d2-4be2-b2c0-9e9ee69013fe-padding  {
  background-image: url("your-image-url");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: content-box;
}

For "your-image-url", you can add the following:

From Shopify admin -> Settings -> Files, you upload the file and then use that image link.

I hope that this can help you solve the issue.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

SmallTask
Shopify Partner
973 41 55

Hi @erika_brandlab1 ,

 

To add background image we need to customize the multicolumn.liquid file. You should create a image section in the liquid code and add it in the html.

banned

BSS-Commerce
Shopify Expert
3477 463 526

Hi @erika_brandlab1 

Your link was expired. Please share a new link with us if you still need to fix the above issue.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
erika_brandlab1
Tourist
20 0 2
BSS-Commerce
Shopify Expert
3477 463 526

This is an accepted solution.

Hi @erika_brandlab1 

Please follow these steps:

1. From Shopify admin -> Online store -> Edit code:

view - 2023-02-09T102643.506.png

2. You find the file base.css and add the following code at the end of the file:

.section-template--17118277304601__e1225a6b-f8d2-4be2-b2c0-9e9ee69013fe-padding  {
  background-image: url("your-image-url");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: content-box;
}

For "your-image-url", you can add the following:

From Shopify admin -> Settings -> Files, you upload the file and then use that image link.

I hope that this can help you solve the issue.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
erika_brandlab1
Tourist
20 0 2

I'm sorry this doesn't work 😞 

 

https://44qbz50lygxu1b6o-68790550809.shopifypreview.com

erika_brandlab1
Tourist
20 0 2

It currently looks like this: 

 

 

Screen Shot 2023-02-20 at 13.04.21.png

 

I would like the image to be the same as this, in terms of width, height and placement: 

URL for this screenshot: https://honeywellaircomfort.com/

Screen Shot 2023-02-20 at 13.05.24.png 

Thank you