Shopify 专家-CSDN博客

原创 Shopify模版定制：Shopify 纯CSS + Liquid 实现幻灯片功能（二）之水平轮播

使用纯CSS解决各种问题，不仅能简化代码、还能优化网站加载和减少阻塞等，更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例，详细讲解如何使用纯css + liquid 实现幻灯片功能（slide的内容可以替换成任何你想要的内容）。上篇文章为大家讲解了如何实现垂直轮播，本篇将基于上篇扩展水平轮播，同样也是纯CSS来实现，下篇将为大家提供经典的照片墙跑马灯。当然由于纯css没法监听滑动和点击等一些事件切换（滑动切换和点击切换按钮切换），这些只能通过js实现。代码里面都详细写了每段代码的作用。

2023-04-05 13:20:44 1390 1

原创 Shopify模版定制: 纯CSS + Liquid 实现幻灯片功能（一）之上下轮播

使用纯CSS解决各种问题，不仅能简化代码、还能优化网站加载和阻塞等，更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例，详细讲解如何使用纯css + liquid 实现幻灯片功能（slide的内容可以替换成任何你想要的内容）。下篇文章将会还会为大家提供左右轮播的效果，后面还会写基于该功能写一个照片墙跑马灯滚动，同样也是纯CSS来实现。当然由于纯css没法监听滑动和点击等一些事件切换（滑动切换和点击切换按钮切换），这些只能通过js实现。不过可以做悬停暂停播放。来源我也不多说废话了，咱直接上代码。

2023-04-05 03:39:11 678

原创 Shopify模版定制: 纯CSS和Liquid实现响应式无缝跑马灯

下面将分为通过纯CSS和HTML实现无缝跑马灯和使用 Liquid 和 CSS 实现响应式跑马灯两个步骤来实现这一功能。由于每个字符的宽度都不是固定的，所以文案宽度会存在一定的误差（误差大小取决于你怎么取文案平均值）。

2023-03-30 00:11:28 741

原创如何注册Shopify商店

Shopify 是一个流行的电子商务平台，旨在帮助用户创建、运营和增长自己的在线商店。通过 Shopify，用户可以轻松地创建一个美观、易于使用的在线商店，展示和销售自己的商品或服务，并管理订单、运输、支付和营销活动等业务。

2023-03-29 19:17:21 534

原创 Shopify Font 的用法

Shopify font 灵活用法

2023-02-09 18:03:45 225

原创 Typescript 封装 Cookie 基本事件

Typescript Cookie 基本事件增删改查

2022-12-30 18:26:11 431

原创 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 1174

原创 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 834 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 768

翻译 Shopify 如何为您的客户打造最佳 404 页面

Shopify 如何为您的客户打造最佳 404 页面无论是无辜的用户错误还是网站上的链接断开，客户商店的访问者偶尔会不可避免地进入 404 错误页面。虽然看到 404 页面可能不是预期的操作，但这并不意味着最终结果需要让访问者感到沮丧。这些页面也可以是通过品牌信息提供支持的机会，一些最好的 404 错误页面将幽默与良好的用户体验相结合，以创造令人难忘的体验。网站开发人员在为客户创建自定义主题时应注意这一点，包括用户友好、适当且设计良好的 404 错误页面对于减少客户工作量很重要。通过将清晰的号召性用

2021-10-14 16:03:10 941

原创 Shopify 如何使用动态结账按钮提高转化率

Shopify 如何使用动态结账按钮提高转化率了解买家放弃在线商店购买的原因是了解开发人员和设计师如何改进自定义主题并提高客户转化率的关键。根据Baymard Institute 的数据，26% 的美国在线购物者在上个季度放弃了订单，仅仅是因为*“结账流程太长/太复杂”*。商店购物车和结帐页面上的用户体验对于确定销售是否完成至关重要。如果主题开发人员和设计人员可以消除这些页面的复杂性并引入熟悉度，买家会感到更放心，这应该会降低客户的购物车放弃率。Shopify 的动态结账按钮可促进结账体验，该体验专为

2021-10-14 15:27:55 1042

原创 Shopify 主题中自动播放视频的底线——以及如何更好地使用视频

