Adding a Background Image to Product Grid

Store Design
1

Hello!

I am relatively new to coding and while I’ve been able to figure other things out, this one has stumped me. It might have to do with the theme I purchased.

I’m looking to replace the solid background color for the product grid on the ‘shop’ page with an image.

(site is very much a work in progress right now, but here’s the preview link: https://pg7o5cufwl8dqiij-57965346976.shopifypreview.com )

2

Hi @alamanderart ,

This is PageFly Landing Page Builder. Welcome to Shopify Community!

Which theme are you using? Firstly, let check the product grid section in theme editor to see if there is any available option to change the background image for that section. If not, you can contact to theme support theme to ask for help.

Changing section background from background color to background image or other expected customization become easier if you use a Shopify Page Builder. Let consider trying PageFly because we helps you build a customizable and high-converting Shopify website. We have free plan available and 24/7 live chat support.

Above is my recommendations, please hit LIKE or SOLUTION if you find it helpful.

Thank you!

3

@alamanderart

Hi,

You can add background image under the title with the code below.

Before add the code below, you have to upload your background image to Settings > Files.

After uploading the file, please add the code below to assets/base.css file (with your own image link).

div#shopify-section-template--15723043520672__product-grid {
    background-image: url(https://cdn.shopify.com/your-file-link);
}

If you want to add the background image starting from the title, you will need to modify the collection.liquid (could be main-collection.liquid or something else). Because the title is under DOM id #MainContent, it will affect to all other pages. To avoid adding the background image in other pages, you will need to add another class or id to the DOM (main).

However, you if you have any other questions, please let me know.

Hope it helps.

Thanks.

4

Thank you so much! You are my hero! Any tips for preventing the image from being stretched and repeating?

Thanks again!