how to put custom border on shopify

How to add a Divider Spacer Section to a Shopify theme store hi everybody this is marwan today i'm,g

Marouane RHAFLI

Updated on Mar 04,2023

How to add a Divider Spacer Section to a Shopify theme store

The above is a brief introduction to how to put custom border on shopify

Let's move on to the first section of how to put custom border on 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


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.

how to put custom border on shopify catalogs

How to add a Divider Spacer Section to a Shopify theme store

hi everybody this is marwan today i'm,going to show you how to add a,divider on your shopify theme the,divider is a simple trick that lets you,add the,spaces between sections when you are,building your shopify store that this,simple feature will make it easier for,you to build,shopify stores,and make them uh,appear on mobile only or on desktop only,and this is one of the greatest features,i have developed on the black team so,first of all let's check what this,divider looks like on the black theme,then we're gonna copy the codes into,down theme just for an example but you,can,compile it on anything you you want,so let's start,if you go to the black theme here,look for divider,let's make it for example just under the,the first section which is uh,this one image with text,okay divider show border we can show the,border here we can change the color you,can add any color you want,you can also choose the spacing between,the top and the bottom,section,you can also change the border width,here,make it full width,or just the half or you can do it by,percentage you can challenge the border,height etc you can also change the line,style,and everything that you want here,so,you can also,you you also have the opportunity to,show or to not to show the border,and you can also,choose choose it to show on desktop only,on mobile only or on both of them so,if you do it on desktop only and we will,try to,check the mobile version you will see,that the mobile version there is no,border here,so,uh this feature i'm gonna copy it on,down theme,and,the code i will show you you can copy it,on anything you would like,and you don't need to be a coder to do,that you have just to follow this,tutorial and the code you will find it,in the video description,so let's open the black theme code,and the down theme code,we're gonna go to the black theme and,let me check for divider here,okay i'm gonna open this and open,this i'm gonna copy this,okay when you go to your shopify theme,go to the section here click on add a,new section,name it for example divider,and,the first code that you will find in the,video description,you're going to remove all this,and just pass it here,click save,then,close this one,we're gonna copy the second code here,i'm gonna copy this divider,ink,now under snippet click on add a new,snippet,name it this,and,copy the second code in the video,description,and just passed it here,and that's all,so let's check now,let's open the preview here,and open the,theme customizer,so here if we click on add the new,section we're gonna find divider,let's put it for example here,for people who are greeting design they,can be,they can design beautiful stores using,these dividers and this is one of the,greatest features that you can find on,wordpress it's not available on shopify,but it's available on plug team only not,on other themes,so,show border,and the border is shown here,if you choose just um let's move to the,mobile,okay as you can see there is on mobile,here you can choose desktop only it's,gonna disappear on mobile,and v on desktop only,that's your choice,you can choose the space in here,you can add much more space here you can,add a second divider for example here,let's add it just,below the second,section which is the rich text,okay click on,show border and it's shown here,you can increase the space,we can add,third one for example here,show folder,where is it,okay so,this simple tutorial we will be able to,add this divider then you can customize,from here,to make beautiful styles,and just,you can play with the setting here to to,make a beautiful slice that you would,like here,and this gonna make your store,more appealing and more exciting and,more catching especially if you are in a,niche like,fashion or beauty,uh if you are selling beauty products,you can make some beautiful stuff here,so thank you for watching the video and,don't forget to subscribe i'm always i,will always upload some great tips to,increase conversion rates increase the,user experience,and everything about shopify thank you,so much bye

Congratulation! You bave finally finished reading how to put custom border on shopify and believe you bave enougb understending how to put custom border on shopify

Come on and read the rest of the article!

Browse More Content