Shopify专题
🧑‍💻Shopify 开发者指南
00 分钟
2024-9-2
2025-3-6
type
status
date
slug
summary
tags
category
icon
password

概述

Shopify 是一个面向中小型企业的多渠道商务平台，帮助用户创建商店并通过线上的网店或社交媒体以及线下的 POS 机随时随地销售产品。Shopify 为 60 w商家提供服务，在高峰期每秒处理 8 万个请求。
为了更方便内部同学理解、使用和扩展Shopify功能，本文档面向开发团队、产品经理、技术支持人员，主要目标：
  • 提供开发者使用shopify平台的基本知识和技能。
  • 指导开发者如何集成第三方服务和开发自定义应用。

一、平台介绍

1. 基本组成

Shopify 现在是世界上最大最古老的 Rails 应用程序之一，由于押注 Rails 极大地影响了我们基于官方的开放能力，进行二次开发的习惯，所以这里主要还是以前端Web构建进行展开。

前端

前端与用户交互，展示产品、购物车和结账等页面都可以定制开发，并且支持两种方式构建界面，如下：
  • 模板方式开发
用户界面现在由 Shopify 提供的主题和 Liquid 模板语言构建，从前后端的视角看，并未前后分离，页面内容由Rdils 基于Liquid在服务端渲染输出，由于Liquid提供了非常丰富的上下文数据、以及高阶语法，简单的功能其实不需要额外JS脚本编写，这也对开发者增加新的学习成本，而非前端主流的React、Vue等MVVM框架开发习惯。
notion image
优势的地方：由于Shopify生态非常丰富，所以常用的功能或交互模块大部分都能在应用商店找到，并不完全自己开发。
  • Headless开发
在后台获得 Shopify 的所有功能，并完全控制前端。使用 Shopify 的官方无头框架 Hydrogen 开始快速构建，并进一步进行商店定制，获得更佳的开发体验和定制自定义。

后端

Shopify 提供强大的后端服务，包括数据库、订单管理、用户管理等。开发者通过 API 与后端交互。

多租户架构

Shopify 是一个多租户平台，多个商家共享官方的同一基础设施，但数据隔离。开发者需要理解如何在这种架构下构建高效应用，意味着我们可以在简单快速搭建出一个具有售卖、支付、物流、多语言等功能强大的独立站，并省掉额外从头搭建的成本。

2. Shopify API

API 类型
  • Storefront API：用于构建自定义前端，例如移动应用或独立网站。支持 GraphQL，允许灵活查询。https://shopify.dev/docs/api/storefront
  • Admin API：用于管理商店的后端操作，如产品、订单、客户等。支持 REST 和 GraphQL。
    • REST API，目前官方推荐使用GraphQL，新功能API优先在GraphQL支持。https://shopify.dev/docs/api/admin-rest
    • GraphQL API，可以自定义查询和聚合数据，减少了rest多接口获取的弊端，https://shopify.dev/docs/api/admin-graphql
  • Webhook：用于实时接收商店事件（如订单创建、库存更新等），可以结合自身业务场景实现自动化流程和更新数据。https://shopify.dev/docs/api/webhooks?reference=toml
API 认证
  • 介绍 OAuth 认证流程，确保安全访问 API。
API 使用注意事项：
  • 速率限制：API 请求有速率限制，开发时需考虑如何优化请求数量。
  • 数据格式：理解 JSON 格式，确保数据解析和处理。

3. 应用生态系统

Shopify 应用商店：
  • 提供了丰富的第三方应用，开发者可以利用这些应用扩展商店功能，如营销工具、物流服务等。
自定义应用开发：
  • 开发者可以创建自定义应用，满足特定业务需求。需要了解如何使用 Shopify CLI 和应用模板快速启动。
应用审核与发布：
  • 自定义应用需经过 Shopify 的审核流程，确保符合平台规范和安全要求。

二、设计风格&资源

遵循Shopify 的应用程序设计指南，可以完成出色的 Shopify 应用程序，以及了解官方对于UI/UX思考方式，优秀的应用是如何制作的。通过这些指南消除了猜测，更助力于构建可预测且易于使用的应用程序。
更加详情的设计指南参考：https://www.hrope.cn/article/shopify-design

三、技术栈

Shopify Liquid 模板语言

Liquid 是 Shopify 的模板语言，允许开发者动态生成 HTML 内容。它支持变量、循环、条件语句等基本编程结构。
主要分为三部分：

