Narrative theme shopify

Find out your best Shopify theme and theme on shopify in less than two minutes

Find Shopify Theme — it's free

No difficulty

No complicated process

Track competitor's stores

BACK

Home Shopify Theme Narrative theme shopify

Shopify Narrative Theme Review & Overview

hi guys so the video you're about to,watch is actually a clip taken from one,of my recent videos in which i gave sort,of an overview and my review of every,single free shopify theme on shopify's,theme store so if you guys are just,first right now getting started choosing,a theme for your shopify store,i'd recommend you guys go check out that,video it gives a pretty good overview of,what the different pros and cons of each,theme is and like what your choices are,as far as themes go so i'll leave a link,to that down in the description of this,video,and i'll also link to it at the end of,this video but uh without further ado,let's just get started with this theme,review,alright guys the next theme that i want,to review is the narrative theme,basically i find narrative works really,well if you're building a store that's,centered around a single product right,or you know a single product that has,multiple variants right,and you'll see like as we go into the,demo stores and we start to look at the,sections and whatnot you'll see what i'm,talking about so you know they say it's,built for small catalogs this hero video,um,you know basically that it has a really,nice uh section on the home page where,you can put a full screen video that,theoretically should auto play depending,on your your visitors browser slash,whether they're using an ad blocker or,not a lot of themes they have the option,to embed videos but they don't have,the big like impressive full screen uh,experience on on a desktop,uh you know they say design for visual,storytelling yeah that's the name,narrative,um fixed navigation that's just,referring to this like instead of having,a menu bar it it just has this hamburger,and you'll see as we get into looking at,the demo site we'll see that more,vertical slideshow you know that's,better shown than said so we'll just,wait until we get into the demo to show,that,and then the wide layout basically this,this theme looks really good on on,desktops this theme more than a lot of,the other themes uh free themes on,shopify makes use of you know having,that huge,width on a desktop so if we get into,looking at some of the demo stores,you can see this is just their earthy,theme style so you can see it basically,has,uh you know it's pretty standard for a,lot of themes they just have a sort of a,an image a huge image and then they have,you know the title and a button or,whatever,that's pretty standard but this is what,i was talking about with this this,hamburger icon you know you hover over,it uh gives you a little animation you,click that it opens up and you can see,now we have our menu here right so if,you want a um you know across the screen,menu this is not the theme for you um,but if you're fine with having this you,know transparent uh header with um,with the hamburger that's good and the,other thing to note is this is like a,semi-sticky header because basically,when you're scrolling down it's not,there as soon as you scroll back up we,can access the m

The above is a brief introduction to Narrative theme shopify

Let's move on to the first section of Narrative theme shopify

HOW TO CUSTOMIZE NARRATIVE SHOPIFY THEME | NARRATIVE THEME REVIEW

hey guys happiness here welcome back to,my channel and in today's video i am,going to be showing you guys an overview,of narrative shopify theme so this theme,is actually free and it's all available,in your shopify store and basically this,theme is designed for brand and product,storytelling so i am going to be showing,you guys an overview and show you what,the what this theme is all about i know,sometimes it can be really really hard,when you're trying to find the perfect,theme of your stone and sometimes you,might end up not liking a theme so i'm,going to show you um the background of,this theme and go through about every,detail about it so you can save your,time when you download your theme and so,you can know if this theme will be,perfect for your products for your store,and stuff like that so before i move,ahead i just want to show you what these,narrative theme is all about so this,theme is actually built for small,catalogs so if you have a store that,only sells like a single product this,theme will be really really perfect for,you um even if you have like a small,number of products this theme will be,perfect but if you have like so many,products this won't be perfect for you,you're gonna have to use different,things because this theme is,designed for store with single products,and small number of products only and,you also have a feature where you can,add your video so you can tell your,story about your brand uh with a big,full screen video on top of your,homepage and it as i said before this,theme is designed for a visual,storytelling so you can showcase like,different details of your products with,different customization,um with code slides um images and so,many things uh to tell your story and it,has a vertical slideshow not all free,theme on shopify they have a slideshow,feature but this uh theme has a free,slideshow feature so you can display,different products,with different images or you can add,like multiple posts on a slideshow on,your home page and also there is a fixed,navigation so navigation is really,important on your,store so you can create a better,browsing experience for your customers,when they're servicing you different,menus um also they have a wide range of,layout,um on most of the pages and with the,high good resolution of your products,pictures so this is all about the,narrative um,shopify them and it comes in different,presents,for example this one is called earthly,um if we click that there is a warm,theme,i mean it won't present,and there is a light blizzard the cold,preset and,things like that so i'm gonna show you,like couple of presents how they're,looking like i'm gonna start with our,third project so let's go and view the,demo so as i told you before this theme,is perfect for um if you're selling one,product so you can have that really good,space to tell you a story about your,brand like for example this is still,here so this is the so-called stark and,looks like they're selling um,those strollers and as you

