![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
shopify
文章平均质量分 71
Shopify 专家
这个作者很懒,什么都没留下…
展开
-
Shopify模版定制:Shopify 纯CSS + Liquid 实现幻灯片功能(二) 之水平轮播
使用纯CSS解决各种问题,不仅能简化代码、还能优化网站加载和减少阻塞等,更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例,详细讲解如何使用纯css + liquid 实现幻灯片功能(slide的内容可以替换成任何你想要的内容)。上篇文章为大家讲解了如何实现垂直轮播,本篇将基于上篇扩展水平轮播,同样也是纯CSS来实现,下篇将为大家提供经典的照片墙跑马灯。当然由于纯css没法监听滑动和点击等一些事件切换(滑动切换和点击切换按钮切换),这些只能通过js实现。代码里面都详细写了每段代码的作用。原创 2023-04-05 13:20:44 · 1724 阅读 · 1 评论 -
Shopify模版定制: 纯CSS + Liquid 实现幻灯片功能(一) 之上下轮播
使用纯CSS解决各种问题,不仅能简化代码、还能优化网站加载和阻塞等,更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例,详细讲解如何使用纯css + liquid 实现幻灯片功能(slide的内容可以替换成任何你想要的内容)。下篇文章将会还会为大家提供左右轮播的效果,后面还会写基于该功能写一个照片墙跑马灯滚动,同样也是纯CSS来实现。当然由于纯css没法监听滑动和点击等一些事件切换(滑动切换和点击切换按钮切换),这些只能通过js实现。不过可以做悬停暂停播放。来源我也不多说废话了,咱直接上代码。原创 2023-04-05 03:39:11 · 868 阅读 · 0 评论 -
如何注册Shopify商店
Shopify 是一个流行的电子商务平台,旨在帮助用户创建、运营和增长自己的在线商店。通过 Shopify,用户可以轻松地创建一个美观、易于使用的在线商店,展示和销售自己的商品或服务,并管理订单、运输、支付和营销活动等业务。原创 2023-03-29 19:17:21 · 788 阅读 · 0 评论 -
Shopify Font 的用法
Shopify font 灵活用法原创 2023-02-09 18:03:45 · 291 阅读 · 0 评论 -
如何正确使用Shopify的font_picker设置
如何使用Shopify的新font_picker设置本人兼职 Shopify 前端开发,如有需要可以加v abc939039210对于刚入行或者没有研究过字体的同学,可能会对 font_picker 的使用存在误解(会误以为只要在settings设置好font_picker,然后通过font-family直接调用就可以)。本文主要告诉的如何正确使用 Shopify 的 font_picker设置font_pickerfont_picker设置通过生成动态选择界面取代了嵌入式选项,并允许您从Sho原创 2021-10-15 12:21:30 · 839 阅读 · 0 评论 -
Shopify 如何为您的客户打造最佳 404 页面
Shopify 如何为您的客户打造最佳 404 页面无论是无辜的用户错误还是网站上的链接断开,客户商店的访问者偶尔会不可避免地进入 404 错误页面。虽然看到 404 页面可能不是预期的操作,但这并不意味着最终结果需要让访问者感到沮丧。这些页面也可以是通过品牌信息提供支持的机会,一些最好的 404 错误页面将幽默与良好的用户体验相结合,以创造令人难忘的体验。网站开发人员在为客户创建自定义主题时应注意这一点,包括用户友好、适当且设计良好的 404 错误页面对于减少客户工作量很重要。通过将清晰的号召性用翻译 2021-10-14 16:03:10 · 1052 阅读 · 0 评论 -
Shopify 如何使用动态结账按钮提高转化率
Shopify 如何使用动态结账按钮提高转化率了解买家放弃在线商店购买的原因是了解开发人员和设计师如何改进自定义主题并提高客户转化率的关键。根据Baymard Institute 的数据,26% 的美国在线购物者在上个季度放弃了订单,仅仅是因为*“结账流程太长/太复杂”*。商店购物车和结帐页面上的用户体验对于确定销售是否完成至关重要。如果主题开发人员和设计人员可以消除这些页面的复杂性并引入熟悉度,买家会感到更放心,这应该会降低客户的购物车放弃率。Shopify 的动态结账按钮可促进结账体验,该体验专为原创 2021-10-14 15:27:55 · 1110 阅读 · 0 评论 -
shopify buy it now 立即购买 相关问题
如何创建 buy it nowbuy it now 问题buy it now 表单使用问题1、disabled 禁用表单项依旧会上传该值问题我们都知道提交 form 表单的时候,会将表单下的带有 name 属性(或者值为空)且没有设置 disabled 的项进行提交。也就我们不想提交某一项时只要去除掉 name 属性、或者设置 disabled 为 true 即可。Shopify 的 添加到购物车表单便可以这样操作,当然如果你的主题是使用ajax且手动获取表单项,那就另当别论。但我在使用 buy原创 2021-08-06 16:55:18 · 612 阅读 · 0 评论 -
shopify 与国内第三方建站服务平台的比较(店匠、shopline、shopyy、ueeshop)
shopify 与国内第三方建站服务平台的比较(店匠、shopline、shopyy、ueeshop)摘要本人提供 shopify 和 店匠 主题模版开发服务,有需要的可以与我联系 微信 abc939039210随着跨境电商的发展,市场上也出现各式各样的第三方建站服务,国外的有 shopify、Bigcommerce、WooCommerce等,国内有 店匠、shopline、shopyy、ueeshop 等,目前来说,国内的建站服务还处于萌芽状态各方面远不如国外的建站服务,这是毋庸置疑的,但国内建站服原创 2021-02-20 11:51:36 · 10140 阅读 · 0 评论 -
shopify 二次开发 添加优惠弹框(折扣码弹框)
shopify 二次开发 添加优惠弹框(折扣码弹框)摘要本文主要教shopify商家如何给自己的商店添加优惠弹框,所以本文我直接提供代码,不讲解代码上的知识点(有些主题是带有优惠弹框的,你可以先检查一下自己的主题是否带有优惠弹框功能,如果没有再通过本文添加)。如果你需要一些 特别的功能或者修改样式等 你也可以与我联系优惠弹框弹框效果图可编辑功能添加代码步骤一:打开编辑代码步骤二:在 sections 目录下新建 coupon-dialog.liquid 文件步骤三:写入 cou原创 2021-02-19 14:01:48 · 3022 阅读 · 9 评论 -
Lazysizes.js 图片懒加载的使用方法详解
Lazysizes.js 图片懒加载的使用方法详解摘要官方介绍: **lazysizes **是一种快速(无垃圾),对SEO友好且可自动初始化的lazyloader,用于图像(包括响应图像picture/ srcset),iframe,脚本/小部件等。它还通过区分关键视图元素和近视图元素来优先分配资源,以使感知性能更快。 它也可能成为您集成响应式图像的第一工具。它可以自动计算sizes响应图像的属性,它允许您media与CSS共享对属性的媒体查询,从而帮助将布局(CSS)与内容/结构(HTM原创 2020-11-25 14:32:15 · 4608 阅读 · 2 评论 -
shopify 创建永久免费商店
shopify 创建永久免费商店本人兼职 shopify 前端开发,如有需要可以加我微信 abc939039210摘要注意:本文所说的 shopify开发商店,除了不能做真实交易之外,其他功能与shopify收费商店无异。适合用于开发主题、测试主题、开发应用和测试应用根据 shopify 最近的更新,目前开发商店的商店密码已无法移除创建步骤步骤一:创建shopify合作伙伴账号访问 https://partners.shopify.com/signup 进行注册即可步骤二:验证业务邮箱原创 2020-11-10 19:03:29 · 1461 阅读 · 0 评论 -
Shopify 二次开发 图片CDN参数详细讲解
Shopify 前端开发 图片尺寸参数讲解摘要对于刚入手shopify 的小白来说,shopify 图片是一个急需了解的点。对于大企业来说资源管理是必须优化到极致的,目前对于资源管理比较有效的方式是 CDN 资源管理。shopify 自然也会为它的资源搭建CDN服务,而对图片则做图片CDN,图片CDN与传统CDN的区别在于,它是专门为图片做优化的,通常包含缩放、格式转换等。你可以把它看成是一个API,通过传入尺寸、质量、格式等参数,获取到对应的图片内容。这也使得我们在使用上非常方便,适用于多种不同的场原创 2020-11-10 14:31:25 · 2708 阅读 · 4 评论 -
Shopify 前端开发 占位符(占位图片)的使用
Shopify 占位符的使用本人兼职shopify 开发工作,如有需要可以加我微信 abc939039210,备注 shopify开发咨询摘要这编内容很简单,基本我们只需要知道怎么调用就行了在 shopify 主题中我们 经常会看到 一些占位的图片,如下图,下面的图形分为两种,一种是图一由shopify 提供的占位符(SVG格式),另一种是图二由placeholder提供的可自定义尺寸的图片(jpg格式)。个人比较推荐使用第二种方式,因为这样可以比较直观的知道要上传的图片格式使用Shopif原创 2020-11-09 18:37:19 · 1651 阅读 · 0 评论 -
shopify 二次开发 如何开发超级菜单(超级导航)
shopify 如何开发超级菜单 超级导航摘要随着互联网的发展,网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了 图片 + 文本 的展现形式,甚至是 图片 + 文本 + 视频的展现形象。效果图如下,其实像这种效果 有一个 专业属于叫 超级菜单只不过是很少人知道而已,所以一般人说超级菜单也很少人能清楚的知道是说什么像这种效果上面效果我们又应该如何在shopify实现他们呢?讲解以最后一张效果图为例注:我的写法比较注重原创 2020-11-09 16:41:02 · 3698 阅读 · 1 评论 -
shopify 二次开发 如何开发一个可以自定义下拉菜单内容的导航
shopify 如何开发一个可以自定义下拉菜单内容的导航摘要随着互联网的发展,网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了 图片 + 文本 的展现形式,甚至是 图片 + 文本 + 视频的展现形象。效果图如下,其实像这种效果 有一个 专业属于叫 超级菜单只不过是很少人知道而已,所以一般人说超级菜单也很少人能清楚的知道是说什么像这种效果上面效果我们又应该如何在shopify实现他们呢?讲解以最后一张效果图为例注:我原创 2020-11-09 16:39:39 · 3230 阅读 · 0 评论 -
shopify 二次开发 如何创建定制产品,如何让用户写入定制内容
什么是定制产品定制产品,顾名思义,就是客户定制具有自己特色的产品。例如,定制记事本 —— 客户可以给商家提供图片和文字,让商家在记事本封面打印上自己的图片和文字。按照上例,则商家需要得到用户定制得内容(图片或文字,即:文件或文本),那我们要怎么拿到客户提供得文件或文本呢,这是我说要讲的内容一、shopify 购物车的 properties 属性通过查看官方文档 或 Ajax cart,我们可以得知 properties 是一个对象,这个对象是用来存放客户添加的自定义信息(官方描述:收集产品的自定义信息原创 2020-07-06 15:50:13 · 5465 阅读 · 10 评论 -
Shopify 配置本地开发教程二,常用命令和 liquid 语言引起的异常问题处理
摘要本篇是续 Shopify 配置本地开发教程 的知识扩展,主要讲 theme 命令的使用,及由于本地编辑器无法识别 liquid 语言而造成的异常问题的处理,如 scss 无法识别liquid语言而报错从而导致代码建议失效问题,html、js 如何与 liquid 共存问题。总而言之,就是解决本地开发无法识别liquid语言的问题一、theme get命令的使用theme官网 也有为我...原创 2020-04-13 01:08:41 · 3016 阅读 · 13 评论 -
shopify开发 引用第三方插件和静态部分添加块
摘要本篇主要讲如何引入第三方插件和动态添加部分,这里我引入的第三方插件是 swiper,一款很不错的幻灯片插件,非常强大。我用它来实现以下效果图片一、引入 swiper 插件1、下载 swiper 插件下载swiper2、将 swiper.min.js 和 swiper.min.css 导入到shopify 的 assets 资源目录下swiper.min.js和swiper.min...原创 2020-04-02 22:34:28 · 4296 阅读 · 7 评论 -
shopify二次开发 产品详情页面的开发二 (信息展示区一[数据获取])
摘要上篇讲了关于图片展示区域,这次讲信息区域的开发,主要讲如何获取到标题价格等信息。因为信息区域涉及的东西较多,所以这次分为多篇文章。附:最近制定一个计划,打算每周写三篇以上原创文章,主要写shopify的开发和前端的一些文章。希望大家能够给关注或者赞一、创建...原创 2020-03-30 20:19:43 · 3888 阅读 · 5 评论 -
shopify二次开发 产品详情页面的开发二 (图片展示区)
摘要图片展示这块,我采用的 swiper 插件 的 基础示例300,在他的基础上进行修改swiper 使用方法 基础示例300如果有不知道怎么引入 swiper 插件 的同学,可以在下方留言一、引入基础实例3001、为了方法我们编辑代码,我们可以把图片展示模块独立出来。新建 snippets 页面 /snippets /boderry-product-images.liquid,并在对...原创 2020-03-28 17:11:21 · 7584 阅读 · 31 评论 -
shopify二次开发 产品详情页面的开发一(结构布局)
摘要在 使用 shopify 的一些主题过程中,总有不如意的地方,所以就需要我们程序员敲敲代码了,本篇讲的是shopify 产品详情页的开发 之 结构布局,建议同行们在本地开发,本地开发shopify部署可以看 Shopify 配置本地开发教程 最详细详解一、结构布局说明二、创建 产品详情页 section1、在 section 文件夹 下面创建自己的 产品详情页的section,如 b...原创 2020-03-27 14:39:22 · 7453 阅读 · 1 评论 -
Shopify 二次开发 配置本地开发教程 最详细详解
摘要身为 shopify 网站管理者与开发者 时常需要根据需求去编辑代码,进行少量的代码编辑在页面上编辑还好,但是需要编辑大量的代码则是非常不方便的,因此需要我们将代码同步到本地,并在本地编辑可以自动同步到shopify服务器上第一步、搭建 shopify 本地开发所需要的环境1、安装 chocolatey chocolatey 安装 根据 chocolatey 官网安装即可,非常简单有...原创 2020-03-22 00:42:26 · 11335 阅读 · 37 评论