基本语法

  • 变量：使用 {{ variable_name }} 语法输出变量值。
  • 标签：使用 {% tag_name %} 语法执行逻辑，如循环和条件判断。

常用功能

  • 循环：遍历产品集合、订单等。
  • 条件判断：根据特定条件显示不同内容。
  • 过滤器：对输出的内容进行格式化，如日期格式、货币转换等。

自定义功能

  • 可以创建自定义的 Liquid 过滤器和标签，以扩展 Liquid 的能力。

Remix

基于的开源 React 框架构建，学习主要包括了Remix 处理路由、数据获取、服务器端渲染、UI 响应性和样式。
项目结构如下：

关键概念

名词
说明
备注
Nested routers(嵌套路由)
Remix 将 App URL 的嵌套逻辑映射到组件和数据加载的嵌套逻辑。这允许并行加载所有页面数据，从而减少总体加载时间。
https://remix.run/docs/en/main/discussion/routes
Loaders（加载器）
Remix 加载器是加载数据以便可以在服务器端渲染数据的函数，从而减少发送到客户端的 JavaScript 量。在 Hydrogen 中，加载程序从 Shopify API 和第三方来源获取数据。
https://remix.run/docs/en/main/discussion/data-flow#route-loader
Actions（行动）
Remix 操作是接受来自客户端的 Web 标准表单数据以更新状态、更改数据或触发副作用的函数。
https://remix.run/docs/en/main/discussion/data-flow#route-action
SSR（服务端渲染）
Remix 应用程序默认使用服务器端渲染 （SSR），其中它们的 React 组件在发送到浏览器之前被渲染为 HTML
https://remix.run/docs/en/main/discussion/server-vs-client
渐进式增强
由于 Remix 操作使用 HTML 表单等 Web 标准技术，因此它们通常无需 JavaScript 即可工作，但可以在客户端 JavaScript 可用时使用 JavaScript 进行增强。这与 SSR 优先的方法一起，意味着 Remix 应用程序通常会提供更小的包大小，但加载速度更快。
https://remix.run/docs/en/main/discussion/progressive-enhancement

GraphQL

GraphQL 已成为 Shopify 构建 API 的首选技术。如果惯使用 REST API，那么 GraphQL 起初可能会让人感到困惑。当开始使用 GraphQL 时，自身需要改变对检索和处理数据的看法，以下指南介绍 GraphQL 概念。
GraphQL 是一种查询语言和运行时系统。客户端使用 GraphQL 查询语言形成请求，GraphQL 服务器执行请求并在响应中返回数据。
与每个资源具有不同终端节点的 REST API 不同，GraphQL API 具有用于所有可用数据的单个终端节点。客户端为读取和写入操作指定所需的数据，而服务器仅使用该数据进行响应。
GraphQL 请求结构类似于 JSON。但是，GraphQL 请求不对字段名称使用引号，并且字段名称和值之间没有冒号分隔，响应采用 JSON 格式。
以下是 GraphQL 请求类型：
  • Queries（查询），检索数据的请求，类似REST中的GET请求
  • Mutations（更改），创建和修改数据的请求，类似REST中的PUT、POST、DELETE请求
以下是一个 GraphQL Mutations 的示例，展示如何创建和修改数据。我们将使用 Shopify 的产品管理作为例子。
创建产品的 Mutation 示例
更新产品的 Mutation 示例
删除产品的 Mutation 示例

四、上手学习

1.开发环境设置

工具和软件
  • 安装 Node.js 14.170+
  • 安装Node.js包管理器 npm、Yarn 或 pnpm
  • 安装 Ruby 3.0+
  • 安装 Git 2.28+
  • 代码编辑器：推荐使用 VS Code 或其他支持 Git 的编辑器。
  • 版本控制：使用 Git 进行版本管理，确保代码的可追踪性。
  • Shopify CLI：安装和使用命令行工具，创建和管理应用。
Shopify CLI 是一个命令行工具，帮助开发者创建和管理 Shopify 应用、主题和其他项目。以下是安装和使用 Shopify CLI 的详细步骤。
常用命令
  • 创建主题：
  • 上传主题：
  • 下载主题：
更多命令可查阅官方文档，Shopify CLI 官方文档

2.Shopify 账户

  • 创建 Shopify 开发者账户，获取 API 密钥和凭证。
  • 如果你还没有 Shopify 开发者账户，请访问 Shopify Partner 注册。