After seeing the first section, I believe you have a general understanding of Narrative theme shopify

Continue the next second section about Narrative theme shopify

Narrative Theme Review: Shopify Theme Review

what's up everyone it's jamie here from,shopify masterclass and today we're,going to review,the narrative theme on the shopify theme,store this is a free theme,and it's very easy to use and very easy,to customize for all we're going to,review this theme by looking at,several factors looking at the speed,different customizations through the,home page,the product page the footer the mobile,view menu editing,as well as cart page editing when trying,to decide on a theme for your shopify,store there are so many options out,there,there are paid themes there are free,themes there are themes available on the,shopify theme store there are themes not,available in the shopify theme store,on other sites such as themeforest and,there's so many options that it makes it,really hard to decide what to choose,and each theme has so many different,customizations that you're never really,sure if it's going to be good until you,try it out,that's why here in shopify masterclass,we'll review these themes,so you can idea of what it's like before,you buy or before you download it,just to see if it's going to be a good,fit with your brand and save you time,overall,before we dive into it i just want to,quickly thank our sponsor discover,profit calc the affordable and easy to,set up shopify app,that crunches your numbers in just one,click it automatically syncs with all,your accounts and expenses to calculate,your profit,displaying everything in an easy to read,dashboard so you understand your,business in real time,start for free on the shopify app store,today in front of me here i have the,narrative theme,this is the shopify theme store page,it's going to give you an overview of,what it looks like,and just before we go into the different,categories i want to go into the demo,of the narrative theme just to give you,an idea of who the shopify theme is for,so moving here there are several options,earthy warm and light,right now i have the light open and the,earthy open so to start i'm just going,to go into the light theme,here and this is the home page this,product here is a belt,in the demo and as you can see overall,this theme is meant,for shopify stores that sell only a few,products,products that are visually appealing and,products that only have a few variants,as you can see with this home page it's,very geared towards,showing the same thing multiple times in,this case it's the belt,it's describing the tagline it's,describing who it's for,it's showing good images of the product,and how it's used,and how it stands out this echoes,through the earthy theme as well so this,product is a coffee,maker and it shows you different images,has different videos and it's not meant,for displaying a wide range of products,so if you were a larger site selling,hundreds and hundreds of skus,this site wouldn't be a good fit as it's,not as easy to display all those options,rather it's really good at emphasizing a,certain product let's move on to the,homepage customization,so i have a basic sho

After seeing the second section, I believe you have a general understanding of Narrative theme shopify

Continue the next third section about Narrative theme shopify

😀 Shopify Narrative Theme Make Mobile Logo Size Bigger 😀 Logo too Small Issue Solved

