Blending product images into the product page background

Tom119
Excursionist
25 0 13

Hi, may i ask if it is possible to blend your product images into the page background like this? (For computer view)

I'm using Brooklyn theme, my url: nomnomnomnom.myshopify.com
The images are from: apps.shopify.com/smar7-scarcity-timer 

CIDs8Mj0lu8CEAE=.png

 

CP7jl9P0lu8CEAE=.png

 

Replies 15 (15)

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

sorry for that issue 

your store is password protect can you share us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar 
Hi, Thanks for reaching out.

The password is "nomnom".

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

sorry doesn't work for me 

KetanKumar_0-1635242137771.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

My bad, I've changed the password to "nomnom"

You can enter this time.

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.template-product {
background: #faf0e6;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar 

I think there's a little misunderstanding.

I'm actually not trying to change the page background's color,  but to use the product image as the page background.

 

As you can see in the images below, the product images from the carousell slider are the page background.

https://imgur.com/a/wCKeBzO

 

 

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

can you please sent your reference store link

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar 
I just found out the link, they also used shopify

Here you go: Shop Pencil | FiftyThree (archive.org)

You can search "http://shop.fiftythree.com/" on "https://archive.org/web/" from 2014-2016

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

thanks for all details i have check this site its not color it was user full image see attachment 

https://web.archive.org/web/20180205171200/http://cdn.shopify.com/s/files/1/0245/8513/t/7/assets/pen...

you have used similar graphic banner that's work for you

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar I Agree.

So how can i use the product image as "graphic banner" for my store?

 

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

yes current same as your reference store 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar 

Reference store uses product image as background, you can see the hand behind the text.

qvr4hicaxat51.png

My store have white background only, how can i make it look like reference store?

Make the image larger so it cover the whole page.

Untitqled.png

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

yes its possible full cover of your product image 

its can be done customization code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

I understand this requires a lot of work, thank you for your time.

KetanKumar
Shopify Partner
36839 3635 11972

@Tom119 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing