社区首页 (3665)
我加入的社区
我管理的社区
官方推荐社区 76
其他社区 3665
请编写您的帖子内容
社区频道(7)
显示侧栏
卡片版式
全部
问题求助
交流讨论
Shopify 插件
Shopify二次开发模版定制
博文收录
活动专区
最新发布
最新回复
标题
阅读量
内容评分
精选
郑工 2023-04-05
shopify开发 引用第三方插件和静态部分添加块
摘要本篇主要讲如何引入第三方插件和动态添加部分，这里我引入的第三方插件是 swiper，一款很不错的幻灯片插件，非常强大。我用它来实现以下效果图片一、引入 swiper 插件1、下载 swiper 插件下载swiper2、将 swiper.min.js 和 swiper.min.css 导入到shopify 的 assets 资源目录下swiper.min.js和swiper.min...
...全文
329
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
shopify 二次开发 如何创建定制产品，如何让用户写入定制内容
什么是定制产品定制产品，顾名思义，就是客户定制具有自己特色的产品。例如，定制记事本 —— 客户可以给商家提供图片和文字，让商家在记事本封面打印上自己的图片和文字。按照上例，则商家需要得到用户定制得内容（图片或文字，即：文件或文本），那我们要怎么拿到客户提供得文件或文本呢，这是我说要讲的内容一、shopify 购物车的 properties 属性通过查看官方文档 或 Ajax cart，我们可以得知 properties 是一个对象，这个对象是用来存放客户添加的自定义信息（官方描述：收集产品的自定义信息
...全文
342
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
shopify 二次开发 如何开发超级菜单(超级导航)
shopify 如何开发超级菜单 超级导航摘要随着互联网的发展，网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了 图片 + 文本 的展现形式，甚至是 图片 + 文本 + 视频的展现形象。效果图如下，其实像这种效果 有一个 专业属于叫 超级菜单只不过是很少人知道而已，所以一般人说超级菜单也很少人能清楚的知道是说什么像这种效果上面效果我们又应该如何在shopify实现他们呢？讲解以最后一张效果图为例注：我的写法比较注重
...全文
355
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
Shopify 前端开发 占位符(占位图片)的使用
Shopify 占位符的使用本人兼职shopify 开发工作，如有需要可以加我微信 abc939039210，备注 shopify开发咨询摘要这编内容很简单，基本我们只需要知道怎么调用就行了在 shopify 主题中我们 经常会看到 一些占位的图片，如下图，下面的图形分为两种，一种是图一由shopify 提供的占位符(SVG格式)，另一种是图二由placeholder提供的可自定义尺寸的图片(jpg格式)。个人比较推荐使用第二种方式，因为这样可以比较直观的知道要上传的图片格式使用Shopif
...全文
326
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
Shopify 二次开发 图片CDN参数详细讲解
Shopify 前端开发 图片尺寸参数讲解摘要对于刚入手shopify 的小白来说，shopify 图片是一个急需了解的点。对于大企业来说资源管理是必须优化到极致的，目前对于资源管理比较有效的方式是 CDN 资源管理。shopify 自然也会为它的资源搭建CDN服务，而对图片则做图片CDN，图片CDN与传统CDN的区别在于，它是专门为图片做优化的，通常包含缩放、格式转换等。你可以把它看成是一个API，通过传入尺寸、质量、格式等参数，获取到对应的图片内容。这也使得我们在使用上非常方便，适用于多种不同的场
...全文
342
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
shopify 创建永久免费商店
shopify 创建永久免费商店本人兼职 shopify 前端开发，如有需要可以加我微信 abc939039210摘要注意：本文所说的 shopify开发商店，除了不能做真实交易之外，其他功能与shopify收费商店无异。适合用于开发主题、测试主题、开发应用和测试应用根据 shopify 最近的更新，目前开发商店的商店密码已无法移除创建步骤步骤一：创建shopify合作伙伴账号访问 https://partners.shopify.com/signup 进行注册即可步骤二：验证业务邮箱
...全文
318
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
Lazysizes.js 图片懒加载的使用方法详解
Lazysizes.js 图片懒加载的使用方法详解摘要官方介绍：​ **lazysizes **是一种快速（无垃圾），对SEO友好且可自动初始化的lazyloader，用于图像（包括响应图像picture/ srcset），iframe，脚本/小部件等。它还通过区分关键视图元素和近视图元素来优先分配资源，以使感知性能更快。​ 它也可能成为您集成响应式图像的第一工具。它可以自动计算sizes响应图像的属性，它允许您media与CSS共享对属性的媒体查询，从而帮助将布局（CSS）与内容/结构（HTM
...全文
332
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
shopify 二次开发 添加优惠弹框（折扣码弹框）
shopify 二次开发 添加优惠弹框（折扣码弹框）摘要本文主要教shopify商家如何给自己的商店添加优惠弹框，所以本文我直接提供代码，不讲解代码上的知识点（有些主题是带有优惠弹框的，你可以先检查一下自己的主题是否带有优惠弹框功能，如果没有再通过本文添加）。如果你需要一些 特别的功能或者修改样式等 你也可以与我联系优惠弹框弹框效果图可编辑功能添加代码步骤一：打开编辑代码步骤二：在 sections 目录下新建 coupon-dialog.liquid 文件步骤三：写入 cou
...全文
323
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
shopify二次开发 产品详情页面的开发二 （信息展示区一[数据获取]）
摘要上篇讲了关于图片展示区域，这次讲信息区域的开发，主要讲如何获取到标题价格等信息。因为信息区域涉及的东西较多，所以这次分为多篇文章。附：最近制定一个计划，打算每周写三篇以上原创文章，主要写shopify的开发和前端的一些文章。希望大家能够给关注或者赞一、创建...
...全文
326
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
shopify二次开发 产品详情页面的开发二 （图片展示区）
摘要图片展示这块，我采用的 swiper 插件 的 基础示例300，在他的基础上进行修改swiper 使用方法 基础示例300如果有不知道怎么引入 swiper 插件 的同学，可以在下方留言一、引入基础实例3001、为了方法我们编辑代码，我们可以把图片展示模块独立出来。新建 snippets 页面 /snippets /boderry-product-images.liquid，并在对...
...全文
330
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
速卖通产品图片放大镜功能实现方法详解，附完整代码
速卖通产品图片放大镜功能速卖通图片放大镜效果实现方法详解，附完整代码效果图如下代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="...
...全文
346
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
shopify二次开发 产品详情页面的开发一（结构布局）
摘要在 使用 shopify 的一些主题过程中，总有不如意的地方，所以就需要我们程序员敲敲代码了，本篇讲的是shopify 产品详情页的开发 之 结构布局，建议同行们在本地开发，本地开发shopify部署可以看 Shopify 配置本地开发教程 最详细详解一、结构布局说明二、创建 产品详情页 section1、在 section 文件夹 下面创建自己的 产品详情页的section，如 b...
...全文
327
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
CSS 内容自适应居中对齐 弹性盒子
使用 CSS3 的弹性盒子 实现内容完美自适应居中对齐，无需设置内容和父元素固定宽高
...全文
324
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
Shopify 二次开发 配置本地开发教程 最详细详解
摘要身为 shopify 网站管理者与开发者 时常需要根据需求去编辑代码，进行少量的代码编辑在页面上编辑还好，但是需要编辑大量的代码则是非常不方便的，因此需要我们将代码同步到本地，并在本地编辑可以自动同步到shopify服务器上第一步、搭建 shopify 本地开发所需要的环境1、安装 chocolatey chocolatey 安装 根据 chocolatey 官网安装即可，非常简单有...
...全文
348
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
原生js 使用屏蔽按键完美实现 input 输入整数，可以此方案扩展其他控制
案例首先，我们讲一个很常见的购物测商品数量控制小案例。案例图片如下要求：1、商品数量为 1~999 （不允许为0）2、不允许输入其他字符实现方法：1、使用 maxlength 控制最大字符数为 3；2、使用 onkeydown 在用户按下按钮判断按钮是否符号要求，符号则写入，不符合则禁止写入3、使用 onfocusout 在用户离开输入框时判断是否合理，如果不合理则转换为合理的值...
...全文
341
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
Shopify 二次开发 添加自定义部分
Shopify 二次开发 添加自定义部分Shopify 二次开发 添加自定义部分sections在 Shopify 主题中创建静态的部分Shopify 二次开发 添加自定义部分sections最近跟朋友一起搞电商，需要做个自建站，游历了下虚拟世界，最终选择shopify，在使用的过程中发现国内对 Shopify 的二次开发共享很少，所以打算向大家分享下 shopify 的开发经历，初涉 sho...
...全文
346
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
加精
Shopify模版定制：Shopify 纯CSS + Liquid 实现幻灯片功能（二） 之水平轮播
使用纯CSS解决各种问题，不仅能简化代码、还能优化网站加载和减少阻塞等，更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例，详细讲解如何使用纯css + liquid 实现幻灯片功能（slide的内容可以替换成任何你想要的内容）。上篇文章为大家讲解了如何实现垂直轮播，本篇将基于上篇扩展水平轮播，同样也是纯CSS来实现，下篇将为大家提供经典的照片墙跑马灯。当然由于纯css没法监听滑动和点击等一些事件切换（滑动切换和点击切换按钮切换），这些只能通过js实现。代码里面都详细写了每段代码的作用。
...全文
331
评分
回复
Shopify二次开发模版定制
郑工 2023-04-05
加精
Shopify模版定制: 纯CSS + Liquid 实现幻灯片功能（一） 之上下轮播
使用纯CSS解决各种问题，不仅能简化代码、还能优化网站加载和阻塞等，更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例，详细讲解如何使用纯css + liquid 实现幻灯片功能（slide的内容可以替换成任何你想要的内容）。下篇文章将会还会为大家提供左右轮播的效果，后面还会写基于该功能写一个照片墙跑马灯滚动，同样也是纯CSS来实现。当然由于纯css没法监听滑动和点击等一些事件切换（滑动切换和点击切换按钮切换），这些只能通过js实现。不过可以做悬停暂停播放。来源我也不多说废话了，咱直接上代码。
...全文
332
评分
回复
Shopify二次开发模版定制
郑工 2023-03-31
如何注册Shopify商店
Shopify 是一个流行的电子商务平台，旨在帮助用户创建、运营和增长自己的在线商店。通过 Shopify，用户可以轻松地创建一个美观、易于使用的在线商店，展示和销售自己的商品或服务，并管理订单、运输、支付和营销活动等业务。
...全文
337
评分
回复
郑工 2023-03-31
加精
Shopify纯CSS和Liquid实现响应式无缝跑马灯
下面将分为通过 纯CSS和HTML实现无缝跑马灯 和 使用 Liquid 和 CSS 实现响应式跑马灯 两个步骤来实现这一功能。由于每个字符的宽度都不是固定的，所以文案宽度会存在一定的误差（误差大小取决于你怎么取文案平均值）。
...全文
362
评分
回复
Shopify二次开发模版定制
Shopify 社区

3

社区成员

21

社区内容

发帖
与我相关
我的任务
社区描述
本社区专门为Shopify而建立，用分享讨好Shopify相关经验与技术以及发布和寻找开发需求。欢迎各位伙伴加入，一起建设社区。
教育电商 个人社区 广东省·深圳市
社区管理员
  • Shopify 专家
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

本社区专门为Shopify商家、开发者、合作者而建立，主要功能如下

1、分享和探讨Shopify经验与技术

2、Shopify商家可在本社区发布需求

3、Shopify开发者和合作者可在本社区寻找需求

👏 欢迎大家为加入社区、一起共同建设国内Shopify社区，一起搬砖