新建开发者商店

为了方便开发调试，需要我们在开发者账号创建测试使用的商店，可以在后台，找到「商店」-「添加商店」选项”，点击“创建开发商店”。
notion image
在命令行中，运行以下命令进行登录：
按照提示输入你的 Shopify 开发者账户凭证。

3. 开发自定义应用

  • 前端与后端：介绍如何设计应用的前端和后端架构。
  • 数据存储：选择合适的数据库（如 MongoDB、PostgreSQL）进行数据存储。
使用以下命令创建新的 Shopify 应用：
按照提示选择应用类型（如 Node.js 或 Ruby on Rails），并输入应用名称。
进入应用目录
创建完成后，进入应用目录：
运行以下命令启动开发服务器：
这将启动本地服务器并打开浏览器，访问你的应用。

管理应用

查看命令
运行以下命令查看可用的 Shopify CLI 命令：
更新应用
若需要更新应用，可以使用以下命令：
应用部署到 Shopify
使用以下命令将应用部署到 Shopify：

4. 部署与维护

4.1 部署流程
  • 选择平台：推荐使用 Heroku、Vercel 或 AWS 进行应用部署。
  • 持续集成：设置 CI/CD 流程，自动化构建和部署。
4.2 监控与日志
  • 监控工具：使用工具（如 New Relic、Sentry）监控应用性能。
  • 日志管理：记录和分析应用日志，以便于故障排查。

应用实战

基于Shopify Admin API、GraphQL、Remix、Prisma、Sqlite技术栈构建的轻量应用，获取Shopify应用商品信息、生成商品二维码，记录扫描次数等功能。
Shopify 商品二维码生成应用

五、性能优化

在 Shopify 上优化网站性能，提升加载速度和用户体验，提高加载速度有助于改善这些指标，例如：
  • 用户体验
  • SEO排名
  • 转化率
  • 自然流量
  • 页面浏览量
  • 收入
速度越快的网站赚到的钱越多。2018年，Google开始了移动端优先索引—他们开始根据移动端版本而不是桌面端，对网站进行排名。这使得移动端性能尤为重要。

Shopify页面速度影响因素

  • 服务器速度，Shopify服务器的速度很快，开发侧无法控制，所以不需要考虑这个问题。
  • 连接速度，因用户和国家而异。如果你的大部分流量来自于移动端，请确保你的网站在任何速度下都能很好地加载，以帮助这些客户。
  • 请求数，页面所需的文件。你的页面上的每个应用、图片和文件都需要从服务器上下载，这就造成了总的请求量（文件）。
  • 页面大小，页面的累计文件大小。从逻辑上讲，减少页面大小和服务器请求量会使你的网站加载速度更快。

速度优化和分析工具

  • 网页速度测试：https://www.webpagetest.org/
这是我们找到的用于测量加载速度，页面大小和请求数量的最准确的工具。提示：你可以选择不同的服务器速度来模拟不同的设备。
  • Chrome Dev Tools: https://developer.chrome.com/docs/devtools?hl=zh-cn
这对于web开发者来说是一个很好的工具。对于Shopify的优化，我们将使用控制台和网络功能。
  • PageSpeed Insights: https://pagespeed.web.dev/
可以从Google PSI中获得一些想法，但这并不是Shopify优化的好工具，因此我们不使用它.
  • Crush Pics: https://apps.shopify.com/crush-pics?locale=zh-CN
这是一款图片优化的必备应用。它可以自动压缩你的图片，让你的整个网站在不损失图片质量的情况下，自动压缩你的图片，让你的整个网站加载速度更快。
  • Tiny Png: https://tinypng.com/
由于访问限制，Shopify的图片优化应用无法100%压缩图片，所以你必须手动压缩一些图片。这时候，TinyPNG就发挥了它的优势。它是一款免费的网络应用，可以为任何媒体优化图片。

3. 网站加载速度优化

如果时间或预算有限，请先关注关键领域：
  • 图像优化
  • 延迟加载
  • 应用分析和优化
通过移动设备测试渠道，使用A / B测试来查看应用程序或设计对我们的帮助或伤害。

图片优化

