Quick Shopify SEO Tip to Increase Google Ranking

a big issue that Shopify stores can have,when being indexed by Google is being,flagged for duplicate content and this,is just because of how Shopify actually,structures the different pages on the,site so let me quickly explain what this,means how it looks and then I have a one,minute quick fix for you as well you,just have to put some code into your,Shopify theme but don't worry I'll show,you exactly what to do so when you,create a product with Shopify you can,have it listed in a variety of different,collections let's say you have a product,that's black boots you could have it,listed in the women's collection the,apparel collection shoes boots black,shoes shoes under fifty dollars I mean,you could create so many different,collections that this product could live,in and it would all still be relevant,the problem with that though is that,each time you put a product in a,different collection Shopify then,creates a different URL for it to,actually Link in from that collection so,let's say if that product is in five,different collections well now you have,five different links to the exact same,product page but the URLs are just a,little slight bit different based off of,that collection name this can be,problematik for Google then that sees it,as all these duplicate pages and the,product page looks the same the URL is,just a little bit different so Google,either thinks okay well they're trying,to trick the system and it's just all,this duplicate content but the biggest,issue is that Google just doesn't know,which page is the most important to show,to your viewers in the search results so,it's important to then highlight and say,Okay Google this is the collection or,the product page that I want you to,showcase,I'm not at all saying that you need to,just have one product per collection you,can put it in as many collections as you,want that are of course relevant however,you want to just make sure that you let,Google know which product URL you want,to actually have be your main one so,whenever people are linking to your site,and you're kind of building up that link,juice for all of your search engine,optimization efforts you have an exact,URL that is being focused on and it's,going to be promoted more so to do this,we need to add just a small line of code,into your Shopify theme to again,highlight which one Google should be,prioritizing so it doesn't get rid of,any of the other URLs that you're,linking in through different collections,however it's just going to Showcase this,is the one to prioritize so to add this,in first you're going to need to go to,your Shopify back-end under online store,and themes make sure you're on your,current published live theme and then,click edit code once you're in this,back-end area be careful you don't want,to mess anything up here but you can see,on the left hand side you have a layouts,section and you want to click on theme,dot liquid there,then at the top of the site within the,head tags you're going to add this,little bit of code so I'm going to put,it on the screen right here because I,don't want to say it wrong and then mess,everybody up I'll also have it listed in,the description below or below this,video so you can actually copy that and,paste it in or just pause this video and,type it in yourself but this code is,then going to just prioritize your,product page individually and get rid of,the other bits of the collection that,could be added into your url so you're,showcasing the main product page as the,priority,and that's it you're done you've got,that code added in make sure you hit,save and again you're careful over there,and you don't mess with anything else,also just make sure that anytime you're,either removing a product or a,collection from your online store that,you're actually redirecting the URL so,that way you don't have any broken links,on your site and if you've pinned,something on Pinterest and now that,product is removed you're actually,linking that URL to another product or,another area of your site so it doesn't,just have the viewer drop off and to do,that you're going to go to online store,and navigation and then you'll see it,view URL redirects there,here you'll just type in where you're,redirecting from so that old URL that,you're now removing that product or,collection or page and then the new URL,as well,now this is just one piece of an overall,strategy for SEO for on-site,optimization for your Shopify store I go,into more detail in how to optimize your,site for the search engines based off of,keywords in this video over here so if,you're looking to do more SEO for your,Shopify store and you're wanting to get,ranked on page one of Google which I,mean come on don't we all then make sure,to check that video out

The State of Shopify Theme Development

