Adding a Custom Background Image to a Featured Collection Carousel

Shopify Discussion
1

Screen Shot 2023-08-08 at 12.59.45 PM.jpg
Screen Shot 2023-08-08 at 12.59.45 PM.jpg1053Ă—998 210 KB

I need help uploading a custom background image to a featured collection section I have on my homepage.

I have the featured collection section already set up on my page, however, I want to change the background of this featured collection section to a custom image.

I have already uploaded the image to my Shopify files, and I have the link ready to go. I just need to know the coding, and where to insert it.

Please see attached photo to get a better understanding of what I am looking for.

I am using the “CRAFT” theme.

Any help would

1 Like
2

Hi @TheDallasFamily

Would you mind to share your Store URL website? with password if its protected. Or you can PM if you dont like to be public. Thanks!

1 Like
3

https://www.thedallasfamily.com/

It is currently located at the bottom of the homepage - however, once I get it to look right I will be replacing the banner at the top of the page with this section.

1 Like
4

Thank you for the information. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.collection.section-template--20183876239675__390d0533-c043-474f-9f1a-1fe63a37ca3d-padding.collection--full-width {
    background: url('path/to/your/image.jpg') center center / cover no-repeat;
}

Change the inside (’ https/ ') of this one. Thanks!

1 Like
5

That worked, thank you so much! Is there anyway I can remove the titles and price on the image to get it to look a little more like the original banner I had? I think it would look a lot better on both the desktop and the mobile version as well.

Screen Shot 2023-08-08 at 2.34.09 PM.png
Screen Shot 2023-08-08 at 2.34.09 PM.png2442Ă—899 587 KB

Screen Shot 2023-08-08 at 2.34.20 PM.png
Screen Shot 2023-08-08 at 2.34.20 PM.png520Ă—719 211 KB

1 Like
6

Good to know, please dont forget to Mark Solution and Likes.

If you remove the titles and prices the image should be clickable that leads to the product. And also if you remove it possibilities that it will remove to the product page also. It needs a liquid code for that.

7

Awesome! Thank you for all of your help!

8

Welcome, but you can change the background of it if youll like too. Let me know.

9

This wont work for me. Tried it multiple times.