BACK

how to make mobile background parallax shopify

Add Parallax Image Effect Section to Shopify Store in just 2 minutes - No app - Totally Free hey guy

Marouane RHAFLI

Updated on Feb 25,2023

Add Parallax Image Effect Section to Shopify Store in just 2 minutes - No app - Totally Free

The above is a brief introduction to how to make mobile background parallax shopify

Let's move on to the first section of how to make mobile background parallax shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

Add Parallax Image Effect Section to Shopify Store in just 2 minutes - No app - Totally Free

hey guys Marwan here again in today's,video I'm gonna show you how to add a,parallax section on your Shopify store,without using any app and it's gonna,take you just two minutes to add this,section so what's The Parallax section,I'm going to show with you here on the,scrub theme,this is The Parallax section,as you can see as you scroll there is,like a little bit animation on this,background image and it gives a great,look to your Shopify store so in this,tutorial we're gonna add this section to,a Shopify store and I'm gonna use the,dawn theme,so let's start I already prepared the,tutorial here so you can just copy and,paste the codes so the first step we're,gonna do we're gonna go to actions edit,code,under sections click on add a new,section,name it,parallax,click done,remove this code,and we're gonna replace it with the code,in this file,and that's it I already modified the,code here so it could be uh compatible,with any Shopify theme that you can use,so that's it we already finished this,now we're gonna go to the theme editor,I'm gonna close this one,okay this is the dawn theme,now you just need to go to uh click add,sections,and The Parallax section already appear,here,so let me move it a little bit on the,top so we can see The Parallax effect,now you click on Parallax you choose,your desired image that's for example,choose this one,select,and from here you can add the heading,the subheading you can choose the tag,here,there are a lot of things you can modify,here let's make for example,summer sale,and now,only click on Parallax you can change,the image head the hidden text size,there are a lot of things you can modify,here you can move the text to the right,to the left,let me first click save and make a,preview so we can see the section,and it's working great,on the theme editor now it appears okay,you can also enable the overlay over the,image here or you can disable it or you,can even choose the color for the image,overlay let's say for example this one,we can choose the overlay opacity,or you can disable it you can change the,heading color the subheading Etc let's,change the subheading color here,you can also change the text position on,horizontal or on the vertical,leather spacing,there are a lot of things you can modify,from here you can change the image here,at least for example 500 now it's gonna,be bigger,you can also add the button here,shop now,and Link it to product collection or any,page,let me change though,button color here,okay that's great,so the section is here and it's working,great,I also added the code so you can add a,second Parallax if you would like to,just below this,let's say for example this image,so you can have two images Parallax here,you have the choice to add and add a,heading or not,and change the color as well,as you can see here I added the second,Parallax just below it,as you can see here that's looks great,or you can even for example if doesn't,look good you can remove the second,parallax,and you can add the section uh elsewhere,within the page,let's say for example,to add it here,and here you can choose your desired,image,and you can choose different color,there are a lot of customization you can,do here depending on your website design,let me uh,disable this overlay,and as you can see that's working great,you can also add it on the product page,The Collection page or any page you all,like you as you can see that's looks,great that looks extremely great as you,can see here,you can also add it to a product page,Let's test it on a product page,just click on ADD section,parallax,let me move it for example here,and you can choose and any image here,and it's gonna be and it's gonna look,really awesome,let me click save,step on a product page,and it's working great,so that was all for today guys thank you,so much for watching

Congratulation! You bave finally finished reading how to make mobile background parallax shopify and believe you bave enougb understending how to make mobile background parallax shopify

Come on and read the rest of the article!

Browse More Content