and the this session for the next uh 25,minutes or so we'll be toking about the,state of Shopify theme development so,looking at different workflows which are,available for theme developers uh recent,features which have been released for,themes and our vision as well for the,future,so just just a quick introduction on,myself my name is Liam I'm a developer,Advocate at Shopify I've been with,Shopify for about seven years now so in,that time I've been creating a lot of,content for developers looking to learn,how to build on top of Shopify I've been,creating a lot of YouTube videos blog,posts and of course being able to be,here this is my first time visiting,Australia so it's extremely exciting for,me and yeah,it's yeah amazing connecting with our,developer community so yeah over the,next two days please do grab me for a,chat would love to to connect,so for this session this is going to be,the plan for our journey first we're,going to look at where we are right now,then we're going to look at where we are,going and finally we're going to look at,how we will get there and then we should,have some time for a q a towards the end,so to answer the question where are we,right now we need to take a slight step,back into the past back to Summer of,2021 and Shopify unite which was a,milestone event for team developers we,had the launch of online store 2.0 which,enabled sections on all pages we had,meta Fields natively launched for,themes which allowed us to have much,more flexibility and personalization on,different pages we saw the relationship,of apps and themes become much more,closely combined with Team app,extensions we had of course our vision,for custom storefronts for hydrogen and,last but not least we also had the,reopening of the theme store after the,Hiatus for a while,and in the months since then we've been,able to progressively enhance many of,these features so we've,improved with the limitations that we,had on sections and blocks by making,more sections more blocks available on,pages we have more Dynamic sections,available on more pages for enhancing,meta fields we also made the developer,experience of working with Team app,extensions much much better as well so,all this to say is themes are much more,powerful more adaptable and more,valuable to Merchants than ever before,so just to look more generally at the,ecosystem in general we see you know,quite strong and steady growth we're,seeing millions of merchants are looking,to improve their store looking to,customize their online experience and,their buying experience for their,customers we firmly believe there's a,great opportunity here for developers,looking to enter this space,if we look across to the App Store in,partikular last year we saw that 400,million was paid out to our app,developers just increase of over 80,percent from the previous year and of,course we reduced our Revenue share so,Merchants who earn up to their first,million dollars don't need to pay,Shopify any Revenue share and that also,transfers across to the theme store too,so team developers are able to Avail of,that too,so we don't yet have comparable figures,for the theme store but we are seeing,that there is quite strong growth here,too we've increased the number of themes,published on the team store and uh,something that we're quite proud of uh,today we actually had our 100 theme,launched today which is a really proud,Milestone that we have but I think,what's more important than the numbers,themselves is that,even with the you know increasing of,teams on the teamster we're seeing the,quality bar uh being met and exceeded,we've you know very very high standards,on the theme store for themes that are,launched so that Merchants can be very,very confident that the themes that are,available are the best that they will,have and you know this is something,we're seeing quite a lot of,one great example of this is the shapes,theme which is built by switch I think,William is is here so big shout out to,William uh who's based in Australia but,we really see themes like shapes as part,of the new generation of Shopify themes,which are really pushing the limits of,liquid pushing the limits of Shopify and,you know you can see here very vibrant,color scheme but underneath the surface,you it's a very very feature-rich team,extremely flexible very customizable and,allows Merchants to to personalize their,their visual identity of their,storefront,so this strong combination of,adaptability and opinionated design,really allows Merchants to have quite,amazing storefronts so big shout out to,switch,so now we know where we are let's tok,about where we're going,so summer editions launched earlier this,year in June and there's many questions,around some of the features one in,partikular got a lot of attention,hydrogen and many developers are,wondering if hydrogen represented the,way that Shopify wants developers to,build storefronts people were asking is,hydrogen going to replace liquid and,today I want to address that concern,so the tldr is is no and you know we're,very very heavily invested in liquid,liquids as our CTO Allen says is a key,tiknology that allows Merchants to,customize Shopify teams we are invested,in liquid adding features and making,rendering super fast,so I think to really understand,liquid and hydrogen it's really helpful,to think about the use cases of bow,tiknologies,so Shopify,has always and will always be bringing,storefronts to where customers are,whether that's on the web whether that's,mobile whether that's social media even,video games,and headless e-commerce allows Merchants,much more flexibility in terms of the,control that they have over the tik,stack how URLs are structured and Scott,will be up after me he's going to dive,much deeper into hydrogen and explore,all of the features so definitely do,stik around for his tok but we do,recognize that this partikular use case,where Merchants need a very you know,flexible,infrastructure they may need to,integrate with partikular software we,want to make this possible for them too,so this is our vision for hydrogen where,we want to be able to allow Merchants to,reap the benefits of shopify's back end,and all of the you know the great,features but also to be able to have,full control over their storefruit,so this is you know where we see,hydrogen and oxygen fitting in this does,however come with some costs you know,you may need uh to work with developers,you may need to have agencies on board,so Merchants when they're looking at,this as an option I need to be you know,aware of the the implications and The,Upfront investment that might be,required,so we see liquid as the more accessible,solution for the majority of merchants,partikularly Merchants who are in the,more early stages of their Journey with,Shopify we also find that,Merchants may not always be very,concerned over the tik stok that's,being used they're not always very,tiknical so having options that are,very configurable right out of the box,is a really attractive opportunity for,them you can also go quite far with,liquid and HTML and CSS as you saw with,uh with shapes also in the Keynotes,today you saw Athens and bullish these,are great teams would really recommend,checking out the team store if you,haven't looked at it recently to see the,the new generation of themes that are,really pushing the limits here,also we have a thriving ecosystem of,developers building both for the team,store and building custom stores or,custom teams as well so this is,something we want to invest in further,I'll leave Toby our CEO with the the,last word on this and when he says that,liquid storefronts are shopify's love,letter to the web platform,we really believe liquid is here to stay,and the web is truly our North Star,this is nowhere clearer than in Don,which is able to showcase our,understanding of the web as a platform,so don't represent say HTML first,JavaScript only as is needed approach to,team development,it's shopify's First Source

More:Succès : Ça fonctionne pas 🤷🏽‍♂️

Shopify Theme Build: Navigation & Shopify Objects - Episode 5