hello and welcome to this video in this,video i will show you how we can make,our narrative theme logo size bigger,only for mobile version previously i did,make a video on how to make the,narrative,logo size bigger but it was for the,desktop only you can find the link in,the description,or in the card as well in the top,section so,some many people asked to make a video,on how to make the logo size big in the,mobile as well so in this video i will,show you that,i hope that will help you and if that,helps please subscribe to the channel,and do watch the full video so my,narrative is currently installed in my,website as you can see so i'll click on,the customize,and if we go to the logo then we can see,that the logo size,is sat is ending in certain period,so if i go to the header now as you can,see,in previously in my youtube,video i did make it,to 200 pixel right so this is how it,looks,so when we are going to mobile,if you look this is not working okay so,when we are going to mobile,this logo size is not working so there,is no option as well for mobile also,so how we can make that so let me share,this with you,so as you can see we don't have any,option to increase it from our dashboard,so we have to use a piece of code,so where you will find that good i will,leave a,blog description in my description so,this is the link of the,site just follow this link and just,scroll down and you will find a,code to add in theme.css file just copy,these codes,from here and then what we need to do is,okay then go to your themes,okay then go to your themes let me show,you this how the logo size,looks in mobile so you can see this is,pretty small i just wanted to make it,little bit larger okay so this is how it,looks so then go to your,theme uh online store themes and click,on edit code,okay then click on edit code,and then what you need to do is to go to,assets folder this assets folder under,the ss folder you will find,theme.css.liquid,click on it and just,scroll down to to below,in the last section of the file and just,click,enter and then paste those codes,then press those which codes these codes,okay then paste those codes,from the side i will put the link in the,description and,then what you need to do i just wanted,to make it 100 pixel,okay so these are the number you want to,put if you want to put 60 pixel put it,here 100 pixel put it here 200 pixel,put it here then you have to click save,okay,so as i said this is how looking my logo,right now so i will refresh the side,once more,and i'll check it again so now you can,see,it is get it it got larger okay now it,looks larger,so it got 200 pixel so if,let me show if that is working so make,it 10 pixel,so make it small so see if that works or,not,okay so again i am refreshing it,so if i go to the mobile you can see it,becomes too small okay,so it is working so then change the,those values according to your need 100,pixel,50 pixel 60 pixel what suits your logo,so this will solve the issue on how to,add the uh in

After seeing the third section, I believe you have a general understanding of Narrative theme shopify

Continue the next fourth section about Narrative theme shopify

Shopify Narrative Theme Product page Image Size too Large | Problem Solved

hello and welcome to this video,in this video we will solve the issue,related to narrative theme,so if you are using narrative theme this,is a very,nice and popular theme in shopify and,also free to use,but one issue in it could be showed is,that your product image,in your product pages is too large and,if you want to,decrease the size you won't find any,option in the,theme editor so how we can decrease,the size of this product image to less,or something smaller if you wish so in,this video i will show that,and if there's something interesting,keep watching the video and if that,helps smash the like button and,subscribe to the channel,and also let me know in the comment as,well so,to do the task or to small the image,size of your product images,you will need a piece of code so where,you will find the code i will leave the,a blog link in the description just go,to this,that link and just scroll down you will,find,here that add these codes in theme.css,file,so what you need to do just copy those,from top to bottom okay,just click on copy then go to your,online store and then click on themes,and after themes as you can see there is,a narrative theme i have already,installed okay,so click on action click on edit code,so after clicking on the edit code what,you will see,that,okay so now what we need to do is just,to find the theme.css file so to,find the theme.css file you need to go,to the assets folder,and then click on team dot scss the,team.css and theme,dot scss means same so in that case it,could be dot css or dot scss click on it,and then scroll down to the bottom of,this page,and then click on enter and then press,those codes that i have provided,from this link okay then click on save,okay then click on save and then i will,explain what this code,means okay then now you can see this how,the product image looks right now so i,will just refresh it,and straight away you can see it becomes,a small how,it becomes small from this piece of code,so here you will find two code one is,this one which call max with hundred,pixel,and a bottom one called max with 320,pixel this is for,all devices and this one which has max,with 767,is only for mobile okay so in that case,if i wish to make it large for desktop,version i will make it 400 pixel,any below that you want to give it,okay then i will now again refresh it,you will see that it become it will,become larger,okay so it becomes large once again so,now you can see it is looking,good but in mobile you could want to,give it,a separate value okay you could you want,to give it a separate value,like if you want to give it 100 pixel in,muba in desktop,i have 400 pieces in desktop you could,want to could give it a,200 pixel in mobile because in,in desktop larger pixel could look,better but,in mobile it could not be so to only,change for the mobile version you should,change those values,the underneath values of these okay so,in that case it is 400 pixel in desktop,and 320 pixel in mobile so if i want to,reduce it