很多网站图片很多而且很大，因此图像优化是提高网站速度的关键策略。
  • 压缩图片：使用工具（如 TinyPNG 或 ImageOptim）压缩图片，减少文件大小而不显著降低质量。
  • 使用适当格式：选择合适的图片格式，例如：
    • SVG: 通常是最好的图形文件，因为它们可以无限扩展而不损失分辨率。标志、图标和非图形图形通常可以作为SVG来使用。
    • JPEG：适合照片和复杂图像。
    • PNG：适合透明背景的图像。
    • WebP：现代格式，支持更高压缩率和质量。
      • 相同分辨率下，在照片图像上使用PNG代替JPG会把原文件大小增加2倍至10倍😧，要注意！
      可以在Chrome开发者工具的 “网络 “选项卡中扫描您的文件，或者点击Analyzer中的 “总大小”。根据文件大小进行排序，寻找带有”.png “文件扩展名的图像。如果是照片，请下载并转换为JPG，以节省大量的文件大小。
  • 懒加载：使用懒加载技术，只有在用户滚动到视口时才加载图片，减少初始加载时间。
延迟加载是一种性能优化技术，可在用户向下滚动页面时而不是在初始页面加载期间加载图像，通过执行延迟加载，我们通常会看到页面大小减少10％– 30％。
  • 图像尺寸调整：根据显示设备调整图片尺寸，避免加载过大的图片。
根据像素密度选择不同的图像。例如，在普通屏幕上是1x，在视网膜显示器上是2x大小的图像。
可以为不同的屏幕范围选择不同的图像
src现在，该属性成为后备属性，srcset指令根据访问页面的设备加载不同的图像。
如果你有延迟加载（下面描述），你只需要担心折叠上方的图片的缩放问题，因为折叠下方的图片会被隐藏起来，直到用户将其滚动到视图中。

代码优化

  • 精简 CSS 和 JavaScript：移除未使用的样式和脚本，合并和压缩文件，减少 HTTP 请求数量。
通过去掉多余的字符，如空格和注释，缩短变量名称，并将常用的样式组合在一起，对这些文件进行压缩。
编写代码就像写作一样：我们使用样式和命名来编写代码，这样对人类来说是有意义的，而且更容易调试。在生产环境中，计算机是在阅读代码。
计算机不关心样式，只需要字符串和命令字符串，因此缩小这些文件可以减轻文件大小。
可以使用此工具来缩小JavaScript：JSCompress。
在Shopify中，你可以通过改变文件名来minify你的CSS。对于JavaScript，你要备份你的主题资产中的原始文件，这样你就有了原始代码。
如果你的主题资产文件夹中的文件名以.liquid结尾，你很可能无法使用这些策略，因为其中混杂着liquid代码。有一些方法可以做到这一点，但很繁琐，可能会导致BUG。
如果你的代码有错误，则缩小代码可能不起作用。如果你的代码有错误，你需要阅读你的代码并进行修复，也可以使用ValidateJavaScript和CSS Lint等这类的验证器工具。
  • 合并脚本和样式表：
对于Shopify网站来说，这个东西不值得做，但它是一种减少资源的优化技术，把文件合并成一个文件，把请求的数量降到最低，理论上可以提高加载速度(这在HTTP2之前是比较重要的)。
缺点：
  • 它可能会破坏网站
  • 如果合并了现在使用的文件，但是以后不需要这些文件，则将加载额外的代码
  • 这可能很耗时且需要大量维护
  • 有条件加载比较困难
通常不会用这种策略来提高性能。
  • 使用异步加载：对于非关键 JavaScript，使用 async 或 defer 属性异步加载，避免阻塞页面渲染。
如果你的脚本对于关键页面加载并不重要，则可以将其移至页面底部（延迟），也可以异步加载，以便页面的关键元素可以更快地加载并显示给用户。
将脚本转换为异步很容易，只需将async属性添加到脚本中，如下所示：
异步加载就像在后台下载脚本，然后在准备就绪时执行它。
推迟脚本将推迟脚本的执行，直到html文档被解析为止。延迟就像将脚本移到页脚一样。
可以尝试使用这些脚本，但是我的一般经验法则是将对页面渲染必不可少的脚本保持为常规（诸如jquery.js）之类的内容，而对于页面渲染而言非必需的异步或推迟脚本。
尝试移动脚本，或者根据情况（或如果有很多脚本）根据情况推迟它们。
在发布实时内容之前，请务必谨慎并进行测试。如果脚本依赖于异步脚本，则可能会出现JavaScript错误或损坏内容。
  • 减少重定向：避免不必要的 URL 重定向，减少加载时间。
  • Gzip压缩
