Background image to featured product.

Store Design
, , , ,

Topic summary

A user sought help adding a background image to the featured-product section on their Shopify store.

Solution provided:

  • Navigate to Online Store → Themes → Edit Code
  • Open Assets/base.css
  • Add custom CSS targeting specific featured product section IDs
  • Use background: url() with no-repeat center / cover properties

Technical details:

  • The CSS targets multiple featured product sections using their Shopify section IDs
  • Applies the background image URL directly to .gradient elements within those sections

Outcome:
The solution was successfully implemented and confirmed working by the original poster.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello!

Does anyone knows how can I put a background image to the featured-product section?

URL: https://maestrodellapizza.myshopify.com/collections/all
pass: pizza

image URL: https://cdn.shopify.com/s/files/1/0733/4559/7662/files/Untitled_design_29.png?v=1741811407

Thanks

2

Hi @OnlyS ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/base.css
  2. Add code below to end of file
#shopify-section-template--18795977834718__featured_product_4Rdabt .gradient,
  #shopify-section-template--18795977834718__featured_product_dLEgUh .gradient,
  #shopify-section-template--18795977834718__featured_product_nii4xd .gradient,
  #shopify-section-template--18795977834718__featured_product_FBb63U .gradient,
  #shopify-section-template--18795977834718__featured_product_AmQRtQ .gradient {
  	background: url(https://cdn.shopify.com/s/files/1/0733/4559/7662/files/Untitled_design_29.png?v=1741811407) no-repeat center / cover;
  }
1 Like
3

Hi! thanks it works fine!!