888 total views, 5 views today
小贴士
1. 在进行代码修改之前记得先去确认下模板编辑器中有没有相关功能的设置项，如果有的话，就没必要额外开发代码来实现了；
2. 在做任何大的代码修改之前，一定要记得备份模板，这样即使把模板改乱了后面也可以轻松回滚代码；
3. 需要懂一些基本的HTML、CSS、JS和liquid代码知识。
详情页TAB切换功能也是很多卖家的一个刚需，今天就来看一下如何通过模板代码开发来实现，当然Shopify App store也是有一些插件可以实现，比如Easy tab等，传送门，我的定制化教程一般是给那些不屑于安装App的人看的哈，稍微花点时间自己动手来实现，不可花太多精力，因为卖家的重心还是要多花在店铺运营上。
先来看效果，PC端是这样的：
操作步骤：
1、登陆到Shopify店铺后台, 找到Online Store > Themes；
2、选择要编辑的模板，然后点击Actions > Edit Code；
3、一般我们会把这个TAB切换放到商品详情页，可以是购买按钮下面的侧边，也可以是商品details整个模块的下面。搜索“product”，找到product.liquid，或者product-template.liquid文件，单击打开；
4、浏览器新开页打开代码文件，拷贝其中所有代码，代码是存放在Github上的，需要翻Qiang才能打得开，打不开的小伙伴可以私信我单独发送；
5、按照图3的位置粘贴代码，然后保存文件，前往店铺前台查看效果。
我这段代码只是一个展示案例哈，你可以根据自己的需求来改一些配置或者样式布局，比如新增选项卡、更改选项卡名称和内容、更改底色等等。
除此之外，我们还可以把这个TAB切换功能的内容在Product页面section里开放修改，这样后期更改内容就不用在代码里操作了，直接在店铺装修模板编辑处改就行了。
说明：
如果您从我们的推荐链接注册SHOPIFY店铺并且最终付费订阅了套餐，我们将会从SHOPIFY官方获得一定的返利。这也会支持我们一直为中国的独立站卖家提供最优质而且免费的SHOPIFY教程，感谢您的支持。
建站咨询