Shopify会为你处理此问题，因此，如果你在分析器中看到此警告，则表明第三方应用程序正在提供未压缩的文件。
通常这没什么大不了的，但是如果你在此处看到50kb或更高的警告，则值得进行调查。
要解决此问题，请在分析器中打开Gzip压缩详细信息，然后查看文件名。如果识别出属于某个应用程序的文件，则可以与他们联系并询问他们是否可以压缩该文件。
  • liquid语言效率低
Liquid = Shopify的模板语言，用于控制主题中的数据流和条件。
对于大多数站点，不必担心这一点，但是，如果你的站点具有庞大的产品目录，那么过多的逻辑逻辑可能会使事情变慢。
一个示例是for loop。这指示代码循环遍历数据集合，直到找到所需的内容为止。
这个基本示例不会影响性能，但是如果您有多个嵌套的for循环在庞大的集合和产品中进行搜索，那么处理时间可能会导致加载时间增加。

应用分析

应用程序可以实现你想要的功能。但请记住，添加的每一个面向商店的应用程序都会增加你的加载时间。
  • 应用优化步骤#1：卸载任何转化率不高或不需要的应用。
你可能会因为一两个应用看起来很酷，或者人们说它很好用，而挂在一两个应用上，但在这里，你需要用数据和A/B测试来看看它是否真的好用。
Google Analatics、应用的分析（如果他们有的话）、客户反馈和热图（使用Hotjar等工具）将帮助你决定一个应用的实用性。
  • 应用优化步骤2：确保你的主题中没有旧的应用代码还在加载。
如果已经卸载了一些应用程序，那么有可能你的网站上有旧的应用程序代码在运行，需要进行删除处理。
你可以通过在分析器中打开 “域的数量 “来检查，这将显示每个域为页面贡献资源。你可能无法识别每一个域，但如果你注意到一个域属于你卸载的应用程序，那么你猜猜它还在加载文件 ，通常可以在你的主题.liquid文件中找到这些脚本和样式表，尽管它们也可能在其他地方。
  • 应用优化步骤#3：有条件加载App脚本。
有条件加载=只在需要的页面上加载资源。
这需要编辑html和liquid代码+测试，确保没有任何问题，所以要谨慎进行。
例如：很多时候，很多app都会把他们的脚本/CSS放在主题.liquid文件中，因为这样做很容易，而且覆盖了更多的用例。如果那个app只需要在产品页面上使用，那么这个脚本可能会在你网站的每个页面上不必要地加载。
为了解决这个问题，您可以限制资源仅在需要的地方加载，如下所示：
任何时候你对你的主题进行编辑，确保你先备份它，并在备份的主题上进行，以确保你不会破坏你的实时主题。在发布之前，先预览和测试。

减少第三方资源

在分析器中收到警告，提示缩小第三方文件，则表明你的一些应用可能正在提供未缩小的文件。
在这种情况下，除了要求他们缩小文件大小之外，你也无能为力。有时他们会，有时他们不会。最好的做法是在生产中对文件进行最小化，但他们可能有理由不这样做。
如果你想联系应用程序开发人员，可以使用以下模板：
HI,
It looks like there’s an unminified CSS file being served from your app (see attached screenshot).
Any chance you can minify that?
Thanks, love your apps by the way!

资源提示/预加载

资源提示是html属性，可用于指示浏览器优化某些资源的加载。
这些命令可以帮助快速抓取关键资源+提升网站整体导航。

服务器配置

这由Shopify为你100％处理，可以不用管它
Shopify服务器速度很快。如果你遇到随机的网站问题，但尚未编辑主题或应用程序，则可能是服务器问题。
你可以在这个网站检查Shopify的状态：status.shopify.com。
他们的服务器通常运转良好，但有时它们会掉下来或出现问题。在大多数情况下，如果发生问题，很快就能解决。

4. Shopify 缓存机制

利用 Shopify 的缓存

  • 页面缓存：Shopify 自动缓存静态内容，确保用户访问时能快速加载。
  • 应用缓存：如果使用自定义应用，确保合理使用缓存，避免频繁请求后端数据。

使用 CDN（内容分发网络）

  • Shopify 自带 CDN，所有静态资源（如图片、CSS 和 JavaScript 文件）都通过 CDN 提供。确保：
    • 所有静态资源都在 Shopify 上托管。
    • 使用 Shopify 提供的资源链接，确保利用 CDN 的优势。

5. 用户体验优化

