继续Shopify建站之旅。
点击Online Store->Navigation,进入菜单设置页面。
有两种菜单样式:主菜单(Main menu)和底部菜单(Footer menu)。
主菜单,就是我们通常看到的页面导航菜单,位于页面的上部或者侧面。
底部菜单位于网站页面底部。
主菜单和底部菜单的设置类似,这里以主菜单为例。
点击Main menu进入主菜单设置页面。
主菜单的标题可以修改,但它不会显示在前端让客户看到。
我们单击Add menu item,弹出添加菜单对话框。
Name处输入菜单名;Link处则是菜单跳转目的页面,如Home page、Collections、Products等。
要创建一个菜单链接到Collections页面,那么需要先创建Collections页面。
这需要点击左侧菜单Products->Collections,进入如下页面。
点击Create collection进入以下页面。
输入Collection的标题,Collection Type选择Manual——手动添加产品。
Description和Collection image可选,可以根据自己需要添加相应内容。
完了之后,单击右上边的Save保存Collection,这样这个Collection就创建完毕了,页面会自动跳转到以下图片所示页面。
如果想要继续创建Collection,那么可以单击create another collection。
如果想要查看Collection页面效果,那么可以单击View或者View on your online store。效果如下图。
创建好了Collection之后,我们就可以回到主菜单创建页面,继续创建菜单。
Name处输入菜单名称,Link处选择Collections,之后再选择我们创建的Collection,如Yoga Pants。
点击Add创建完一个菜单。主菜单变成下面这样。
如果要改变菜单位置,可以把鼠标光标放到菜单项六个点位置。鼠标光标会变成一个手势,就可以拖动菜单上下移动了。
单击右上边的Save,主菜单的变更就可以显示到前端页面了。
Collection是一个产品的类目,放的是同属一个类目下的的产品。
如果要创建About us、Contact us、Shipping Policy等页面,则添加菜单的Link选项就是Pages。
我们回到左侧菜单,单击Online Store->Pages,然后单击Add page进入创建Page页面。
以About us页面为例,我们输入Title、Content,Template选择默认的page。
然后单击右上角的Save保存页面。以下是页面效果。
About us添加到主菜单跟添加Collection没多大差别,只是Link选择Pages。
创建Contact us页面时,Content要使用第三方的表单模板的,只要点击一下 <>,就可以输入第三方html表单代码。
我们也可以使用Shopify提供的模板。只要Template选择page.contact就可以。
以下是Shopify的Contact us模板页面效果图。
那么如何添加二级菜单呢?
比如说,我添加了About us和Contact us菜单,但我想将这两个菜单放到同一个菜单About下。
因为没有About菜单,先创建它。
跟正常菜单创建没有不同。不过,我不想让About这个菜单链接到任何内容,那么怎么做?
很简单,我们直接在Link处输入#,然后Shopify会跳出如下图所示的情况。
我们直接选择蓝色的#选项,结果如下。
然后单击Add,这样一个不会链接到任何内容的About菜单就弄好了。
添加好About菜单后,我们只要把About us和Contact us菜单拖到About的菜单下面就可以了。
注意:拖动About us和Contact us菜单到About菜单下面时,必须靠右边一些(如上图),这样,Shopify才会把About us和Contact us变成二级菜单。
以上!