音频和视频可以成为吸引客户、讲述您的故事甚至提高转化率的有力方式，但开发浏览器的公司最近的趋势使得在您的Shopify 主题中使用视频和音频变得更加困难- 特别是如果您需要它自动播放。几乎所有主要浏览器——Chrome、Firefox、Edge 和 Safari——至少对视频有一些限制，尤其是带音频的视频，这会阻止它自动播放，而且这些限制在平板电脑和智能手机上变得更加严格。TL;DR：底线自动播放视频或音频的底线是，您不应再依赖它的工作——无论您使用何种设备或多媒体文件的格式。浏览器几乎所有流行.

2021-10-13 19:06:57 995

原创 Javascript 滚动条插件 BetterScroll 2.0 Script加载精简版只带滚动条和鼠标滚动功能

简介需求我需要一个自制一个滚动条组件来替代浏览器默认的滚动条，BetterScroll 2.0 是一个非常棒的的一个滚动插件，它能解决我的这个问题。问题虽然 BetterScroll 2.0 能解决我的问题，但由于我是需要使用 Script 加载的方式引入到我的网站，而官方只提供了提供了具备所有插件能力(106KB) 和基础功能(38.32KB) ，只使用基础功能并不能解决我上面的问题，但使用全功能的又太浪费资源。因此我需要按需引入 MouseWheel 和 ScrollBor正文下载文

2021-10-12 17:27:00 361 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 3697 3

原创 Shopify 开发备忘录

摘要记录 Shopify 开发过程中常用代码和容易忘记的代码计算产品优惠计算优惠（money）{% assign price = product.price_min %}{% assign compareAtPrice = product.compare_at_price %}<!-- 写法: 原价

2021-08-17 16:56:14 403 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 548

原创店匠 TikTok Pixel 设置方法

安装 TikTok Pixel 代码1、在 TikTok 广告管理平台找到 Pixel 代码路径：资产/网站Piexl/选择pixel/安装pixel代码/手动安装/复制 pixel 代码2、将 Pixel 代码添加到店匠路径：应用市场/数据跟踪代码嵌入/新增代码/填写数据/保存填写完成后保存即可，到此，店匠部分的设置已经完成，接下来是到 TikTok 广告管理平台定义事件规则定义事件规则我们先打开定义事件规则界面，可以通过下面截图打开1、商品详情页浏览网页浏览事件 > 页面

2021-08-05 14:52:01 3324

原创 shopify 与国内第三方建站服务平台的比较（店匠、shopline、shopyy、ueeshop）

shopify 与国内第三方建站服务平台的比较（店匠、shopline、shopyy、ueeshop）摘要本人提供 shopify 和店匠主题模版开发服务，有需要的可以与我联系微信 abc939039210随着跨境电商的发展，市场上也出现各式各样的第三方建站服务，国外的有 shopify、Bigcommerce、WooCommerce等，国内有店匠、shopline、shopyy、ueeshop 等，目前来说，国内的建站服务还处于萌芽状态各方面远不如国外的建站服务，这是毋庸置疑的，但国内建站服

2021-02-20 11:51:36 9715

原创 shopify 二次开发添加优惠弹框（折扣码弹框）

shopify 二次开发添加优惠弹框（折扣码弹框）摘要本文主要教shopify商家如何给自己的商店添加优惠弹框，所以本文我直接提供代码，不讲解代码上的知识点（有些主题是带有优惠弹框的，你可以先检查一下自己的主题是否带有优惠弹框功能，如果没有再通过本文添加）。如果你需要一些特别的功能或者修改样式等你也可以与我联系优惠弹框弹框效果图可编辑功能添加代码步骤一：打开编辑代码步骤二：在 sections 目录下新建 coupon-dialog.liquid 文件步骤三：写入 cou

2021-02-19 14:01:48 2788 8

原创 Lazysizes.js 图片懒加载的使用方法详解

Lazysizes.js 图片懒加载的使用方法详解摘要官方介绍： **lazysizes **是一种快速（无垃圾），对SEO友好且可自动初始化的lazyloader，用于图像（包括响应图像picture/ srcset），iframe，脚本/小部件等。它还通过区分关键视图元素和近视图元素来优先分配资源，以使感知性能更快。它也可能成为您集成响应式图像的第一工具。它可以自动计算sizes响应图像的属性，它允许您media与CSS共享对属性的媒体查询，从而帮助将布局（CSS）与内容/结构（HTM