hey everybody sam webb here and i'm back,with part five,of my shopify theme build series today,i plan to do something a little bit,different,as you can see i've already built out a,basic navigation,using html and css i'm still going to,walk through,shopify's native navigation,functionality,and how you can add that to your site,more importantly though,i want to go a little deeper into,toking about liquid objects,and how you can use them for this,feature and for other features in the,future,to start off let's look at shopify's,liquid objects,documentation when you first land on the,object documentation,what you'll see is a little bit that,tells you about how,shopify objects work and some of the,kind of container objects that hold,sub-objects so in uh an example of that,is,all project all products so the all,products,object uh holds a bunch of products it,holds,20 unique products and basically,you would in your in your code you would,write all products,and then you could put the the handle of,a product,and then what that returns is a product,object,similar with artikles you you saw me do,this with collections,as well earlier in the series on any,page,you can just write collections and then,you can pass in,a handle this just shows you a bunch of,different,kind of global objects that are always,available,one of these global objects is called,link lists,and this is what the navig this is the,feature that's being used by the,navigation,and you can see an example they show,four link in linked lists,categories dot links and then they have,some html here,to show you how you can display that,link,now again when you land on this page,we're looking if you look on the left,here we're looking at the objects,documentation we're not looking at all,of these sub-objects,we're just looking at the primary,objects documentation,which toks about all of the global,objects that are,across this that you can use on any page,of the site,yeah i just want to quickly hop in and,clarify something,when i'm toking about the objects there,there are no,primary objects and sub-objects right,everything that you see,on that left side of the screen all the,different objects those are just the,objects,and then you have global objects that,that their specific purpose is to allow,you to access,those other objects right so all pro all,products,is not like an object that you would,normally just use,it by itself you use it specifically to,gain access,to a product object so i just wanted to,clarify that really quickly,all right back to the video now there,are also,more specialized objects and some of the,in,and these objects can be accessed in,multiple ways but,let's take collections or collection for,example,so you've got this collections object,that has a bunch of collections,and you can pull a specific collection,with a handle like we discussed earlier,and what that returns is a collection,object,and so if we look over on the left side,here we'll see collection,singular on the left if we click that,this toks about,the collection object and this is an,object that has,all of the information about a specific,collection,this tells you every piece of,information that you can get on an,object,and if you look on the right side here,it's got its own navigation for this,page,and it should it's a quick view to see,all what you can get so you can get the,description you can get the id,you can get the image you can get the,sort by,you can get a title there's all types of,things you can get off of this,and all of these things can be used when,you're building your site,and on the left side i just want to,scroll down and show a few more things,so just as we scroll you'll see there,just,tons of objects that are available for,you to use,and i mentioned that there are multiple,ways to get to these,sub objects so depending on the object,you might have a global object for like,collections or like,all products right you have this global,object,that allows you to access a sub object,anywhere on the,anywhere on the site you've also got,scenarios where specific pages,allow for specific objects to just be,used,so on a collection page for instance you,have,access to that specific collections,object by default,so you don't have to use the collections,object to be able to access this,specific collection,you can just go straight to using this,sub collection right here,and the object for it again this is,similar to what you've saw,what you've seen me do already you saw,me do it on the last video,uh the collection template video and,you'll see in an upcoming video when i,start working on the product page,if we keep scrolling down you see we've,got the paginate object,which we used in the last video,uh we also have the part object which we,also used in the last video and here's,all the documentation for that,so anytime you want to work on a feature,this is the place to go,so that you can kind of just scroll down,and say you want to work on search,you'll see that there's the search,object here and so when you land on the,search page this object will be,available to you and,it works somewhat similar to,a collection where you're able to kind,of grab all the products and loop over,them,now going back to navigation i mentioned,that we have link lists,and a link list is is what it sounds,like it's a list,of a bunch of links and that's this is,the object that's used for,the navigation so if you were to go into,your admin,if you clicked online store and then,this sub list will open and you have,navigation here,you'll see that you can have a bunch of,menus here so i've there's two of them,here,and these two are here by default,usually my main menu is a little,different than what you'd see,when first creating your store but when,you first create a store you're going to,have main menu and you'll have footer,menu,and if you want to add a new menu you,can just click this add menu button,and start adding items and you can name,it we're not going to do that right now,we're going to go back here and we're,going to look at main menu,so we've got a bit of information here,we've got the title,we've got the items and then on the,right side here we have the handle,and this handle is going to be important,because similar to what you would do,with,with all products where you pass in the,handle to get a specific product,or with collections where you pass in a,handle to get a specific collection,you do the exact same thing with linked,lists where,you'll use the the global link lists,object,and you'll pass in a handle which in,this case we're going to pass in main,menu,and that's going to give us this this,specific linked list or this specific,list of links and so this entire,thing here with all of its information,is what's known as a link list,each of these individual items is what's,known as a link,and if i click edit on home you'll see,that,it simply has a name and it has a link,or a url,that it can that's going to go to so,with all that information out of the way,let's use this on the front end of the,site,now before you write anything new let's,look at the code that i've already added,so we've got this header file within,snippets,and within that or outside of that i'd,say we've got,sections which also has a header file,and it just includes this snippet inside,of it,and then we've got a wrapper called,header we've got,a kind of a sub wrapper called header,wrapper,and that's to kind of give this a,maximum width,and then we've got a link which is our,logo,and we've got the actual nav so if we go,back to the front end of the site,this whole white bar up here is that,that header,element on the left we've got the link,which links to the home page,and then on the right we've got some,other links here,that for now go nowhere we can close,that i'll close up all this css for now,and now we've got the nav and for the,nav i have,four lis just to give us that look,but these don't do anything yet as we,saw in the documentation,we have this object called lin

More:Wordpress to Webflow Migration - 5 Tricks to keep your SEO when converting from Wordpress to Webflow

Shopify Functions - a new way to customize Shopify