提升交互体验

  • 快速反馈：在用户进行操作（如添加到购物车）时，提供即时反馈，使用加载指示器或动画。
  • 优化导航：确保网站结构清晰、导航简单，减少用户寻找产品的时间。

移动端优化

  • 响应式设计：确保网站在各类设备上都能良好显示，使用媒体查询调整布局。
  • 简化表单：在移动端简化输入表单，减少用户输入负担，提高转化率。

6. 监测和调整

使用性能监测工具

  • Google PageSpeed Insights：分析页面速度，提供优化建议。
  • GTmetrix：监测加载时间，分析资源使用情况。
  • Shopify Analytics：查看用户行为，识别加载缓慢的页面和资源。

寻找瓶颈

你可以使用webpagetest.org或Chrome开发工具来分析页面的瀑布图，以查看加载的每个文件以构建页面。
如果你之前没有看到资源瀑布，那可能就像查看Matrix，但至少可以查找异常现象，例如文件加载时间长，阻塞其他资源或出错。
来自webpagetest.org的瀑布示例：
notion image
如果发现奇怪的东西，请查看文件名，它将为您提供引起原因的线索以及从何处开始调试。

定期审查和优化

  • 定期审查网站性能，跟踪关键指标（如加载时间、跳出率），根据数据反馈进行调整和优化。

六、Shopify设计优化

这里着重讲解非技术性的优化会影响你的站点性能，主要原则如下：

使用hero而不是滑块

Hero =在你的网站顶部（通常是首页）的单个横幅图像，显示你的产品有多棒，或者是生活方式的图像，或者是使用你的产品的人的拼贴画。
Sliders =循环播放大型横幅图片的图片滑块，需要一个jquery插件（通常）。
产品页面的图片滑块是个例外。这些都是直观和吸引人的，而且不是像某些主题的主页上的巨大的横幅滑块。保留这些。
针对大型横幅滑块的争论：
  • 他们使你的网站变慢
  • 人们与你互动的程度不如你希望的那样
  • 在移动设备上，向下滚动比滑动更自然
如果我告诉你只有1％的人点击滑块该怎么办？你可以在Google上搜索“横幅广告是否很好”之类的内容，以查看一些结果，我最喜欢的是“ 滑块很烂，应该禁止你的网站上的滑块” 😂
建议：试着使用一个单一的英雄图片，搭配酷炫的生活方式图片或明确的信息/行动号召。
研究和建议不会对100%的人有效，所以如果你喜欢这个滑块并想保留它，可以尝试A/B测试，以知道什么最适合你的网站/受众。

轮播

旋转木马很酷。但是像滑块一样，它们增加了额外的页面重量和资源。
虽然在某些地方我喜欢旋转木马，所以说要保留它们，只是不要太过分。
好的做法：在主页上有1或2个旋转木马，显示趋势产品、新到产品或收藏夹。
坏的做法：一个轮播中有20种产品，可能会加载100多种额外资源。
最好的方法是将轮播硬编码到主题中，首选插件是Owl Carousel。

超级菜单（Mega menus）

大型菜单看起来很酷，但这是另一个潜在的瓶颈，因为在每个页面的顶部，资源的数量超过了折页。
如果你使用这类应用程序，则可能会减慢你的网站速度。
无论你使用的是应用程序还是主题功能，如果你使用的是大型菜单，这些提示将有助于最大程度地降低性能延迟：
  • 确保图像已压缩并以合理的大小加载（请参见上面的“ 图像优化”部分）
  • 使用webpagetest.org来测试有无大型菜单的性能差异
  • 如果你使用的是应用，请考虑将功能硬编码到主题中

快速浏览

如果快速浏览功能编码正确（用户单击后使用ajax插入内容），则可能没问题。
notion image
如果快速查看功能的编码不正确（每个快速查看弹出窗口均在页面加载时加载），则说明加载速度会大大滞后。
通过搜索仅存在于快速查看弹出窗口中的图像来进行测试。然后将你加载的资源与Shopify分析器或Chrome开发工具进行比较。如果你在这些工具中找到该文件，则意味着该文件正在页面加载时（以及该页面上的所有其他快速查看内容）加载。
使用快速查看功能，原因有两个：
  • 他们放慢页面速度
  • 你在页面上获得的时间更多，但页面浏览量却更少。我喜欢浏览量

移动优先的心态

