所在分类:  Shopify 所属圈子: Shopify代码 Shopify运营 独立站

Shopify如何自定义多个页面模板(方便随时调用)?

发帖12次 被置顶0次 被推荐0次 质量分1星 回帖互动70次 历史交流热度13.33% 历史交流深度0%

做过Shopify的卖家知道,Shopify里面的主题就像一个框架,你可在这个框架内填写内容,但是,你会发现这也是他的一个弊端,比如:
你的主题页面是80%宽度的,不管你填写什么内容,在Shopify上面怎么改,调整,他都不会达到100%全宽页面,你不能轻易改变这个框架。如果你既想保留80%页面宽,又想拥有100%的页面,又怎么操作呢?我们可以通过更改主题的代码来达到这样的目的;更改好之后,可以通过如下图所示的下拉框来选择你所需要的模板;


开始操作:

第一步:找到要控制要修改页面的主题文件:page.liquid
https://qaozen.com/wp-content/uploads/2019/06/26/2019062602553339.png
第二步:在Templates下面的新增templates点击新增模板,因为要修改,所以选择page,命名为容易区分的模板名称(因为这个模板创建好之后,会出现在产品页的模板选择下拉菜单里面),然后点击创建模板;

 https://qaozen.com/wp-content/uploads/2019/06/26/2019062603233718.png

 
2019062603232116.png



第三步:这里是以Shopify免费主题Debut为例子的教程,讲解更改代码的思路;

由于控制页面宽度的是page-width选择器,所以我们把他替换掉,换成自定义的page-fullwidth,
https://qaozen.com/wp-content/uploads/2019/06/26/2019062603314883.png

问:怎么知道他是控制页面宽度的选择器呢?

可以转到页面,审查元素,可以看到如下图所示:页面的最大宽度是1200px,调整他的最大宽度到全宽;更改他的像素值,页面宽度就会变化;
https://qaozen.com/wp-content/uploads/2019/06/26/2019062604353991.jpg
第四步:开始修改里面的代码,将代码修改成如下所示:修改完成后,你的页面就全宽



 

总结:Shopify的主题模板的修改流程大致如上面的介绍,你可以根据介绍,修改增加产品模板,修改结算页面,购物车页面,顾客登录页等等。(记得备份主题数据)
 
已邀请:

uc

赞同来自:

代码真的看不懂, 能加个联系方式交流一下吗 ?谢谢

要回复问题请先登录注册

x 点击咨询