hey everyone jan here codingwithyan.com,shopify functions a powerful new way to,extend or customize shopify features by,writing your own backend code and yes,you heard that right for the first time,ever shopify opens up parts of the,backend logic for us developers now,saying it like that probably also raises,a few questions like how does it all,work exactly what do i even mean by,back-end logic how are functions,different from traditional apps and how,can we get started but no worries my,friend because coincidentally that's,exactly what we are going over today and,i really hope you find some value in,this so then let's have a look alright,so then let's get started by answering,the how does this all work and therefore,let's first consider the typical dev,stack which was also beautifully,illustrated on the shopify devs channel,so we can think about a store in three,simple layers,first of all we have the database so,that's where all the data is stored like,historic orders customers the products,that have been created all the store,settings and yeah just everything or,every bit of data that needs to be saved,or stored somewhere,on top of that we then have the back end,so this is where the website logic runs,like managing products incoming orders,new customers get created and so on and,so forth like all the behind the scenes,logic,and the backend also writes the,corresponding data into the database or,reads it from there like for example if,you were to delete a product on the back,end it would also be deleted in the,database right so that's just one,example of the logic that's implemented,behind the scenes,on top of the back end we then also find,the front end which is usually built by,using a theme but it could also be a,custom storefront completely built from,scratch,and this is where we showcase our,products or different data from the,store,so the front end could be called the,presentation layer now on each of these,layers there are also different,tiknologies that allow us to make,customizations or work with the,available data,like for example on the front end we,could use liquid or hydrogen,and the database is directly accessible,through the shopify api,now historically the only thing where we,couldn't make any changes or augment,anything is the backend logic and it's,also pretty much where apps would come,into play because they could implement,your own routines write your own logic,and then via the api you could still,read and write data from or to the,database so it's kind of similar to what,the backend does and apps already,provide a great flexible way of,extending the native features but they,also come with a few drawbacks first of,all there are certain parts and areas of,a storm that you just can't reach by,using normal apps like for example the,checkout discount logic or the checkout,shipping logic because you can't just,inject code right there and that's,already one of the key differences,between the new functions and then,traditional apps because with the new,functions you will be able to reach,these areas and actually the checkout,discount logic is the first place where,the backend logic is opened up and then,other key areas will follow over time,and i would also try to add a small list,of like upcoming areas somewhere here on,the side,the second drawback with traditional,apps is that you would need to figure,out your own hosting,which in and of itself is not too much,of a problem because it's actually not,too difficult but if your app solves,some time critikal tasks then you might,face some issues with limited bandwidth,if your server can't skate up that,quickly and it's actually very important,because with shopify websites,scalability is never an issue you can,have like 10 visitors per hour but you,can also have 100 000 and the website,just doesn't crash and that's actually,funny because while i was still working,in the agency we had tons of clients who,went to the german equivalent of the,show shark tank so this is like people,would present their product ideas,searching for investors and then all,these websites had huge traffic spikes,because it was like broadcasted on,television during prime time and then,our websites never had a problem with,that because shopify takes care,automatikally but other wordpress,websites were like crashing left and,right and developers would be like,crawling through the pieces that have,once been called their website,begging us like hey guys how did you,build these websites and we were like,playing it cool yeah just just use,shopify whatever,and i mean of course slightly overplayed,here but based on true story man we had,a good time working in the agency but,anyways what i'm trying to say here is,that if your app solves the time,critikal task,then it shouldn't be the bottleneck of,the website and you just have to ensure,performance and that's also a new major,benefit with shopify functions because,they literally run on shopify's,infrastructure and can execute less than,five milliseconds and they also scale up,yup to pretty much the largest sale,events on the planet so how cool is that,all right now the last key difference i,think you should be aware of is that,with shopify functions we can now,seamlessly integrate our settings into,the admin dashboard so for example if,we're toking about a discount function,you can also have the settings or the,interface to configure your function,right at the discounts where it actually,makes most sense and with traditional,apps you would always have to go into,the apps tab then bring up your app and,then configure everything there so i,think that's an improvement however it's,very important to understand that the,settings for your functions or the,interface to configure everything still,has to be served through your own server,so that's exactly the same as with,traditional apps and only the time,critikal scripts will actually run on,shopify's infrastructure so that's the,difference here and yeah i think it's,also important to understand that,shopify functions are installed through,normal apps so that's a commonality you,can share and distribute everything via,the app store which is awesome because,it's like a super large audience,and yeah maybe the best way to think,about them,is that shopify functions are not a,completely different thing it's more,like a new feature or something you can,add to apps and if that was confusing by,any means let's have a look at the,following lifecycle diagram because that,will make things crystal clear alright,so it all starts with the app developer,who adds a function to an app,then when everything is ready you can,deploy the app,so that a merchant can install the app,on the store,and it's also where you would configure,everything using the settings,and these settings come from your app,server,then when everything is configured the,app developer or the app makes an api,call with the current configuration of,that function so this is kind of where,the function gets uploaded to shopify's,infrastructure,and then when a customer interacts with,the website let's say adds a product to,the card that's where your function gets,actually executed on shopify's,infrastructure,and i think this diagram is the best,overview you can get and it's also,available in the shopify docs and if,you're looking for that the link is in,the description okay so now that we have,a high level understanding of how,everything works and i know there's a,lot of information to take in,also takes me quite a bit to do these,summaries here,but now that we understand that the,question would be how can we practikally,get started what are the best first,steps and first of all we need to,understand that shopify functions are,not any different from like normal,functions we know from programming now,you have an input,then you have the actual function where,you write the logic and then an output,in order to get started you just need a,few things up front so first of all you,have to pick

How to Build a Shopify App with Node and React