大多数Shopify网站现在的移动流量都比台式机更多，因此“移动优先”设计是获得出色用户体验的关键。
即使你的客户仍然在台式机而非移动设备上购买更多商品，你仍然希望创造出色的首次移动体验，然后在重新定位他们时，他们更有可能以两种方式购买。
作为电商，你可能会在计算机上花费大量时间。这对于完成工作非常有用，只需确保你也花时间在手机上浏览你的网站。把自己当成客户。
如果你发现自己的连接速度较慢，那么这是浏览站点的最佳时间。如果你在慢速连接上测试你的网站，但它仍然很有趣且易于使用，那么你的性能将很出色，并且你将在任何连接上实现最大转化。 思想实验：最后一次经历完整的渠道是什么时候？在手机上？就像整个漏斗一样：
  1. 搜索产品
  1. 点击你的商家信息（查看与其他人相比Google的外观）
  1. 与你的网站互动，“了解你的品牌”
  1. 添加/删除产品到购物车
  1. 放弃你的购物车
  1. 重新定位（通过电子邮件，FB，IG等）
  1. 回到你的网站并完成购买
  1. 获得你的购买后电子邮件
  1. 收到你的产品
  1. 拆箱并阅读产品包装

七、SEO 和营销优化

在 Shopify 上优化网站的 SEO 和集成营销工具是提升流量和销售的关键。以下是从开发和运营者的角度出发的最佳实践。

1. SEO 优化

关键词研究
  • 使用工具：使用 Google Keyword Planner、Ahrefs 或 SEMrush 进行关键词研究，找到与您的产品和行业相关的高流量关键词。
  • 长尾关键词：关注长尾关键词，这些关键词竞争较小，转化率通常更高。
网站结构优化
  • 清晰的 URL 结构：确保 URL 简洁且包含关键词，例如 yourstore.com/collections/shoes。
  • 站点地图：创建 XML 站点地图，并通过 Google Search Console 提交，帮助搜索引擎更好地索引您的网站。
页面优化
  • 标题和描述：为每个页面设置独特且包含关键词的标题标签和 meta 描述，吸引用户点击。
  • 头部标签：使用 H1、H2 标签结构化内容，确保搜索引擎能理解页面层次。
  • 图像优化：为每个图像添加描述性 alt 标签，包含关键词，这有助于图像搜索引擎优化。
内容策略
  • 高质量内容：定期发布与行业相关的博客文章，提供有价值的信息，吸引用户并提升网站权威性。
  • 用户生成内容：鼓励客户撰写评价和反馈，增加网站内容的多样性和可信度。
移动端优化
  • 响应式设计：确保网站在各种设备上均能良好显示，Google 优先考虑移动友好的网站。
  • 页面加载速度：优化网站性能，确保快速加载，使用工具（如 Google PageSpeed Insights）检测并改进速度。

2. 集成营销工具

电子邮件营销
  • 集成邮件服务：使用 Shopify 的电子邮件营销应用（如 Klaviyo 或 Mailchimp）进行客户管理和活动推广。
  • 个性化邮件：根据用户行为（如购物车放弃、浏览历史）发送个性化邮件，提高打开率和转化率。
  • 自动化工作流程：设置自动化邮件（如欢迎邮件、生日优惠），增强客户关系。
社交媒体推广
  • 社交媒体整合：将社交媒体链接集成到网站，鼓励用户关注您的品牌。
  • 分享按钮：在产品页面和博客文章中添加社交分享按钮，方便用户分享内容，增加曝光率。
  • 定期发布内容：在社交媒体上定期发布有吸引力的内容（如产品图片、促销活动），吸引用户互动。
付费广告
  • Google Ads 和 Facebook Ads：利用 Google Ads 和 Facebook Ads 进行定向广告投放，吸引潜在客户。
  • 再营销策略：使用再营销广告，针对之前访问过您网站的用户，提高转化率。

3. 数据分析与调整

使用分析工具
  • Google Analytics：集成 Google Analytics，监测流量来源、用户行为和转化率，获取数据驱动的洞察。
  • Shopify Analytics：利用 Shopify 内置的分析工具，跟踪销售和客户行为。
定期审查和优化
  • A/B 测试：进行 A/B 测试，比较不同页面设计和内容的效果，优化用户体验和转化率。
  • 调整策略：根据数据分析结果定期调整 SEO 和营销策略，确保持续改进。
上一篇
AI 编程工具评测和探索
下一篇
Shopify Admin Design设计指南