Add a Background Image to Featured Collection on Homepage

Solved

Add a Background Image to Featured Collection on Homepage

LibertyJason
Tourist
16 0 3

Hi, I was wondering if anyone had an insight on how to add a background image to the featured collection section of my front page. Every question asked have answers that haven't worked for me. Theme is TASTE. Thank you in advance!

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6827 1629 2008

This is an accepted solution.

Hi @LibertyJason 

Try this one.

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • 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:

 

.collection.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding {
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

 

  • And Save. 
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 10 (10)

pythagoryan
Excursionist
22 0 9

Hey dude! I can try to help you. Can you share the URL for your site?

Ryan R. Irwin
Director of Technology
SkyCo Distro & Hazel Sky Smoke Shop
LibertyJason
Tourist
16 0 3
pythagoryan
Excursionist
22 0 9

Ta-da!

pythagoryan_0-1697136261417.png

 

I did this with the following code:

 

 

.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding
{
background-image: url(https://i.pinimg.com/originals/64/37/9f/64379fc….jpg);
background-size:cover;
background-postition:center;
}

 

 

 

All you have to do is replace the URL in the code to the URL of your image. To get this URL, Go to your Shopify Dashboard > Content > Files and click on the "Link" button in the rightmost column for the image.

 

Once that's done, paste the full code into the "Custom CSS" part of the Featured Collection section in the theme editor.

 

Let me know if by chance this doesn't work!

 

Cheers 🍻

Ryan R. Irwin
Director of Technology
SkyCo Distro & Hazel Sky Smoke Shop
pythagoryan
Excursionist
22 0 9

If this doesn't work, I recommend going to your theme editor, adding a "Custom Liquid" section into the header block, and pasting the following code:

 

 

<style>
.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding
{
background-image: url(https://i.pinimg.com/originals/64/37/9f/64379fc….jpg);
background-size:cover;
background-position:center;
}
</style>

 

 

Change the URL of the photo before saving!

 

Then you'll need to add the following code to the "Custom CSS" area for the "Custom Liquid" section:

 

 

div
{
display:none!important;
}

 

 

 

While this is a very questionable method according to common front end design principles, there are no downsides and you will never have to re-add the code to your theme files when updating your theme.

Ryan R. Irwin
Director of Technology
SkyCo Distro & Hazel Sky Smoke Shop

Made4uo-Ribe
Shopify Partner
6827 1629 2008

This is an accepted solution.

Hi @LibertyJason 

Try this one.

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • 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:

 

.collection.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding {
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

 

  • And Save. 
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
pythagoryan
Excursionist
22 0 9

This is a better solution than mine if you aren't afraid of going into your theme's files and snooping around! Just bear in mind that if you ever update your theme you will have to add this code to your theme files each time.

Ryan R. Irwin
Director of Technology
SkyCo Distro & Hazel Sky Smoke Shop
LibertyJason
Tourist
16 0 3

This worked! Thank you. I was having a hard time figuring out the container/section name from inspect element but you found it!

Made4uo-Ribe
Shopify Partner
6827 1629 2008

Welcome. Find the section first and choose the one who will select all the section and try first to put the background color if it work then used it if not then find another div. 😆

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Brandingplusme
Tourist
10 0 1

When I paste the code in base.css how can i know in which collection 

i mean how can i put the name of collection i want to add for it the background 

shimmera
Visitor
2 0 0

hi, i found this forum and i am trying to do the same. is the first line of your code above a string from that website? i copied and pasted it and just changed the image link to my theme but it didnt work. thanks for your insights.