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

[crescenthu]

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?

zq2pbf-di.myshopify.com

Password: theaba

[EBOOST]

Hi @crescenthu ,

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

[tim]

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.

[namphan]

Hi @crescenthu,

You want something like this:

Is the background image unique to each product?

[crescenthu]

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).

[namphan]

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.

[crescenthu]

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

[namphan]

Hi @crescenthu,

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

[crescenthu]

Sent!