After seeing the fourth section, I believe you have a general understanding of Narrative theme shopify

Continue the next fifth section about Narrative theme shopify

SHOPIFY NARRATIVE THEME TUTORIAL - Add New Section to the Homepage

now I'll show you how to add a section,so if you wanted to add another element,to your homepage you can simply add a,separate section so click here and here,you've got a list of available section,so you can have another one of the,elements that you already have are,something completely different so you,can our testimonials you can add a map,if you've got physical location you've,got add newsletter you can add,newsletter signup mmm you can add,another slideshow highlight gallery,featured collection collection lists,blog post and so on so I think what,we're missing really is we haven't got,many products on the home page so what,I'll do I will add featured collection,and as you can see it gives us an,opportunity to show up to six products,oh I really like that so let's click Add,select collection I've only so far got,one collection so I select that and I've,only got two items here but will be,enough and you can also if you had more,items you can select how many items per,row you want for example if I've got,only two items I can select just two per,row but if you've got more you can,select three and four and then show if,you just want one row or two and also,the grid start colors are a grid I'm not,sure if it makes a huge difference with,just two items but yeah you could you,can experiment with different layouts,hmm,and I will add shop view all underneath,so people can click to all collection,and secondary button style so this kind,of button will be displayed,I can now change the title to be more as,your friendly I don't think these are,exactly ladies t-shirts but just to give,you idea that it's better to to rename a,title and then leaving it as default but,if you wanted to change the collection,you can edit collection here or well,edit collection or change it here or,remove it if you want to can enable,image space in to add more space between,each image so the display the images,look a little bit smaller I'm not sure,if I like it so I will deselect it and,then if you like the look of it simply,click Save now I want to change the,position of this featured collection on,the home page because by default it's,displayed at the bottom but I want to,show it higher on the home page I would,like to show it right below the video so,it's very simple all I have the drug is,this part below the video and it's all,that it takes if you like it simply,click Save

After seeing the fifth section, I believe you have a general understanding of Narrative theme shopify

Continue the next sixth section about Narrative theme shopify

SHOPIFY NARRATIVE THEME TUTORIAL - Add a Slideshow

now let's work on the slideshow so under,Sections click on slideshow and here you,can add it whether you wanted a full,screen or adapt the first slides,obviously if your slides are different,heights there the screen won't be,jumping up and down so you can also you,can adjust it here now you can also,choose to Center buttons once you add,buttons okay so these are here those,titles are the buttons show overlay so,overlay this kind of this kind of,semi-permanent,semi-permanent layer over the image you,will be able to see it better after I,add an image but I'll just show you yeah,it makes this kind of difference you can,obviously edit the colors if you wanted,to add red semi-permanent you can also,do it this way and also add it how you,know how I think it's going to be so if,you want to add more color accent you,can increase opacity or you can decrease,it as well to make it more transparent,and here you will be able to add I,believe up to four sliders when it comes,to this particular theme so you will be,able to select image to add a first,slider then obviously then obviously,optimize the layout add title add calls,to action buttons and links you can,source free images also from Shopify,libraries so for this particular example,for this exercise I'll use one of their,images so click on select image and,browse free images so I know that we,will go for this kind of fitness a,fitness niche so let's see which one,will work for us best,so fitness and sports click on it and,let's have a look,one we can add already like this one so,let's add it click select and then as,you can see you can change the title,change the the button I'll just see if I,can adjust the layout of this image so,let's have a look middle Center is,current,how about bottom Center not top Center,okay so top Center layout gives us a,better view of the of the the figures in,the photo okay and obviously you can,also edit alt tags or make sure to add,it all talk click Save and now we can,change the young the title ladies,fitness gear okay leg let's go for one,of our collections Chi t-shirts okay so,this is this is the link to collections,obviously this is the the accent that we,chose for buttons,okay so shop now view more let's change,this one to shop now from now and shop,now here in this slide title so how,about we'll change it to t-shirts or,ladies tops it doesn't exactly link to,tops but I'll just I'll just show you,how to optimize the slice a little,ladies fitness gear semi entitled shop,now so linked button and obviously the,the the sites title so if someone wanted,to change to swap to another slide there,were no words on the other slide okay so,we've got,one let's minimize it let's optimize the,other one so let's go the same way for,images and I want to tell about delivery,so okay I like this image it kind of,shows parked parked parcel of parked,gift so I'll select it and then I'll,optimize it the same Y so obviously the,alt tag in middle center it's okay so I,like like the latest test

