Need to add a background image to 'Featured Products' Section

Store Design
1

Hi Friends, Can someone please help me insert a Background Image in ‘Featured Products Tab’ section.

I am using Hyper Shopify theme.

Featured Products Tab
Featured Products Tab1920×1200 399 KB

3

Store URL is www.TOAIArt.com

But I have not yet published my new theme … so , the URL may not be very helpful.

4

Alright, The share the preview link with me.

5

I just published the Theme . You can goto the product page : Adil Jaal | Single Queen King – TOAIArt.com

Scroll down to this section

image
image1920×1200 339 KB

6

@SurTri you can use background css to add background image, this section might be present on all the prpduct pages, so all product pages would have this.

product-template .featured-products-tab{background-image:url("your image URL");}
7

You can add this code to Custom CSS in theme settings

#shopify-section-template--19596576391354__featured_products_tab_7MaLYk .section-template--19596576391354__featured_products_tab_7MaLYk { 
    background: url('**add your image URL here**'); 
    background-size: 100%;
    background-position: center;
}
8

Unfortunately , nothing seems to be working ..

Screenshot 2025-12-04 123705_edited
Screenshot 2025-12-04 123705_edited1920×1200 368 KB

9

try this line, did you put url of your image?

.product-template .featured-products-tab{background-image:url("your image URL");}
10

Yes , I had tried your code too. Same error.

Suyash
Suyash1920×1200 335 KB

11

not only code, which image did you want to add as background? do you got that image? have you uploaded into content section?

12

When pasting into “Custom CSS” of a section you need to use the different selector because Shopify “prepends” section element selector.

Make sure that you’ve uploaded your image to “Content”-> “Files” area and then clicked the “Copy link” button to get the image url – paste this one instead of the placeholder in the code below.

Screenshot 2025-12-04 at 6.17.24 PM
Screenshot 2025-12-04 at 6.17.24 PM530×244 20.4 KB

The URL will be like:
https://cdn.shopify.com/s/files/1/2310/4437/files/simple-icon-with-letters-ai-crossed-like-a-road-sign_215f66da-fe69-4d17-bf8a-264a4e5314d8.png?v=1761709530

Use code like this:

.featured-products-tab{
 background-image:url("your image URL");
}
And it will become this in rendered HTML 
#shopify-section-template--19596576391354__featured_products_tab_P8UMMc .featured-products-tab{
 background-image:url("your image URL");
}

You can’t use the code like below in sections Custom CSS because .product-template is a selector on the body element and selector will not match anything after processing

.product-template .featured-products-tab{
  background-image:url("your image URL");
}
13

Thanks you , Thank you , Thank you Tim . Instead of using CDN link I was using admin link . That was also part of the problem. This is lesson on lifetime.

14

@SurTri welcome, nice to know that you got the solution