how to add a 2 column in shopify

in this tutorial I'm going to walk,through how to show two columns of text,on a page in a Shopify store most,Shopify themes do not come without,ability built in so I'm going to go over,an easy way to do that by just copying,and pasting some simple code this is the,page that we are going to be working on,as you can see it's currently we have,four paragraphs and it's just a single,column of text spanning the full width,of the page here in order to show two,columns first of all we're going to do a,quick edit with a CSS of your theme I'm,doing this tutorial in the new Shopify -,admin if you're still using Shopify,classic which is the old version of,Shopify this will still work it will,look a little bit different but you can,still follow along so to find the CSS,that we need to edit we need to go to,the sidebar here themes if you're using,classic Shopify you'll find the themes,button up in the upper right corner up,here and you'll click on themes then,we'll go to our published theme and we,need to click on the template editor so,here we have all the files for our theme,and we're going to go down to the assets,folder and click on that and then we,need to find the style dot CSS liquid,file the the name of this file will vary,depending on which theme you're using,but it will always end in dot CSS liquid,we don't want to edit the check out dot,CSS dot liquid that's for just the,checkout process so find the CSS file it,will probably be named style or styles,or something like that although that,will depend on which theme you're using,so we'll click on that and to avoid,getting in the way of any of the default,CSS here I'm just going to scroll down,to the very,of the page and then click enter a few,times to give us some room and and next,we need to copy and paste the code from,the tutorial on e-commerce pulse calm,and just going to pull that up here this,is the code that we will be copying and,pasting if you are not viewing this on,ecommerce pulse comm you can go there,and just search for two two columns of,text in Shopify and you'll find this,post so I'm gonna grab this code and,then I'm gonna copy it if you're on a,Mac you can hit command C or if you're,on a PC ctrl C and I'll copy it to the,clipboard or you'll you should be able,to copy it by going to the edit menu of,your browser and then I'll go back to,the CSS file and I'll paste you can,paste by hitting command V on a Mac or,ctrl V on a PC and there we have our CSS,copied in and we'll hit save next we,need to go to the page editor of the,page that we want to show two columns on,so I've created this page sample page,with two columns in order to divide it,into two columns we need to click on,this button here to show HTML and here,we can see the paragraphs each paragraph,is wrapped in these HTML tags that that,just tells it where at the beginning and,the end of each paragraph are I'm gonna,show the first two paragraphs in the,left column and the second two,paragraphs in the right column so to do,that I'm gonna pull up my tutorial again,and here we have the the code for the,left column and I'm just going to copy,the fur,salon since I already have the content,on the page so I'll just select this,line hit copy then I will paste it right,there and then I'll copy the next line,this goes after the content copy that,and then I'll paste this after the,second paragraph ends I'll paste it,right there,and then we will repeat that for the,second column copy and paste and the,second column here also includes this,other line of code include this just to,make sure that on the alignment of the,columns is well one of the columns is,floated to the left and one is floated,to the right that's a CSS term and we,just need to include this to make sure,that the left and right alignment of the,columns isn't interfering with the rest,of the page so I'll copy those two lines,go back to my page and paste it here at,the end and once we've done that we'll,hit save and now let's look at the page,hit refresh and you can see that it's,now divided the text into two columns so,that's it pretty simple,um if anything isn't working sometimes,what happens is after we add that HTML,and we go back and edit the text in the,regular page editor the page editor will,sometimes mess up the HTML that we,pasted it into the page so if something,happens and it's no longer showing,correctly as two columns then just go,back to the HTML editor and make sure,that this code is still in place and,that should fix it

Congratulation! You bave finally finished reading how to add a 2 column in shopify and believe you bave enougb understending how to add a 2 column in shopify

Come on and read the rest of the article!