After seeing the sixth section, I believe you have a general understanding of Narrative theme shopify

Continue the next seventh section about Narrative theme shopify

SHOPIFY NARRATIVE THEME TUTORIAL - Customize the Header and Add a Logo

now I'll show you how to optimize your,header area so in sections go to Heather,and now we'll go through each element,one by one so we can customize Eve the,cart icon should be cart or a bug so you,can see bug looks like that you can,leave it and or you can leave it as a,card I'll leave it is a card you can,select a logo for your store so let's,select an image I'll just upload a,favicon I'll see how it looks like a,probably it will be too small but let's,just see yeah it is it is very small so,instead what I will do I will design the,same image however as a logo with a,transparent background in canva and I'll,show you exactly how to do that so in,canva create a design and I will design,I square a logo custom dimensions let's,put 300 300 and click create design now,we can add the same Allen element as we,did so simply click on elements and,select this flower ok so I enlarged as I,centered it and I'll change the color of,the flower so it mattress didn't minds,it was green I'll change it slightly,it's it against this kind of green,background so maybe either very dark,green or a white will will be best what,I'll do I'll create two different,designs upload them and then see which,one works best so I attained two darker,green first okay and I'll simply,duplicate design in conover and I'll,change the color of the flower to white,now,I'll change the title to logo and,download it and here it's important that,I will select transparent background so,it won't show the white background with,this image compress the file just,remember that the transparent background,is available for the premium for the,premium account so you would need to pay,the premium for the premium account with,Canova and download and now we can,select our image so click select image,and you can either drag it or upload it,do not blow the two of them and I'll see,which one works best either dark or,white I kind of like the white because,it stands out a little bit more click,select and I'll change the height of,this logo let's see how it changes in,the header so let's go to 31st it looks,slightly bigger let's go a little bit,more 40 okay I go to 60 I like that okay,so it's maximum size and I like it,because it's a little bit it's a little,bit easier to see and obviously you can,click Save but I will show you how to,add other elements so enable transparent,header on the home page I'll show you,what it looks like the transparent,header on the whole page means that the,header elements are transparent against,is this hero image you can disable it so,I'll show you what happens there is a,panel with with a color background so if,you like it better if you think the logo,and the menu will look much better with,this one you can leave it as it is I'll,leave it as transparent background for,now you can,select alternative logo if you wanted to,display a different logo on a,transparent background then on other,pages you can do it right here you can,also select the color or change the,color of transparen

After seeing the seventh section, I believe you have a general understanding of Narrative theme shopify

Continue the next eighth section about Narrative theme shopify

SHOPIFY NARRATIVE THEME TUTORIAL - Add a Favicon

