shopify二次开发 产品详情页面的开发一(结构布局)

本人 兼职 shopify、店匠二次开发、仿站、定制等开发服务,有需要的可以加我微信 abc939039210,备注 shopify

摘要

在 使用 shopify 的一些主题过程中,总有不如意的地方,所以就需要我们程序员敲敲代码了,本篇讲的是shopify 产品详情页的开发 之 结构布局,建议同行们在本地开发,本地开发shopify部署可以看 Shopify 配置本地开发教程 最详细详解

一、结构布局说明

结构布局图

二、创建 产品详情页 section

1、在 section 文件夹 下面创建自己的 产品详情页的section,如 boderry-product-template.liquid,一般我们可以给自己创建的文件加上前缀 如我加的前缀是 boderry
创建section
2、在 /templates/product.liquid 修改原先的 section 指向
/templates/product.liquid
到这里我们就可以编写我们的产品详情页了

三、编写结构代码

代码如图

代码

效果

效果如图所示
对于这基础的结构布局代码编写我就不说了,大伙估计比我还熟悉这布局,对于前端人员来说,我们更重要的是获取数据和利用数据
下一步我们将进入 图片展示区域的开发

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Shopify 专家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值