大家好 我是Jennifer Gray,我是Shopify的UX开发员,今天 我们要学习如何构建Shopify应用,利用Node和React技术 并使用Shopify应用CLI,它可以快速为Node.js应用构建支架,并且它可以在整个Shopify应用的开发过程中,协助我们将经常碰到的,常见开发任务实现自动化,在视频结束时 我们将建好一个简单的Shopify应用,可以在您的本地环境中运行,您应该掌握让自己的应用顺利上线和运行的知识,这样您就能投入更多时间 去研究您的应用,将能解决哪些实际问题,而不是花费大量时间,了解在构建Shopify应用时可能遇到,哪些必须和常见的开发任务,那我们开始吧 看看我们将要构建的功能,我们要构建带有一个标题和按钮的嵌入式应用,点击这个按钮时,将打开资源选择器 让我们可以,从开发商店中选择多个产品,我们在选择这些产品时,会在控制台日志中记录包含单个产品ID的数组,以便您使用此信息来实现其他功能,比如向Shopify GraphQL管理后台API编写一个查询,我们来介绍一下这个Shopify应用CLI,谈谈它是什么,我们需要满足什么要求 以及您要怎么样安装它,Shopify应用CLI是一个命令行界面工具,是为Shopify应用开发者构建的,它能让我们使用Ruby on Rails或Node.js,快速构建出一个Shopify应用,这个教程将会使用的是Node.js,它将直接集成您的Shopify合作伙伴账户,并在将应用安装到开发商店时 为您处理验证任务,如我之前所述 CLI还能让常见的开发任务实现自动化,例如在开发商店中填充示例数据,例如产品或客户,CLI还能轻松生成应用中的样板文件代码,例如调用账单API或Webhooks,整体来说 这是个很实用的工具,可以加速和简化您的应用开发过程,因为它能将许多费时费力的开发任务自动化,现在我们来看看跟随本视频教程进行学习,需要满足哪些要求,首先 您需要一个文本编辑器 我用的是VS Code,用什么文本编辑器都可以,只要顺手就行 比如Sublime或Atom,这两个也都挺好用的,您还需要一个命令行工具,我用的是iTerm 这个也一样,您用什么终端工具都可以 只要顺手就行,具体说到CLI 在安装之前,您要确保满足相关的要求,您可以在Shopify应用CLI文档中查看要求列表,网址是shopify.github.io/shopify-app-cli,这个链接会被添加到下方的描述框中 方便您找到,您需要安装最新版本的Ruby,还需要一个Shopify合作伙伴账户,我登录到我的Shopify合作伙伴账户,已经准备好了,您还需要一个开发商店,Shopify开发商店是一个免费的Shopify账户,您想创建多少个都可以,但是本教程的学习只需用一个开发商店就足够了,这是我的开发商店 “Jennifer的开发商店”,如果您还没有,您可以用这个“添加商店”按钮创建一个,我还在另一个标签页里登录了我的开发商店,这是商店管理后台 这样我也可以访问前端,如果您使用Windows系统 在安装CLI之前,您还需要多安装几个工具,您需要安装适用于Windows的Linux子系统,以及Windows版Ubuntu,在满足了所有要求之后,我们来看看怎样安装CLI,可以用几个不同的包管理器来安装CLI,如果您运行的是Mac OS 并且使用Homebrew包管理器,您需要依次运行两个命令,运行完毕之后 CLI就安装好了,如果您使用的是基于Linux的系统,安装说明会略有不同,具体要看您使用的是哪种包管理器,如果您运行的是Apt包管理器,您需要安装带有明确版本号的可下载.deb文件,您可以在文档中的发布页面链接获取这个文件,完成之后 您就可以运行所提供的命令,同样地 如果您使用的是yum包管理器,您需要安装带有明确版本号的可下载.rpm文件,您也可以在文档中的发布页面链接获取这个文件,然后运行所提供的命令,最后 您可以将Shopify应用CLI 作为Ruby gem来进行安装,这次也是使用所提供的命令 CLI安装完成之后,您要检查有没有…,您要检查安装是否正确,这样您就可以运行Shopify version命令,我们继续下一步 现在就来操作,在命令行中输入“Shopify version”,它显示我用的是版本1.0 这是最新版本 所以可以继续下一步,这一步很重要,尤其是如果您在观看视频前就已经安装了CLI,因为您可能在使用旧版的CLI,在这种情况下 这里会显示“找不到命令”的错误,这就表示您使用的是旧版的CLI,您需要前往“从旧版进行迁移”页面,就在Shopify文档里,然后按安装步骤进行一次性的迁移,因为从版本0.9开始,Shopify应用CLI将以软件包的形式进行安装和管理,不再采用Git库的形式,所以 如果您使用的是这个旧版本,您需要遵照这些步骤 确保您可以继续使用CLI,我们马上准备好开始探索CLI了 在此之前,我想提一下之前没提及的最后两个要求,但是要继续学习本教程的其余部分 这两个要求也是必需的,第一个是Node.js,因为我们要构建Node应用,所以您需要安装Node.js,最后一个 您需要用到ngrok账号,免费账户或付费账号都行,Shopify应用CLI要用ngrok来创建安全隧道,从公共网络连接到您的本地开发应用,当您满足全部要求 并且安装了最新的CLI之后,我们就可以来看看部分核心的命令了,“Shopify Help”命令列出了可用的命令,并描述了命令的作用 我们来在终端工具里尝试一下,我尝试输入“Shopify Help” 它会列出四个命令,“connect”可以连接到已有的项目 “create”可以创建新项目,您可以选择Node或Rails,“logout”就是退出目前验证的合作伙伴组织,还有“version” 我们已经用过了 可以输出版本号,我们想创建一个新的Node项目,所以我输入“shopify create node”,现在提示我们输入应用名称,您想起什么名字都行,我就起个有创意的名字 比如“我的测试应用”,现在问我们构建的应用属于什么类型 公共应用还是自定义应用,公共应用是为广大商家用户构建的,通过Shopify应用商店进行销售,并且需要经过审核后,才能展示在应用页面中,自定义应用是为一位商家构建的,不能通过Shopify应用商店进行销售,也不需要经过审核,在本教程中 我们来构建公共应用,现在 我们要把应用安装到开发商店中,CLI列出了所有的开发商店,都是与我的合作伙伴账户相关联的,我之前展示过了我的合作伙伴账户,这里列出了我的一个开发商店,不过 我其实有很多已隐藏的开发商店,这些只是我以前用过的旧商店,我把它们都隐藏了 因为已经用不上了,我希望CLI不要把这些商店列出来,因为有些商店的名称比较可笑,但还是列出来 就这样吧,我们选择没有隐藏的商店 “Jennifer的开发商店”,现在正在把它克隆到我的测试应用中,并使用npm来安装从属文件,需时大概一两分钟,好了 从属文件安装完毕,已在合作伙伴控制面板中 创建了我的测试应用,我们可以用这个链接来查看应用,这是我们的合作伙伴控制面板,这里是我们新创建的应用 非常好,现在 我们回到终端工具 现在可以切换到项目文件夹里,然后运行“shopify serve”启动本地服务器,我进入项目文件夹,然后运行“shopify serve”,已创建了ngrok隧道,询问我们是否要更新应用URL,我们这里选择“是” 因为我们要创建新应用,我们想把应用URL设置为开发URL,服务器正在运行,现在可以按“CTRL+T” 在开发商店打开这个项目,我们来操作 “CTRL+T”,这会提供一个URL,我点击这个URL,应该可以跳转到我们的开发商店,在这里就能继续安装我们的应用,我点击这个按钮 “安装未列出的应用”,大功告成 我们有一个应用了！现在功能还不多,但是我们稍后会继续完善,只需等几秒钟就会重定向到商店管理后台,应用会被嵌入在这里,我们现在进入了开发商店的管理后台,我们的应用刚加载好了,嵌入到了管理后台中 非常棒,您可能会想 为什么要嵌入应用,而不是直接用独立的应用,通过把应用嵌入Shopify管理后台,您就能打造优秀的用户体验,提供Shopify商家熟悉的界面 使用简单,还能帮您确保始终如一的用户体验,无论商家使用哪个版本的应用,所以不管是使用网页版,或者使用iOS或Android版的Shopify移动应用都会如此,熟悉的用户体验可在您的应用和用户之间,建立互信的关系,让他们更有机会向别人推荐您的应用,现在 我们继续 打开我们的文本编辑器,我们来看看在项目里创建的文件,您的项目文件夹所在的子目录,就是在创建项目当时,您的终端工具所在的位置,所以我的文件夹就在主文件夹里,这里面已经有几个文件了,不过我只看其中几个文件,这是我们的.env文件,在这里可以找到您的Shopify API密钥和API机密,这里还有您的商店、访问范围以及托管信息,也就是您的ngrok URL,Shopify API密钥和API机密,也能在合作伙伴控制面板中找到,我们想把这个信息分开放在不同的文件里,因为不想公开透露这个信息,接下来 这里有服务器文件,我们不会乱动这些文件里的内容,但我会快速过一遍这里面的东西,接下来我要从next.js导入“next”,next.js是一种框架 用于设置基于React的应用,Next.js负责处理您通常要在React应用中要做的事情,例如Webpack配置,模块替换、服务器端渲染和客户端渲染,我们还导入了“koa”,Shopify应用使用开放授权(OAuth)进行验证,这是一种基于令牌的授权和验证系统,Shopify使用它来将应用安全连接到Shopify和商家,所以这个koa中间件会配合koa Shopify验证,处理大部分的验证过程 并创建您的自定义服务器,Shopify koa中间件,也会安全地为Shopify的GraphQL请求提供代理,这里还有一个处理程序文件,我们的应用被设置为使用Apollo来获取数据 而Apollo客户端,则被设计为让您能快速构建React UI,这个React UI可以使用GraphQL获取数据 这就是这里所设置的内容,这里还有注册Webhooks文件,这只是某种支架代码 用于注册Webhooks,在这个更改文件夹里头,我们有一些代码可以调用账单API,当您准备好设置应用的账单功能时可以使用,您可以通过CLI进行操作,这样您在本教程里就不需要 使用GraphQL账单或Webhooks,但这只是概述了在服务器文件中的内容,接下来 我们看看这个页面文件夹 里面有我们的前端组件,Next.js会使用应用组件来将类 传递给应用中的其他文件,所以 您通常能在索引文件中找到的内容,都会被app.js文件传递到应用中的其他部分,您可以看到这里正在导入几个不同的,提供程序组件,一个是Apollo的 一个是Polaris的 一个是App Bridge React的,我们还没介绍Polaris和App Bridge,但是 待会这两种库我们都会用到,等真的需要用的时候 我们再来详细介绍,这些正在导入的提供程序组件,它们只是用来包装我们的整个应用,我们需要它们,才能在整个应用中分别使用每一个库,最后 我们会介绍一下index.js页面,这是应用的主页面 也是我们开展工作的主要位置,在这个页面中 我们能看到,正从Shopify Polaris导入的标题和页面组件,Polaris究竟是什么呢？,我们打开文档来一探究竟,所以 Polaris是一个设计系统,用来提供连续统一的体验 在整个界面构造一致的模式,连续统一的体验正好呼应了我之前所提到的,将您的应用嵌入管理后台能带来的优势,在使用您的应用时 应该在整个界面,构造一致和熟悉的体验,Polaris正是实现这种一致体验的好帮手,这对构建我们平台的应用开发者而言非常有价值,它帮助开发者简化商家与产品的互动方式,使之更具可预见性,并且遵守Web可访问性的标准,设计系统包括一系列广泛的模式,您可以用来打造最佳的用户体验,Polaris文档会为您介绍特定的内容指南,以及您可以使用的措辞,这里有一些设计指南 您可按照指南来,设计您想要的布局、颜色和版式等等,还有一些组件包含一系列的界面元素,可以在您的应用中重复利用,我们来看看其中一些目前正在使用的组件,我们在app.js文件中已经见过了一个组件,就是用来包装我们的应用的 应用提供程序组件,在这里 如我之前所说的,我们有标题和页面组件,标题由页面组件包围,标题组件显示的就是我们目前在应用中,所看见的文本,如果我们替换掉它,用其他文本来替换 然后再返回到应用中,就能看见应用已经重新加载了新的文本 非常好,现在 我们要做的是在应用中添加按钮,在点击这个按钮时,它会触发启动一个模式,为我们显示开发商店中的产品列表,我们开始操作 添加这个按钮,Polaris确实有一个按钮组件,我们可以把它导入这里,对它进行渲染 实现这种功能,不过 我们来看看页面组件,了解它本身的可自定义程度如何,我打开Polaris文档,搜索页面组件,Polaris文档会为每个组件,提供一个已渲染组件的示例,以及相应的代码,我们来看看这个示例,看来页面组件本身的自定义程度很高,有不同的标题 有一个按钮页面路径,我们或许可以按照需求来对它进行自定义,我们看看这里的下拉菜单,可以看到不同变体的页面组件,以及相应的代码示例,我来看看这个示例 它比较简单,这里有个标题和按钮 我们来看看怎么自行实现这个效果,看来订单标题就是页面组件的标题道具,然后创建订单按钮 这看起来是主要操作,如果向下滚动页面 我们可以看到,页面组件将会接受的所有道具列表,我们这里有一个标题 它会接受字符串,以及主要操作道具 我点击它以获取更多详情,我们或许想添加内容 即字符串,这就是显示在按钮上的文本,我们或许也想在点击按钮时,触发一些操作,看起来这会是一个onAction,这是执行操作之后的一个回调命令,我们在代码里尝试一下,我暂时删除这个,我删除了这两个用不上的导入项,好了 我们想添加标题,我们把它叫做“产品选择器”,我们需要主要操作…,所以我打开这个,还有这个 我们需要在按钮上显示的文本内容,我们就起名叫“产品选择器”,另一个是onAction 这个是回调命令,目前来说 我们要做的就是…,我们要在控制台日志中进行记录 确保在点击按钮时,确实会触发某些操作,我在控制台日志中记录“已点击”,好了 我们回到浏览器里看看效果,好 我们现在能看见页面组件了,它的标题是“产品选择器” 以及“选择产品”按钮,如果我打开控制台,然后点击按钮,我们应该会看到文本“已点击”,完美 效果和我们想要的完全一样,现在我们继续触发打开模式,当我们打开模式时,我们想看见开发商店的产品列表,但是 我们在商店管理后台查看产品页面,会看见目前并无任何产品,我们来添加这些产品,使用Shopify应用CLI就能轻松添加占位符产品,我们来看看CLI文档,在node/app/projects下面 然后命令参考,我们能见到另一个命令列表,当您在创建Node.js应用项目时可以专门使用它,我们想用填充命令,因为这会为开发商店添加示例数据,这样您就可以添加产品、客户或订单,在我们这种情况下 我们想使用 “shopify populate products”命令,它默认会添加五个项目,不过您可以随意更改数量,我们打开命令行工具 我先停用服务器,然后输入“shopify populate products”,我们会在这里看见它正在添加产品,到我们的开发商店,我们回到商店 刷新页面,这里有我们刚刚添加的五个产品,现在产品已经有了 我们继续添加模式,这就需要使用Shopify App Bridge,Shopify App Bridge是一个JavaScript库,可以与嵌入在Shopify管理后台的应用配合使用,就跟我们现有的情况一样,App Bridge通过让您访问,原生的Shopify功能 可显著减少您的开发时间,并确保用户体验始终如一,App Bridge还提供React组件 并已安装到位,因为我们使用CLI来创建了项目,App Bridge React完全兼容Polaris,因此界面会继续保持连续统一,我们来打开Shopify App Bridge文档,您可以在Shopify.dev找到,这个文档的链接会被添加到下方的描述框中,方便您获取它们,我们专门来看看React组件,我们想用资源选择器,资源选择器可以渲染模式 为我们提供资源列表,在我们这种情况下 资源就是指的产品,在这里 您可以在资源中进行选择,然后可以随意进行任何操作,文档会为您展示代码示例,以及说明如何在自己的项目中进行设置,还提供了一个备注 上面写道,“在以下示例中 您需要在验证过程中,“存储商店来源​,“然后从代码中获取 以便功能正常运作”,CLI已经帮我们处理了这个问题,并且在提供程序组件中包装了我们的项目,所以 我们只需要导入资源选择器 然后就能使用了,我们来看看资源选择器所接受的道具,这里有两个要求的道具 “open”和资源类型,“open”是一个布尔值 表明选择器是否为开放,而资源类型是您想在产品、产品多属性或产品系列之间,选择的资源的类型 所以我们想把它设置为“product”,我们进入项目中 把它添加进去,首先我们要做的是将索引转化为类,这样就能将资源选择器的状态,设置为开放或关闭,所以我要把这个更新为 “class Index extends React.Component”,我把这个括号删除,然后加上…,我们的Render命令,和Return命令,我们将页面组件移动到Return命令中,完美！,现在 我们导入资源选择器,我把这一行复制并粘贴到这里,把页面更新为资源选择器,我想从Shopify App Bridge React中把它导进去,好了 现在来添加资源选择器,把它加到页面组件中,然后继续打开那个备份,把资源选择器加进去,很好 我们要添加两个要求的道具,第一个是资源类型,我要把它设置为“Product”,第二个是“open” 我们想把它设置为,我们想将资源选择器的状态设置为开放或者关闭,所以我们把它设置为“this.state.open”,好了 我们来设置初始状态,把它设置为“open: false”,然后 当在页面中点击按钮时,这就是主要操作,我们想让它把状态更新为“open: true”,所以要在这里更改,输入“this.set state” 然后把它更新为…,“open: true”,好了 现在我们进入命令行工具,我们重启服务器 前往“shopify serve”,然后回到应用中,回到了商店管理后台 打开应用页面,应该会在这里看到应用 “我的测试应用”,我点击它 等待页面重新加载,好了 现在我们点击选择产品按钮,应该会打开含有五个产品的列表的模式,资源选择器也能让您搜索特定的产品,当然了 您可以选择其中的任意产品,目前 当您添加选择的产品时 不会触发实质的操作,所以我们当然要解决这个问题,您可能还注意到了 在关闭资源选择器时,不论您有没有选择产品,或者您像刚才那样添加了选择的产品,只要您尝试再次打开资源选择器 不会有任何反应,这是因为状态

