- 博客(38)
- 资源 (2)
- 收藏
- 关注
原创 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
原创 Shopify模版定制: 纯CSS和Liquid实现响应式无缝跑马灯
下面将分为通过 纯CSS和HTML实现无缝跑马灯 和 使用 Liquid 和 CSS 实现响应式跑马灯 两个步骤来实现这一功能。由于每个字符的宽度都不是固定的,所以文案宽度会存在一定的误差(误差大小取决于你怎么取文案平均值)。
2023-03-30 00:11:28
899
原创 如何注册Shopify商店
Shopify 是一个流行的电子商务平台,旨在帮助用户创建、运营和增长自己的在线商店。通过 Shopify,用户可以轻松地创建一个美观、易于使用的在线商店,展示和销售自己的商品或服务,并管理订单、运输、支付和营销活动等业务。
2023-03-29 19:17:21
788
原创 Typescript Class 类的使用详解
Typescript Class 类简单示例class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; }}访问类型public 公共的,默认的。允许类的内外部调用**prevate ** 私有的。允许类的内部
2021-11-18 18:42:21
1207
原创 SASS/SCSS 常用方法
SCSS 常用知识点官方文案CSS 功能拓展1、嵌套规则Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:#main p { color: #00ff00; .redbox { color: #000000; }}编译为#main p { color: #00ff00; } #main p .redbox { color: #000000; }2、父选择器 &在嵌套 CSS 规则时,有时也需
2021-10-15 18:03:27
882
1
原创 如何正确使用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
翻译 Shopify 如何为您的客户打造最佳 404 页面
Shopify 如何为您的客户打造最佳 404 页面无论是无辜的用户错误还是网站上的链接断开,客户商店的访问者偶尔会不可避免地进入 404 错误页面。虽然看到 404 页面可能不是预期的操作,但这并不意味着最终结果需要让访问者感到沮丧。这些页面也可以是通过品牌信息提供支持的机会,一些最好的 404 错误页面将幽默与良好的用户体验相结合,以创造令人难忘的体验。网站开发人员在为客户创建自定义主题时应注意这一点,包括用户友好、适当且设计良好的 404 错误页面对于减少客户工作量很重要。通过将清晰的号召性用
2021-10-14 16:03:10
1052
原创 Shopify 如何使用动态结账按钮提高转化率
Shopify 如何使用动态结账按钮提高转化率了解买家放弃在线商店购买的原因是了解开发人员和设计师如何改进自定义主题并提高客户转化率的关键。根据Baymard Institute 的数据,26% 的美国在线购物者在上个季度放弃了订单,仅仅是因为*“结账流程太长/太复杂”*。商店购物车和结帐页面上的用户体验对于确定销售是否完成至关重要。如果主题开发人员和设计人员可以消除这些页面的复杂性并引入熟悉度,买家会感到更放心,这应该会降低客户的购物车放弃率。Shopify 的动态结账按钮可促进结账体验,该体验专为
2021-10-14 15:27:55
1110
原创 Shopify 主题中自动播放视频的底线——以及如何更好地使用视频
音频和视频可以成为吸引客户、讲述您的故事甚至提高转化率的有力方式,但开发浏览器的公司最近的趋势使得在您的Shopify 主题中使用视频和音频变得更加困难- 特别是如果您需要它自动播放。几乎所有主要浏览器——Chrome、Firefox、Edge 和 Safari——至少对视频有一些限制,尤其是带音频的视频,这会阻止它自动播放,而且这些限制在平板电脑和智能手机上变得更加严格。TL;DR:底线自动播放视频或音频的底线是,您不应再依赖它的工作——无论您使用何种设备或多媒体文件的格式。浏览器几乎所有流行.
2021-10-13 19:06:57
1121
原创 Javascript 滚动条插件 BetterScroll 2.0 Script加载 精简版 只带滚动条和鼠标滚动功能
简介需求我需要一个自制一个滚动条组件来替代浏览器默认的滚动条,BetterScroll 2.0 是一个非常棒的的一个滚动插件 ,它能解决我的这个问题。问题虽然 BetterScroll 2.0 能解决我的问题,但由于我是需要使用 Script 加载 的方式引入到我的网站,而官方只提供了提供了 具备所有插件能力(106KB) 和 基础功能(38.32KB) ,只使用基础功能并不能解决我上面的问题,但使用全功能的又太浪费资源。因此我需要按需引入 MouseWheel 和 ScrollBor正文下载文
2021-10-12 17:27:00
390
1
原创 Javascript 将 jpeg、png转换为webp
Javascript 将 jpeg、png 转换为 webp目的:减少上传图片的大小不多解释,直接上代码/** * 根据 jpeg、png File 文件对象,获取 webp 格式的 File 文件对象 * @param {File} imageFile jpeg、png图片文件对象 * @returns image/webp File */const getWebpFileByImageFile = imageFile => { const base64ToFile = (bas
2021-09-28 14:31:20
4203
3
原创 Shopify 开发 备忘录
摘要记录 Shopify 开发过程中常用代码和容易忘记的代码计算产品优惠计算优惠(money)<!-- 假设: 原价(compareAtPrice)为 100, 售价(price)为: 80, 着折扣为 20 --><!-- 补充代码:获取原价和售价 -->{% assign price = product.price_min %}{% assign compareAtPrice = product.compare_at_price %}<!-- 写法: 原价
2021-08-17 16:56:14
458
2
原创 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
原创 店匠 TikTok Pixel 设置方法
安装 TikTok Pixel 代码1、在 TikTok 广告管理平台 找到 Pixel 代码路径:资产/网站Piexl/选择pixel/安装pixel代码/手动安装/复制 pixel 代码2、将 Pixel 代码添加到店匠路径:应用市场/数据跟踪代码嵌入/新增代码/填写数据/保存填写完成后保存即可,到此,店匠部分的设置已经完成,接下来是到 TikTok 广告管理平台 定义事件规则定义事件规则我们先打开定义事件规则界面,可以通过下面截图打开1、商品详情页浏览网页浏览事件 > 页面
2021-08-05 14:52:01
3537
原创 shopify 与国内第三方建站服务平台的比较(店匠、shopline、shopyy、ueeshop)
shopify 与国内第三方建站服务平台的比较(店匠、shopline、shopyy、ueeshop)摘要本人提供 shopify 和 店匠 主题模版开发服务,有需要的可以与我联系 微信 abc939039210随着跨境电商的发展,市场上也出现各式各样的第三方建站服务,国外的有 shopify、Bigcommerce、WooCommerce等,国内有 店匠、shopline、shopyy、ueeshop 等,目前来说,国内的建站服务还处于萌芽状态各方面远不如国外的建站服务,这是毋庸置疑的,但国内建站服
2021-02-20 11:51:36
10140
原创 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
原创 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
原创 shopify 二次开发 如何开发超级菜单(超级导航)
shopify 如何开发超级菜单 超级导航摘要随着互联网的发展,网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了 图片 + 文本 的展现形式,甚至是 图片 + 文本 + 视频的展现形象。效果图如下,其实像这种效果 有一个 专业属于叫 超级菜单只不过是很少人知道而已,所以一般人说超级菜单也很少人能清楚的知道是说什么像这种效果上面效果我们又应该如何在shopify实现他们呢?讲解以最后一张效果图为例注:我的写法比较注重
2020-11-09 16:41:02
3698
1
原创 shopify 二次开发 如何开发一个可以自定义下拉菜单内容的导航
shopify 如何开发一个可以自定义下拉菜单内容的导航摘要随着互联网的发展,网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了 图片 + 文本 的展现形式,甚至是 图片 + 文本 + 视频的展现形象。效果图如下,其实像这种效果 有一个 专业属于叫 超级菜单只不过是很少人知道而已,所以一般人说超级菜单也很少人能清楚的知道是说什么像这种效果上面效果我们又应该如何在shopify实现他们呢?讲解以最后一张效果图为例注:我
2020-11-09 16:39:39
3230
原创 Base64、Blob、File 三种类型的相互转换 最详细
摘要base64、blob、fileBase64、Blob、File 的APIBase64Base64 是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。BlobBlob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其
2020-08-18 17:43:58
27288
1
原创 以 formData为发送数据类型 进行 Ajax请求(含嵌套问题)
概要很多时候为了兼容性问题 和 上传文件问题,我们会选择 以 formData 为发送数据类型进行 ajax 异步请求。代码<form method="post" action="/cart/add" id="upload_form" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"> <input type="hidden" name="form_type" valu
2020-07-31 19:36:53
701
2
原创 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
原创 速卖通产品图片放大镜功能实现方法详解,附完整代码
速卖通产品图片放大镜功能速卖通图片放大镜效果实现方法详解,附完整代码效果图如下代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="...
2020-03-28 11:50:12
836
1
原创 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
原创 原生js 使用屏蔽按键完美实现 input 输入整数,可以此方案扩展其他控制
案例首先,我们讲一个很常见的购物测商品数量控制小案例。案例图片如下要求:1、商品数量为 1~999 (不允许为0)2、不允许输入其他字符实现方法:1、使用 maxlength 控制最大字符数为 3;2、使用 onkeydown 在用户按下按钮判断按钮是否符号要求,符号则写入,不符合则禁止写入3、使用 onfocusout 在用户离开输入框时判断是否合理,如果不合理则转换为合理的值...
2020-03-21 12:37:43
374
原创 Shopify 二次开发 添加自定义部分
Shopify 二次开发 添加自定义部分Shopify 二次开发 添加自定义部分sections在 Shopify 主题中创建静态的部分Shopify 二次开发 添加自定义部分sections最近跟朋友一起搞电商,需要做个自建站,游历了下虚拟世界,最终选择shopify,在使用的过程中发现国内对 Shopify 的二次开发共享很少,所以打算向大家分享下 shopify 的开发经历,初涉 sho...
2020-01-07 22:18:20
8910
2
Javascript 滚动条插件 BetterScroll 2.0 CDN 精简版 只带滚动条和鼠标滚动功能.zip
2021-10-12
使用shopify合作伙伴创建永久账号方法.docx
2020-08-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人