How to put a single image in the background on the product page?

Store Design

Topic summary

A user wants to create a product page with a single background image (unique per product) while keeping purchase elements like buy buttons and quantity selectors visible, similar to an image banner layout with text/price positioned on the right side.

Proposed Solutions:

  • Use the Featured Product section with CSS adjustments
  • Remove product images and add an image banner above, creating separate templates for each product
  • For multiple products (~30 total), implement an image metafield with dynamic sourcing

Technical Approach (for metafield solution):

  1. Create a metafield for product-specific images
  2. Modify main-product.liquid file to display metafield images
  3. Apply CSS for proper layout

The user lacks coding experience, so a community member offered direct assistance via collaborator access. The discussion remains ongoing as implementation begins.

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

Hi! I’m using the Dawn theme, and since the product that I’m selling doesn’t need many pictures, I would rather opt for a single wallpaper like photo as the product page.

Kind of like putting an image banner as the product page, but with the buy buttons, quantity selector etc. to make buying the product actually possible.

Is this possible to do?

Password: theaba

2

Hi @crescenthu ,

You can use Featured product section to do it. After that use CSS to adjust the layout.

EBOOST_0-1744594332800.png
EBOOST_0-1744594332800.png1043×644 91.3 KB

3

Simply remove the image from the product and then add the image banner above.

If you have a small number of products, you can create a separate product page template for each of them (so that you can specify different images for each).

If you expect many – would need to add an image metafield to the product and use dynamic source for the image banner.

Screenshot 2025-04-14 at 2.32.35 PM.png
Screenshot 2025-04-14 at 2.32.35 PM.png893×1093 56.4 KB

4

Hi @crescenthu ,

You want something like this:

Screenshot.png
Screenshot.png1600×617 70.8 KB

Is the background image unique to each product?

1 Like
5

Hi! Yes, exactly like that but the text price etc would be on the right side. Also, yes, the background image would be unique to each product (around 30 products in total).

6

Hi @crescenthu ,

It will be a complex requirement and you need to have experience with code. You can do it with the following steps:

  • Step 1: Create a metafield for images, where you can upload images for each product.

  • Step 2: Change the code of main-product.liquid file, where you can display the image generated by metafield.

  • Step 3: Add CSS code to make it display well.

Please let me know.

7

Hi, unfortunately I do not know code, but I would appreciate it if you would help me on how to do this.

8

Hi @crescenthu ,

Please send me the collaborator code in private message, I will send you the invitation and check it

9

Sent!