now I'll show you how to add a favicon,so if you're not sure what is favicon,this is an icon that is displayed in D,and in the browser so I'll just I'll,just scroll it down a little bit if you,see this Shopify icon here there is,displayed in the browser tab this is an,icon and sorry this is a favicon and you,can set it up for your store as well and,I'll show you how so let's just go back,to dad's do the original layout so under,theme settings click on favicon and here,you can upload your own however you will,have to have it ready 32 on 32 pixels so,very small and I'll show you how to,design your own using canva okay so in,canva you know what kind of size you,need so simply create a design custom,dimension and put 32 and 32 because it,was the size mmm as recommended by,Shopify okay so it has to be many moms,or just change to forge it should be,perfectly fine and create design okay,and now it is ready so you can choose a,design that we want with favicon,remember not to go to detail because,this image will be really small so you,have to include very very bold design so,let's go to mmm elements so let's say,you want to add a flower,it's a bold design it will look nice in,the in the browser and it's quite bold,and it stands out so just make sure it's,centered okay you can obviously change I,think it doesn't display for you can,obviously change the color mmm,cry the color of it for example to merge,the your theme so we've got like,delicate green I'll try I'll adjust the,color a little bit so it will be this,kind of dead,cade green flower when finished simply,downloaded you can also change the name,so it will be easy for you to to find it,later,sorry Khan and then downloaded you can,you can select whether it's PNG or J jpg,I like leaving the default PNG and you,can choose to have a transparent,background but it's obviously not,necessary because all those tabs are,white and obviously compressed file,download okay we've got our fabric on,now it's time to upload it so click,select image and upload an image now,this image is uploaded to your Shopify,simply click select and don't forget to,add as your friendly alt tag as well so,click Edit and add alt tag click Save,and remember to save the changes

After seeing the eighth section, I believe you have a general understanding of Narrative theme shopify

Continue the next ninth section about Narrative theme shopify

SHOPIFY NARRATIVE THEME TUTORIAL - Change Your Theme Colors

let's now update our theme colors so,under theme settings click colors and,here you will be able to edit any any,color such as button colors font colors,link colors background and so on so,primary accent we'll need to locate,which are D so for example these are,those green primary primary accents we,can edit it and we can preview the,changes right away as you can see the,changes are instantly so we'll leave,this kind of nice green Heather and I,can so let's see where they are okay,other icons so Heather icons could be,the the card icon and other icon color,so let's update it and you can see the,color change instantly primary heading,text so I can update it as well so for,example I can make it like in this color,I can make it in a green color okay,let's do a green color primary body tags,obviously it will be product,descriptions and this kind of text as,well so I can also update it for example,change to green or other color mmm also,don't be too fancy,this is just this is just an,introductory video but don't be too,fancy with font colors don't be too like,you know creative you still have to,think about user experience which will,affect yourself so be and be kind of,cautious or on a cautious side when,designing commercial website because,this is not,personal blocks you have to have,different approach when it comes to,design colors and so on,mm now footer text it is white at the,moment because the footer is black but I,don't like black footer so I could,change the Blackfoot her background too,for example this light uh this,background and I'll change either leave,the footer text white or I can change it,to slightly darker like for example this,one and button label I'm not sure,there's any button in the footer yet,however I don't see changing okay so,maybe it's not it's not a it's not a,footer button however it could be oh,yeah let's put one of those buttons,obviously the text within the button,subjects it dark so you can see how it,changes to white yeah there you go had a,background so if you want to change the,background of the header so for example,this one I think it's this one as a,village and now so it's this panel you,can change it here you can make it this,color for the background so it's almost,the same as for the background so it,will be nicely matched main background I,I discard from using powerful,backgrounds I I recommend sticking to,normal white background secondary,backgrounds obviously those elements,here and here I don't like this place,I'll change it I think it's this one,it's night yeah sometimes sometimes you,have to test which are with actually,elements you're changing so I think it's,this one right oh yeah you can see it,now so these are the secondary,backgrounds okay so it's both of them,let's have a look let's go for a Marla,color okay I like the,so far obviously those images will be,changed and other colors of product,cards so let's have a look if I can show,you how it looks so product card,obviously I think it's the end the m

Congratulation! You bave finally finished reading Narrative theme shopify and believe you bave enougb understending Narrative theme shopify

Come on and read the rest of the article!