Debut Theme - Parallax effect on homepage image.

Solved
Kuaggas
Tourist
7 0 3

Hi!

 

I would like my website's homepage image to have the parallax effect, but unfortunately this theme doesn't give that option. 

 

Can anyone help me code this?

 

Website URL: https://kuaggas.myshopify.com

Password: leakre

 

Thank you so much for your time,

 

Daniel

KetanKumar
Shopify Partner
14270 1659 5139

This is an accepted solution.

Hello, @Kuaggas 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file

.hero {
background-attachment: fixed;
}
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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kuaggas
Tourist
7 0 3

It worked! Thank you so much :)

 

PS: Were you able to access my website here? https://community.shopify.com/c/Shopify-Design/Debut-theme-Need-to-make-product-images-appear-with-a...

 

Thanks again,

 

Daniel

0 Likes
nckeng
Tourist
3 0 3

Thanks for this. It works great on desktop. However, isn't working correctly on mobile as the image looks zoomed in. It works fine when resizing the browser on desktop but when viewing on an actual mobile it's not right. How can I disable the Parallax effect for mobile and make the image responsive?

 

Any help much appreciated. 

KetanKumar
Shopify Partner
14270 1659 5139

Hello, @nckeng 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nckeng
Tourist
3 0 3

Hi KetanKumar, thanks for looking into this. I just sent you a message.

KetanKumar
Shopify Partner
14270 1659 5139

Thanks for message

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file.

@media only screen and (max-width: 749px) {
.hero {
    background-attachment: scroll;
}
}
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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nckeng
Tourist
3 0 3

Excellent! This sorted it. 

 

Much appreciated.

0 Likes
Tddandridge
Tourist
3 0 2
Hi. Thanks for providing awesome value. The code you provided works flawlessly, but is there a way to actually keep the parallax on mobile and make the image show up like it does on desktop rather than appearing zoomed in? Thanks!
KetanKumar
Shopify Partner
14270 1659 5139

Hello, @Tddandridge 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes