6.2 主题装修结构讲解与Minimal主题设置演示

shopify

今天我们把主题装修设置页的版面结构给大家讲解一下,然后再顺便讲一下Minimal主题的安装和设置,经过之前的一些基础的学习,在这里一些不必要的细节我可能就不会再重复了。


在开始学习本课的主题装修之前,确保你已经学习过以下的课程:

4.4 Callections 产品系列管理

5.1 Themes 模板管理
5.3 Pages 页面管理

5.4 Navigation 网站地图管理


关于上面的四个知识点的东西,我在这里都只会一笔带过,不清楚的同学请先阅读一下相关的章节。


在这里我选择了
Shopify的免费主题【Minimal】来讲解,大家要学习的话请先在免费模板那里选择安装。

为什么选它呢,因为我个人比较喜欢简洁一点,页面比较规矩,导航一二级都可以点击的。


产品系列和页面的添加大致的流程是这样的:

【添加好页面和产品系列】》【在网站地图中添加菜单并在菜单项中引用相关的产品系列和页面】》【主题装修时引用网站地图菜单】


在进入主题装修前,先介绍一下我的产品系列,页面,网站地图有哪些。这些都要事先规划并添加好的。


产品系列
Callections 有三个系列

产 品 系 列 紊 产 品 系 列 产 品 条 件 产 品 标 签 等 于 山 Ott BESTSELLER 产 品 标 签 等 于 ℃ up 产 品 标 签 等 于 ℃ up CUPS 产 品 标 签 等 于 山 Ott BOTTLE

页面 Pages 一共有八个页面

About us About us Contact us Contact us FAQ FAQS Order Tracking Order Tracking Privacy Policy Privacy Policy Refund Policy Refund Policy Shipping policy Shipping policy Terms&Conditions Terms&Conditions

网站地址:有三个菜单,【Footer menu】这个可以忽略它。

Footer menu INFORMATION Main menu SERVICES Search Terms&Conditions, Privacy Policy, Refund Policy, Shipping policy Home, ALL Products, BOTTLE, cups, BEST SELLER about us, Contact us, FAQ, Order Tracking

我们先来了解一下我们要装修最终的网站首页的结构,这张图你非常有必要认真看,并理解它:

看懂这个图,你就掌握主题装修技能的40%了。

ucanb2c EÆO/LOGO HOME BEST SELLER BEST SELLER Collection list Header Main menu CUE'S CkJhÄh 22 0/ 22 0' BEST SELLER SERVICES SERVICES CUPS Footer INFORMATION cop,tight 2019. by Shop", BOTTLE Newsletter INFORMATION Refund

我不多说一点,你怎么会认真看呢。

现在我们点击模板那里的 【自定义】 进入主题装修页,看一下首页的装修如何对应上面的图片,如下图所示:

模 板 全 局 设 置 i 畢 页 面 v Minimal S : 切 换 手 机 或 PC 预 览 亠 亠 Announce something here 选 择 ; 修 的 页 面 默 认 是 主 页 头 部 设 置 ucanb2c 幺 ] 灯 片 H O M E A L L P R O D U CT S B O T T L E C I BESTSELLER Collection list 口 Image With text 、 : 亠 添 加 更 多 部 分 页 脚 设 置 模 版 操 作 0 0

首页分为三块:

顶部的称为:【标头Header标头是每个页面的共同部分,而且大家都是一样的,点击标头可以进行设置

底部的称为:【页脚 Footer页脚和标头一样,大家都是共用的,点击页脚可以进行页脚的设置。

中间的称为:【部分 Section 蓝色框框那里就是部分,点击【点加部分】你可以添加多个部分。


【部分
section】的讲解:

像我们首页图片中的 【幻灯片】【BEST SELLER】【Collection list】这些都是属于部分的。

部分那里有两列,一列是有个眼睛图标,点击它可以让这一部分可见或不可见。

有一列是几个小点的图标,点击就可以进入这一部分的设置 ,也可以按住它然后拖动鼠标进行排序。


【选择页面】的讲解:

我们先来看一下有多少个页面,如下图所示:

s Minimal z, O*Th BEST SELLER Collection list Image with text 404 BEST SELLER

当你选择什么页面,左边的【部分】就对应哪些页面的部分,然后你可以对这个页面进行设置

像我们现在,默认是选中了主页,所以左边的【部分】对应的是主页的设置,你就可以点击左边的部分进行主页的装修设置,右边就会有实时的效果可以预览。