2020-11-25 14:32:15 4205 2

原创 shopify 创建永久免费商店

shopify 创建永久免费商店本人兼职 shopify 前端开发，如有需要可以加我微信 abc939039210摘要注意：本文所说的 shopify开发商店，除了不能做真实交易之外，其他功能与shopify收费商店无异。适合用于开发主题、测试主题、开发应用和测试应用根据 shopify 最近的更新，目前开发商店的商店密码已无法移除创建步骤步骤一：创建shopify合作伙伴账号访问 https://partners.shopify.com/signup 进行注册即可步骤二：验证业务邮箱

2020-11-10 19:03:29 1383

原创 Shopify 二次开发图片CDN参数详细讲解

Shopify 前端开发图片尺寸参数讲解摘要对于刚入手shopify 的小白来说，shopify 图片是一个急需了解的点。对于大企业来说资源管理是必须优化到极致的，目前对于资源管理比较有效的方式是 CDN 资源管理。shopify 自然也会为它的资源搭建CDN服务，而对图片则做图片CDN，图片CDN与传统CDN的区别在于，它是专门为图片做优化的，通常包含缩放、格式转换等。你可以把它看成是一个API，通过传入尺寸、质量、格式等参数，获取到对应的图片内容。这也使得我们在使用上非常方便，适用于多种不同的场

2020-11-10 14:31:25 2522 4

原创 Shopify 前端开发占位符(占位图片)的使用

Shopify 占位符的使用本人兼职shopify 开发工作，如有需要可以加我微信 abc939039210，备注 shopify开发咨询摘要这编内容很简单，基本我们只需要知道怎么调用就行了在 shopify 主题中我们经常会看到一些占位的图片，如下图，下面的图形分为两种，一种是图一由shopify 提供的占位符(SVG格式)，另一种是图二由placeholder提供的可自定义尺寸的图片(jpg格式)。个人比较推荐使用第二种方式，因为这样可以比较直观的知道要上传的图片格式使用Shopif

2020-11-09 18:37:19 1525

原创 shopify 二次开发如何开发超级菜单(超级导航)

shopify 如何开发超级菜单超级导航摘要随着互联网的发展，网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了图片 + 文本的展现形式，甚至是图片 + 文本 + 视频的展现形象。效果图如下，其实像这种效果有一个专业属于叫超级菜单只不过是很少人知道而已，所以一般人说超级菜单也很少人能清楚的知道是说什么像这种效果上面效果我们又应该如何在shopify实现他们呢？讲解以最后一张效果图为例注：我的写法比较注重

2020-11-09 16:41:02 3456 1

原创 shopify 二次开发如何开发一个可以自定义下拉菜单内容的导航

shopify 如何开发一个可以自定义下拉菜单内容的导航摘要随着互联网的发展，网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了图片 + 文本的展现形式，甚至是图片 + 文本 + 视频的展现形象。效果图如下，其实像这种效果有一个专业属于叫超级菜单只不过是很少人知道而已，所以一般人说超级菜单也很少人能清楚的知道是说什么像这种效果上面效果我们又应该如何在shopify实现他们呢？讲解以最后一张效果图为例注：我

2020-11-09 16:39:39 3069

原创 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 22679 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 660 2

原创 shopify 二次开发如何创建定制产品，如何让用户写入定制内容

什么是定制产品定制产品，顾名思义，就是客户定制具有自己特色的产品。例如，定制记事本 —— 客户可以给商家提供图片和文字，让商家在记事本封面打印上自己的图片和文字。按照上例，则商家需要得到用户定制得内容（图片或文字，即：文件或文本），那我们要怎么拿到客户提供得文件或文本呢，这是我说要讲的内容一、shopify 购物车的 properties 属性通过查看官方文档或 Ajax cart，我们可以得知 properties 是一个对象，这个对象是用来存放客户添加的自定义信息（官方描述：收集产品的自定义信息

2020-07-06 15:50:13 5222 10

Javascript 滚动条插件 BetterScroll 2.0 CDN 精简版 只带滚动条和鼠标滚动功能.zip

使用shopify合作伙伴创建永久账号方法.docx

空空如也

Javascript 滚动条插件 BetterScroll 2.0 CDN 精简版只带滚动条和鼠标滚动功能.zip