FROM CACHE - en_header

Debut Theme - Parallax effect on homepage image.

Solved
Kuaggas
Tourist
7 0 4

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

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
33625 3372 11099

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

View solution in original post

Replies 86 (86)
KetanKumar
Shopify Partner
33625 3372 11099

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 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
Kuaggas
Tourist
7 0 4

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

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
33625 3372 11099

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 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
nckeng
Tourist
3 0 3

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

KetanKumar
Shopify Partner
33625 3372 11099

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 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
nckeng
Tourist
3 0 3

Excellent! This sorted it. 

 

Much appreciated.

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
33625 3372 11099

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 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
f0w
New Member
2 0 2

Hello 
it worked for me but only on desktop version

Mobile version still same Nothing changed what to do 

Please advice Thank you 🙂

KetanKumar
Shopify Partner
33625 3372 11099

@f0w 

Thanks for post.

sorry mobile parallax doesn't properly work all device some device many issues  

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
LaseMakers
Shopify Partner
86 1 25

Hi @KetanKumar 

Thank you for your helping out with this code it did help out.

But I'm still having a problem with my mobile version, the menu option won't show correctly. 

Could you please help me with this? 

Sin título.png

 

KetanKumar
Shopify Partner
33625 3372 11099

@LaseMakers 

Welcome to the Shopify community!
and Thanks for your question.


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 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
LaseMakers
Shopify Partner
86 1 25

Hi @KetanKumar 

The URL site is

https://aguaelemental.myshopify.com/

Password: faldau

Thank you so much for your help.

 

KetanKumar
Shopify Partner
33625 3372 11099

@LaseMakers 

Thanks or URL.

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

.mobile-nav-wrapper {
z-index: 9;
    background: #fff;
}

 

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
LaseMakers
Shopify Partner
86 1 25

@KetanKumar super thanks!!!

It solved my problem 🙂

Carof_0-1594759843330.png

 

KetanKumar
Shopify Partner
33625 3372 11099

@LaseMakers 

Thanks for your support and your compliments.

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
LaseMakers
Shopify Partner
86 1 25

Hi @KetanKumar 

For some reason when I added the code you send me (that worked great 👌)  when click at the first option of the drop down menu it sends you automatically to the home page, I have deleted and added again on navigation but it wont work, also I think that by trying to fix it something happened to the drop down menu, because it wont work.

Can you please help, I don't know what to do. 

This is the coding I have added to my Debut theme:

.hero {
background-attachment: fixed;
}

.site-header {
position: absolute;
background-color: transparent;
}

.site-header {
position: absolute;
background-color: transparent;
}

@media only screen and (max-width: 749px) {
.hero {
background-attachment: scroll;
}
}

.mobile-nav-wrapper {
z-index: 9;
background: #fff;
}

.grid {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
margin-left: -$grid-gutter;
text-align: center;

@include media-query($small) {
margin-left: -$grid-gutter-mobile;
}
}

.price {
display: block;
text-align: center;
}

KetanKumar
Shopify Partner
33625 3372 11099

Hello, @LaseMakers 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

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