【模板设置】的讲解:

这个是对我们网站的全局设置,不像部分,部分的设置,你所影响到的只是你设置的那个部分。

而模板设置这里的设置是会影响到整个网站的,我们来看一下模板设置有哪些,如下图所示:

S Minimal 颜 色 版 式 网 站 社 交 媒 体 Checkout 在 电 改 模 版 样 式 之 前 保 存 MINIMAL ( 版 本 11 . 3 . 0 ) 由 Shopify 设 计 并 扌 是 共 支 持

大家看到了,我们这个主题的模板设置就是这几项,但是别的主题可能就不是这几项了,但是大同小异。你可以逐个点开了看看,操作很简单,也是中文界面。这里我就不逐个点开了讲了。设置完后,你记得预览一下右边的效果,就知道你是做了哪些更改了。有时左边的实时预览有延迟,你可以保存后,新开浏览器窗口刷新查看你网站更改设置后的效果,有时可以刷新多几次。


【标头
Header】的设置讲解:点击标头,这里我分几个截图,因为设置都是比较长

显 示 索 样 《 0g0 准 荐 450 X200 像 素 大 小 浏 览 免 费 片 定 义 g 。 宽 度 ( 像 素 〕 450

》是否要在标头显示搜索栏

LOGO的上传和尺寸设置,不上传LOGO默认就会用我们的店铺名称文本。

ucanb2c Select menu 在 。 下 方 居 中 显 示 主 菜 单 左 对 齐 g 。 在 标 头 中 显 示 分 割 线

点击【Select menu】选择我们【网站地图】中的菜单【Main menu】网站就可以显示主导航了:

HOME Main menu Change g logo ucanb2c Edit menu cå Remove ALL PRODUCTS BOTTLE CUPS BEST SELLER

【注意】:【页脚】菜单选择,【部分】中的产品系列选择,都和这个类似。

如果我想把 BOTTLE CUPS 都归到 ALL PRODUCTS 变成它的二级目录,我要怎么办?

这个时候你需要去到【网站地图】的 Main menu】菜单那里,把 BOTTLE CUPS 拖动到 ALL PRODUCTS下面,如下图:

Maln BEST SELLER Home 0 言 ALLp 乛 oduc s BOTTLE CUPS ALL Products

保存后你去刷新首页,就会看到首页的导航变成这样了,如下图:

HOME ALL PRODUCTS BEST SELLER

下面看一下公告栏,这里你可以修改文本,改成如【全场满39刀包邮】之类的公告。

连接那里是你可以给这个文案做站内或站外的超链接,可选。

Announce something here


【页脚
Footer】的设置讲解:

CONTENT BEST SELLER SERVICES about us Contact us Order Tracking INFORMATION Terms&Conditions Privacy Policy Refund Policy Shipping policy CUPS Follow Us Copyright @ 2019, ucanb2c. Powered by Shopify MSA BOTTLE Newsletter Get our updates on promotions and coupons. Your email SUBSCRIBE
SERVICES SERVICES Change Edit menu cå Remove

这里我们填好要在页脚显示的 标题 SERVICES , 然后选择【网站地图】中的菜单【SERVICES】。

第二个菜单 ,填好要在页脚显示的标题 INFORMATION , 然后选择【网站地图】中的菜单【INFORMATION】。


社交图标:点开下面的【模板设置】就可以设置相关的社交连接,
FB主页等。这个也可以在全局设置那里填写。

Twitter https://twitter.com/shopify Facebook https://www.facebook.com/xxx https://www.facebook.com/shopify Pinterest https://www.pinterest.com https://www.pinterest.com/shopify

这个是邮箱订阅文案:

Get our updates on promotions and coupons.


现在们切换一下面页,【选择页面】那里
我们选择一下【产品页面】,接着我点击左边的部分【产品页面】。

Minimal Edit this product Font Font 1 Quantity Font Style ADD TO CART exercises, for vacation, and so much more.

这里我想设置一下 BUY IT NOW】按钮出来, 点击【显示动态结账按钮】这样就出来了,如下图:

Font Font 1 Quantity 1 Font it, PayPalüApple Payo ADD TO CART BUY IT NOW A great gift for yourself, easy to carry, suitable f exercises, for vacation, and so much more.

好了,关于首页的【部分 section】我这里就不讲解了,留给大家自己学习,主要是大解点开善于观察就好了。有什么问题我们也可以群里交流。


大家在装修的时候
一定要去预览PC端和手机端,而且手机端的是最重要的。基本做电商的,广告的成交会有差不多75%左右的流量来自手机端了。无论哪里的网站,你都可以通过谷歌浏览器,F12 来切换到手机端的浏览:

iPhone X assets/theme.js?127" type="text/javascript"></script> 375 x 812 75% Cart Console Elements Sources 01 A 74 | Announce something here ucanb2c <iframe title="Shopify Admin Bar" id="admin-bar-iframe" s " https : . com(admin'bar? action name=index&path=%2F&storefront locale=en" sandbox= "allow-same-origin allow-scripts" style=" position: fixed; bottom: e; left: 0; z-index: 2147483647; width: 8epx; heigh 8Øpx; border: none; " <iframe src="chrome-extension: // gkzgpgfdfpachffkjjmjenohfmlh/ index . html#cmallc . mys_h_@ü_fy.com" style="position: fixed; tc epx; right: -6øepx; display: block; border: epx; height: IE z-index: 2147483647; transition: right e.3s ease-in-out es; width: 55Øpx ! important; " (script type="text/javascript" src=" //astyle-src .alicdn.c app/ searchweb/ products/zhaohuoshenqi / > < / scr (div id="pexgle-extension-container" style= 'V all : initial " </div> html body#ucanb2c.template-index Styles Event Listeners DOM Breakpoints Properties Filter element. style { html, body { background: : hov . cls + BEST SELLER Personalized Gift Tumbler 92-93 s body , timber . scss Personalized flute stemless tu m er 35.98 select { input, textarea, button, font-size: 16px; line-height: 1.7; font-family: "PT Sans" , sans- serif; font-weight: 400; font-style: normal; • #403b37; color: -webkit -font - smoothing : anti aliased ; Filter background-attachment scroll background-clip border-box background-color background-image none background -orzgln Accessibility O Shc 255, 255) addin -box Console What's New x

大家一定要多测试,多预览效果。


现在给你复习一下,我们上面讲了装修界面的结构
有这些:

【标头】【部分】【页脚】【页面选择】【模板设置】


搞明白主题装修界面的结构之后,我想聪明的同学已经可以独立学习了。没有通过一次学习可以掌握所有主题的,但是结构都是一样的,只是具体的部分的设置不一样,可能有一些主题多一些,有一些主题可设置的少一些。这个时候就需你认真看部分设置的表述,揣摩它们的意思,然后多操作,多预览效果。


所以,不要拿到一个新主题,自己不看不学,就跑去问别人,我这里要这个效果,我要怎么怎么设置。
人家手上没有你的主题,是没有办法具体回答你的操作步骤的。


当你掌握了主题的结构之后,就可以去学习不同主题了,有些主题森林买回来的主题比较复杂,记得先看他们的使用说明文档,一般都会有非常详细的说明。


当你在规划网站,想要实现某些功能时,你要优先通过多浏览不同的主题找到能够符合你需求的主题。再找遍所有主题都无法满足你后,如果功能不是非必要,你就要退而求其次了。最后才是你考虑叫人帮你做二次开发。因为买主题真的比主题的二次开始成本要低得多。

未经允许不得转载:UcanB2C-Shopify教程 » 6.2 主题装修结构讲解与Minimal主题设置演示

赞 (1)

评论 61

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. Best SEO ServiceAwesome post! Keep up the great work! 🙂回复
  2. Elli CaicedoI think this is among the most significant information for me. And i’m glad reading your article. But wanna remark on few general things, The site style is ideal, the articles is really nice : D. Good job, cheers回复
  3. Lashawna Evensononline prescription sildenafil citrate回复
  4. Shiloh RodakHave you ever considered writing an e-book or guest authoring on other blogs? I have a blog centered on the same ideas you discuss and would really like to have you share some stories/information. I know my subscribers would enjoy your work. If you’re even remotely interested, feel free to shoot me an email.回复
  5. Vincent KaczorI have been absent for a while, but now I remember why I used to love this web site. Thank you, I¡¦ll try and check back more often. How frequently you update your web site?回复
  6. Ka NoomanA lot of thanks for all of the hard work on this site. My niece delights in setting aside time for investigation and it’s simple to grasp why. Most of us notice all about the compelling medium you make very important strategies through this web site and even recommend participation from some other people on the concern then our favorite princess is now studying a whole lot. Take pleasure in the remaining portion of the year. You’re conducting a superb job.回复
  7. Hai ZbellI do not even know how I ended up here, but I thought this post was good.回复
  8. Lamont Armstrongyou know any ways to help stop content from being stolen? I’d definitely appreciate it.回复
  9. Alda Glasglowyou write. The sector hopes for even more passionate writers回复
  10. Ward BabcockHello. splendid job. I did not anticipate this. This is a remarkable story. Thanks!回复
  11. Son SiudaI not to mention my pals ended up viewing the great guidelines located on your website and then before long got a horrible feeling I never expressed respect to the blog owner for those tips. The boys became for that reason warmed to see them and already have really been tapping into these things. Thank you for indeed being considerably helpful and for opting for certain decent ideas millions of individuals are really eager to be informed on. Our own sincere regret for not saying thanks to sooner.回复
  12. Louella Linarezend.回复
  13. Dusty HoegerlAwesome post. I’m a regular visitor of your site and appreciate you taking the time to maintain the nice site. I’ll be a regular visitor for a really long time.回复
  14. Latrice HollThank you a lot for giving everyone remarkably memorable chance to read in detail from this site. It’s always so beneficial and also jam-packed with amusement for me and my office colleagues to search your site at minimum three times in one week to learn the newest things you have got. And indeed, I am certainly astounded considering the cool strategies you give. Certain two tips in this posting are basically the most suitable we have had.回复
  15. Chang CranfordWill you please drop me a e-mail?回复
  16. Marybelle AthearnHave you ever thought about creating an e-book or guest authoring on other blogs? I have a blog based upon on the same subjects you discuss and would really like to have you share some stories/information. I know my audience would value your work. If you’re even remotely interested, feel free to send me an e mail.回复
  17. Earleen BucekIm obliged for the post.回复
  18. Lai Keechamoxicillin torsemide 5 mg Allopurinol Online Prescription Orlistat KEFLEX 250 MG Lasix ventolin buy doxycycline 100mg acyclovir 400 mg回复
  19. Shannon BethHey there. I found your website by way of Google while searching for a comparable matter, your web site came up. It seems great. I’ve bookmarked it in my google bookmarks to come back then.回复
  20. Ivy Ackiespeople of blogging, that really how to do blogging回复
  21. Amy SouhradaYou have remarked very interesting points ! ps nice internet site . “Do not quench your inspiration and your inmagination do not become the slave of your model.” by Vincent Van Gogh.回复
  22. Zack OgleI¡¦ve been exploring for a bit for any high-quality articles or blog posts in this sort of area . Exploring in Yahoo I at last stumbled upon this website. Reading this info So i am glad to express that I’ve a very excellent uncanny feeling I came upon just what I needed. I so much definitely will make sure to do not overlook this website and provides it a look regularly.回复
  23. Elma RuffelI am continuously invstigating online for posts that can aid me. Thx!回复
  24. Eileen GrawWhat i do not realize is in fact how you’re now not really a lot more well-appreciated than you may be now. You’re very intelligent. You understand therefore considerably with regards to this matter, produced me in my opinion believe it from a lot of numerous angles. Its like men and women are not involved unless it’s one thing to do with Woman gaga! Your individual stuffs great. All the time care for it up!回复
  25. Lucrecia AllphinShe never wants to go back! LoL I know this is entirely off topic but I had to tell someone!回复
  26. Christina AmezagaПодобная проверка дает возможность определить качество стыков и стенок труб, места расположения щелей, свищей и иных недостатков, обнаружить засоры и посторонние элементы, незаконные врезки и тому подобное. Видеоинспекция может быть использована и в случае приёма трубопроводов в результате строительного производства, ремонта.回复
  27. Warren GattisonWoah! I’m really enjoying the template/theme of this site. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between user friendliness and visual appearance. I must say that you’ve done a very good job with this. Additionally, the blog loads extremely fast for me on Firefox. Exceptional Blog!回复
  28. Deann HodsdonWordPress 設計開發回复
  29. Todd IbarraArnold Bouka Moutou回复
  30. Kirk FergursonReally informative blog.Really thank you! Really Great.回复
  31. Lynn DepungHello there. I discovered your site via Google at the same time as looking for a comparable matter, your site got here up. It looks good. I’ve bookmarked it in my google bookmarks to visit then.回复
  32. Leisa ForeeI have heard fantastic things about blogengine.net.回复
  33. Benton MinicucciHiya, I’m really glad I’ve found this info. Nowadays bloggers publish only about gossip and net stuff and this is really annoying. A good website with interesting content, this is what I need. Thanks for making this web-site, and I’ll be visiting again. Do you do newsletters by email?回复
  34. Shad LedyardI visited a lot of website but I conceive this one holds something special in it.回复
  35. Glady KettingerI wish to convey my passion for your kindness for persons that must have help on this one situation. Your very own commitment to getting the solution around had been incredibly interesting and has regularly empowered individuals like me to arrive at their endeavors. The informative instruction denotes this much a person like me and even further to my office colleagues. Warm regards; from everyone of us.回复
  36. Sammie NorboAmazing! This blog looks just like my old one! It’s on a entirely different subject but it has pretty much the same layout and design. Great choice of colors!回复
  37. Lynn Isaksonhey there and thank you for your information – I have certainly picked up something new from right here. I did however expertise several technical issues using this site, since I experienced to reload the website many times previous to I could get it to load properly. I had been wondering if your web hosting is OK? Not that I’m complaining, but sluggish loading instances times will sometimes affect your placement in google and could damage your high quality score if advertising and marketing with Adwords. Well I am adding this RSS to my e-mail and could look out for a lot more of your respective intriguing content. Ensure that you update this again very soon..回复
  38. Roseanna Kolenпроститутки в новосибирске за р回复
  39. Marge ZachterAwesome post. I’m a normal visitor of your site and appreciate you taking the time to maintain the excellent site. I will be a frequent visitor for a long time.回复
  40. Chad KlemmGreat! I should definitely say cause I’m impressed with your web site. I had no trouble navigating through all the tabs and related information ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Reasonably unusual. Is likely to appreciate it for those who add forums or something, website theme . a tones way for your client to communicate. Nice task..回复
  41. Terrell BatkinHiya, I am really glad I have found this info. Today bloggers publish only about gossip and internet stuff and this is actually irritating. A good website with interesting content, this is what I need. Thanks for making this web-site, and I’ll be visiting again. Do you do newsletters by email?回复
  42. Dyan Salathings from it concerning blogging. thanks.回复
  43. Sherlyn SprakerHey there. I found your blog by means of Google while searching for a comparable topic, your website got here up. It looks good. I have bookmarked it in my google bookmarks to come back then.回复
  44. Derek RemerezHey, thanks for the blog.Thanks Again. Fantastic.回复
  45. Ima Papsongot here, certainly like what you’re stating and the way回复
  46. Lavera DuonolaHowdy! I’m at work browsing your blog from my new apple iphone! Just wanted to say I love reading your blog and look forward to all your posts! Keep up the superb work!回复
  47. Liza TerronHi there just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and both show the same results.回复
  48. Jeffery MarketThank you for the good writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! However, how can we communicate?回复
  49. Emmitt BouknightHello, you used to write fantastic, but the last several posts have been kinda boring¡K I miss your super writings. Past several posts are just a little out of track! come on!回复
  50. Lazaro BrimeyerI believe that you ought to publish more on this subject回复
  51. Nathalie MorineThanks, I have recently been searching for info approximately this topic for a long time and yours is the best I have discovered so far. However, what about the conclusion? Are you certain in regards to the source?回复
  52. Moshe MalicoteKeep functioning ,fantastic job!回复
  53. Ed DiopI gotta bookmark this website it seems invaluable very helpful回复
  54. Johnathon Salsberghey there and thank you for your information – I have definitely picked up anything new回复
  55. Elliott WittlinHi my friend! I wish to say that this post is awesome, great written and include approximately all significant infos. I¡¦d like to see more posts like this .回复
  56. Delfina MciffWhat are some good Tumblr blogs that enable you to send pictures, to acquire even more fans?回复
  57. Rick Kulbidakind of info in such a perfect method of writing? I have a presentation subsequent week,回复
  58. Terisa DomeI wish to show my gratitude for your kindness in support of women who really want help on this important question. Your real commitment to passing the message across appears to be rather invaluable and have continuously enabled most people like me to achieve their pursuits. The useful report denotes so much to me and somewhat more to my office workers. With thanks; from everyone of us.回复
  59. Conrad Wakulaof course like your website however you need to check the spelling on several of your posts. Many of them are rife with spelling problems and I find it very bothersome to inform the truth nevertheless I will surely come back again.回复
  60. Jolie KinneyYou made a number of good points there. I did a search on the matter and found mainly persons will consent with your blog.回复
  61. Dawn SattleyAwesome post. I’m a regular visitor of your web site and appreciate you taking the time to maintain the excellent site. I’ll be a frequent visitor for a really long time.回复