Import Shopify Data to Google Sheets

hey youtube if you've landed on this,video yeah you might be familiar with,shopify or the algorithm spit you out,here,um either way um in this video i'm going,to show you how to pull,shopify data into something like google,sheets,um and how would we do that exactly well,i'll introduce you to a tool called api,connector,and you can get a copy of this tool by,heading over to,mixedanalytiks.com,and once you navigate to the website you,can get a copy of api connector from the,main page,i already have it installed so i don't,need to go through the process,to get to api connector once you've,installed the add-on you can access it,by clicking add-ons,api connector and then just opening once,you're inside api connector you're able,to now,add api requests and have them pull the,data directly into google sheets,uh now if you're a owner of a shopify,shop and you're wanting to maybe pull in,some customer data or product data i'll,show you how to do that right now,let's first start by logging into our,shop so i have just like my own,sample shop my oj stand i sell orange,juice and,paintings once you're at the home screen,you will need to generate an api key in,order to establish a secure connection,between,shopify and google sheets through api,connector,to do this we'll want to click here on,the sidebar apps,and then i'll show you how to create,your own i already have one,you'll want to go down here to manage,private apps and then you'll want to say,create a new private app,wow this is slow so once you're at this,screen,we can just go ahead and give our,private app name something like api,connector,it's fine um and then you can,probably just skip the email,um webhook api is not important,you'll want to say allow this app to,access your storefront using the,storefront api,for this case i'll just go ahead and,open up all of these why not,um and then once we click save it says,you're about to create a david app blah,blah blah,so just go ahead and hit create app damn,this is slow,oh so we do need to put an email after,all um i'm gonna put mine in and not,show you,so i'll skip this okay once you do it,let's try again,so i put in my email wow this is taking,forever,all right uh that didn't work so that's,okay this is part of the development,process don't panic if this kind of,thing,happens just read the bug and move on um,so it's asking for some admin,permissions,so probably we'll want to at least open,up access for now to,read access for customers um,we'll also want to get inventory and,then,i don't know what's another useful one,orders so i think,if again if you need to go back and get,some of these other ones later,you can activate these as needed um,yeah that's good yeah,okay all right so then once you've got,those we'll try to create again,see what happens okay so we are in we're,good to go,so let's head back over to our apps and,so the one i just created is called api,connector,um perfect so we have got,our api key so now we can start pulling,in some data,god this is so slow is it slow for y'all,too,so what we'll do now is let's just start,by basically getting all of the orders,in your,shop so if i open this over here in a,new tab,we can see that i have a bunch of orders,i have some stuff payment pending blah,blah blah and so say for example i want,to get this,over in my google sheets let's start by,adding a new request and then what we'll,want to do,here is start creating our api url path,um shopify's api documentation is not,the clearest that i've worked with,before,but thankfully anna has put a lot of,blood sweat interiors into a wonderful,shopify data documentation artikle so i,highly recommend,going to this website to use it it's,much simpler,i'll attach it in the description below,but basically what i want to do is we'll,want to get a base url so the the,structure is going to follow roughly,this format,um so back over an api connector we can,paste that in and then shop name you,should replace it with whatever it is,mine is the oj stand,um and then to get order data we're,going to want to,append this endpoint the admin api 2021,04 orders so forth onto the end,of our api url path just like this so,you have should have,more or less this with the name changed,and then additionally we'll need to,include the api,key so in order to use our api key we're,going to have to include a header,inside of our request so,we'll do that by grabbing the x shopify,access token header like this um,and pasting that here in headers where,it says key,and then for the value we can go back to,our oj stand,api and then what we'll want to do is,grab the password here actually,and so you'll copy that copy that,password and then we'll paste it,over here as our value instead,and then we'll hit save and run,beautiful,there's all my orders wonderful okay,um so one thing to note by default um,the shopify api is going to,limit the number of orders that we can,get at any one,time and you can change this to up to,250,by using the on the end of your api,url here ampersand limit,equals and then 250. if you need to get,more than 250,you can check out the documentation for,details on pagination,i won't go into that in this video for,brevity's sake,um but yeah so just for future reference,if you want to,change that you would just say limit,equals 250. so next let's say for,example,uh we want to get the customer data we,can do that by clicking add new,as we did at the beginning of the video,i would suggest going back to,our artikle here uh because it's very,well put together and grabbing that base,url,just to use as our template um change,your shop name,uh and then inside of the shopify,api documentation you'll want to go to,customer api,and then click here on customer,and then now once we're loaded in you,can see there's a couple of examples,that we can,use to get started let's just go ahead,and start with this first one we want to,just get a master list of all the,customers so we can,head there to this endpoint and we can,go and snag,that by copying and then pasting it here,on the end,and then we will also need to get that,x shopify access token from here in the,getting started part of the,documentation,um then we'll need to go back and get,our password so you can copy this and,put it somewhere else just make sure you,don't share it with anybody else it's,you know it's an auto generated password,but they will have access to your,account,um if they get a hold of that so yeah,once we have all this information in,we can create a new sheet and oh i just,created two,and we can call this something like,customers for example,and then we'll set the current sheet and,then we'll give it a similar name,for simplicity's sake and then we'll,save and run it,and momentarily we should see our sheet,populate with all the customers bingo,there's my,armando pool and laura garcia by the way,these are all fake people so don't worry,about jd privacy issues,um yeah so fantastik great so the last,thing we'll cover,is pulling the products into google,sheets um so let's go ahead,and start by creating a new sheet and,we'll call it products for example,and then we'll want to head back over to,our manage requests,and then we'll start a new one as before,same thing,head back to our wonderful documentation,grab the base url,paste it in here and then,we'll head back to shopify's api and,we'll want to get,products here below,all right so we'll click on this product,endpoint and again we'll just start here,with the simplest we'll click here on,the products,and then we'll go ahead and just snag,that whole endpoint,we'll paste it here on the end of our,api url,uh we'll want to go back and get our,headers so from the,documentation page we'll grab the access,token header paste it in,and then we'll go back over here to our,admin api password copy that,paste it in here in value and then we,should be good to go we'll just need to,make sure we set our current sheet and,then give it an appropriate name,save and run,and next thing you know