Back to Blog List

Shopify 定制:如何构建用于销售的自定义 Shopify 页面?

GemPages Team
Updated:
13 minutes read
shopify customization with GemPages

如果您正在读这篇文章,说明您是一位非常重视店面的商家。

我们还敢打赌,您可能已经尝试过调整现有的 Shopify 主题,但这并不像您想象的那么容易。或者,您甚至可能正在寻找代理机构或专门的开发人员来为您的在线商店进行Shopify 定制

但不幸的是,自定义 Shopify 并非易事。这就是我们花大量精力撰写这篇文章的原因——帮助您轻松自定义 Shopify 商店主题,以更好地满足您的需求

    准备自定义 Shopify 商店主题

    首先Shopify主题定制有两种常见的方式

    1. 通过主题编辑器自定义

    其次,在自定义主题之前不要忘记复制主题。这样可以轻松放弃更改并在需要时重新开始。

    Shopify 标准将每个商店的主题数量限制为 20 个。如果您已经在 Shopify 管理员中添加了 20 个主题,则需要先删除一个主题,然后才能创建另一个。

    以下是复制主题的方法

    • 转到您的Shopify 管理员
    • 在那里,点击在线商店>主题
    • 找到您想要复制的主题 - 如果它是您的实时主题,它将被标记为当前主题,或者如果它是其他主题之一,它将位于您的主题库中。
    • 点击三个按钮 >复制
    在 Shopify 定制之前复制您的主题

    自定义主题之前请先复制它。

    重复的主题将出现在主题页面上,并被命名为“副本+您重复的主题的名称”

    以 1 美元的价格开始在 Shopify 上销售
    从免费试用开始,然后第一个月只需 1 美元

    如何在主题编辑器中自定义 Shopify 主题?

    当您使用 Shopify 主题编辑器自定义页面时,您是在自定义页面模板,而不是自定义单个页面本身。这意味着您对特定模板所做的任何更改都将应用于使用该模板的所有页面

    您可以自定义在线商店的内容、布局、字体和颜色。每个主题都提供部分和设置,让您无需触摸甚至查看任何代码即可更改商店的外观。

    Shopify 主题编辑器

    有许多部分 — 有些是固定的,有些是可移动的。页眉和页脚部分在页面上是固定的— 它们将始终显示在页面上,您无法更改它们的位置。

    如您所见,其他部分右侧有两个图标:眼睛和垃圾桶图标将鼠标悬停在部分名称上时,您还可能会在左侧看到一个烤肉串图标。这些部分是否出现在您的页面上取决于您的设置,您还可以根据需要在页眉页脚之间移动它们。

    1. 自定义公告栏和标题部分

    公告栏

    公告栏是您可以显示有关您的业务的重要信息的地方,例如正在提供的促销活动、运输延迟或任何更新的政策。

    但是,并非每个主题都内置公告栏。其他Shopify 主题可能需要下载第三方应用才能显示公告栏。

    对于Dawn主题公告栏是开箱即用的,您可以对以下内容进行更改:

    • 文本
    • 配色方案
    • 链接

    标题部分

    在 Shopify 主题编辑器中自定义标题部分

    标题出现在所有商店页面上,因此这些更改将应用​​于整个商店。

    您可以使用Dawn主题对标题进行以下一些调整:

    • 配色方案
    • 显示的菜单项
    • 间距和填充

    您还可以在主题设置中编辑徽标、图标图像或更改调色板、字体等(详细信息请参阅4.调整 Shopify 主题设置)。

    在 Shopify 主题设置中编辑徽标

      2. 编辑个别部分

      接下来,向下滚动以自定义其他部分,包括图像横幅、富文本、特色收藏、拼贴画、视频和多列。

      每个部分都有自己的自定义选项。左键单击任意部分即可查看可进行的更改菜单。

      shopify 拼贴部分

      例如,对于拼贴部分,您可以确定显示哪个系列以及要展示哪个产品。

      shopify 预览检查器

      Shopify 的预览检查器

      提示编辑过程中,不要忘记激活主题编辑器顶部的预览检查器。预览检查器允许您直接从预览窗口导航到部分和块,并更快、更直观地找到相应的设置。

      添加部分

      要添加部分,请点击蓝色按钮“添加部分” ,然后从列表中选择新部分或在搜索栏中搜索特定术语。当然,新添加的部分不必停留在页脚正上方 - 它可以在您的页面上向上或向下移动。

      移动部分

      要移动某个部分,请将鼠标悬停在烤肉串菜单上。当鼠标指针变成白色手套时,点击并拖动图标即可重新排列页面上的部分。

      删除部分

      要删除某个部分,请左键单击要删除的部分,然后选择底部的回收站图标。

      3. 自定义页脚部分

      页眉一样,您对页脚部分所做的更改将显示在整个商店中。

      当然,Shopify 自定义选项取决于您使用的主题。

      以下是使用Dawn主题您可以在页脚中更改的一些内容:

      • 配色方案
      • 电子邮件注册可见性
      • 跟进店铺津贴
      • 社交媒体图标
      • 国家/地区选择器
      • 付款方式图标可见性
      • 政策链接
      • 间距和填充

      4.调整Shopify主题设置

      您可以在 Shopify 主题编辑器中执行的另一件事是更改主题的常规设置,该设置决定了商店的外观。

      要访问您的主题设置,请单击屏幕左角的齿轮图标主题设置,然后会弹出 Shopify 自定义菜单。

      shopify 主题设置

      当然, Shopify 自定义选项取决于您使用的主题

      但是,你可以在大多数 Shopify 主题中找到以下一些内容:

      • 标志:设置您的标志图像和标志宽度、网站图标图像。
      • 颜色:更改背景、按钮、文本和强调等元素的配色方案。
      • 字体:选择最适合您商店的字体。
      • 布局:调整页面宽度、空间和网格。
      • 动画:启用卡片和按钮的悬停效果。
      • 按钮、变体药丸、输入:通过自定义边框和阴影来确定按钮、变体药丸和输入的外观。
      • 产品卡、收藏卡、博客卡:调整产品卡、收藏卡和博客卡的样式、文本、配色方案、边框和阴影。
      • 内容容器、媒体、下拉菜单和弹出窗口、抽屉:自定义元素的边框和阴影。
      • 徽章:设置徽章的位置、角半径和配色方案。
      • 品牌信息:输入标题和描述,选择特色图片。
      • 社交媒体:添加您的社交帐户链接。
      • 搜索行为:启用搜索建议或产品供应商、产品价格显示。
      • 货币格式:选择显示或隐藏货币代码。
      • 购物车:定义您的购物车类型——抽屉、页面或弹出通知。
      • 自定义 CSS:为您的整个在线商店添加自定义样式。
      • 主题风格:更改您的主题风格(不会丢失您商店的任何内容)。

      通过主题编辑器自定义部分和主题设置,您可以为基本 Shopify 主题带来新变化。这是升级店面的第一步。

      想要定制更精致的在线形象以符合您的品牌精髓吗?是时候摆脱标准默认主题和基本的 Shopify 定制了。

      幸运的是,您可以选择GemPages这样强大的页面构建器来获得无限的灵活性

      继续阅读,探索改变Shopify 定制的游戏规则的解决方案,您将永远不必为网页设计而烦恼。

      如何使用 GemPages 页面构建器创建 Shopify 自定义页面?

      1. Shopify 主题与页面构建器:有什么区别?

      主题决定了您的在线商店的组织、功能和风格。

      页面构建器是您在主题顶部安装的扩展,可帮助您以最少的精力和时间进一步定制 Shopify 商店页面。

      为了更容易理解,将您的 Shopify 商店想象成一块海绵蛋糕。

      主题就像海绵,页面构建器就像糖霜。海绵是任何蛋糕的必备材料,而糖霜则是锦上添花。

      我们完全可以用轻盈、透气的海绵蛋糕来享用蛋糕。但正是精心制作的滴落糖霜吸引了顾客并说服他们购买。

      2.GemPages如何帮助您进行Shopify定制?

      GemPages 页面构建器与最新的 Shopify 主题和 Online Store 2.0 兼容。因此,基本上,无论您使用什么 Shopify 主题,您都可以安装 GemPages 进行更高级的自定义。

      gempages 深受大品牌信赖

      使用 GemPages,您可以创建任何类型的页面,例如主页登录页面产品页面收藏页面即将推出的页面关于我们的页面等等。任您选择!

      GemPages 提供了丰富的模板库

      GemPages 的丰富的页面模板库。

      GemPages 授予您访问200 多个页面模板的丰富库的权限,因此您无需从一张白纸开始。

      只需从我们专业的现成模板集合中进行选择,然后上传您的产品、插入一些新内容以及添加图像、视频、动画和效果即可。

      如果您需要任何有关页面设计的建议,您可以随时使用我们的GemMeter 功能。GemMeter 适用于所有 GemPages 定价层,可帮助检测设计错误并提供实时建议,以打造性能更高的页面。

      此外,借助GemPages 的全局样式功能,您可以创建自定义预设并将其应用于每个页面。这可以为您省去反复编辑每个微小细节的麻烦,同时确保品牌一致性。

      专业提示:在多个 Shopify 页面上创建预制部分,并使用GemPages 主题部分一次性更新它们

      按照您的方式自定义 Shopify 商店页面
      强大的页面构建器让您能够创建带来独特体验并吸引客户的商店页面。无需编码。

      但这不仅仅关乎页面设计。品牌需要找到一种平衡美观、转化率和性能的方法。

      GemPages 还提供

      • 倒计时器、粘性添加到购物车和社交分享等一系列提高转化率的元素可促进销售。
      • 延迟加载、预加载资源和高速 CDN 可确保您的页面尽可能快地加载。
      • GemPages 还可以通过移动友好型设计、页面元数据和 alt 标签针对移动设备和搜索引擎优化您的页面。

      AEZ Media & Mastery的创始人Andrew Ethan Zeng分享了他使用 GemPages 创建、自定义和优化 Shopify 商店的经验。您可以观看他的视频,快速轻松地了解如何使用 GemPages 构建自定义商店页面。

      3. 使用 GemPages 创建的 Shopify 自定义页面示例

      以下是一些最佳的 Shopify 定制示例,展示了商家如何利用 GemPages 创建同样令人惊叹且高转化的定制设计。

      温馨女士

      Cozy Ladies 是一个女性卫生用品品牌,生产和销售各种颜色的蓬松过膝袜。这个单一产品品牌求助于 GemPages 来创建一个时尚的产品页面,幸运的是,他们信任了正确的应用程序!

      只需看看他们使用 GemPages 构建的自定义产品页面!他们的重点是设计网站,在整个网站上展示产品的前后对比图和客户的积极反馈作为证据。

      使用 gempages 构建的 shopify 产品页面示例

      大胆的文案、均衡的空白和像素完美的视觉效果的融合传达了品牌个性并吸引人们关注产品。我们还喜欢他们通过高质量的简短产品视频、详细的产品描述产品捆绑销售建立产品信任的方式。

      专业提示:为了在削减营销费用的同时进一步追加销售,可以考虑捆绑定价-这是最有效的策略之一。

      使用 gempages 构建的 shopify 产品页面示例
      “这款应用 (GemPages) 必不可少。强烈推荐给任何寻求大规模定制的人。如果您遇到任何错误,无需聘请开发人员。支持非常有帮助。”

      - 舒适女士

      土星鸟咖啡

      Saturnbird 的在线商店让购买速溶咖啡变得不再平凡。看看他们如何使用 GemPages 创建精美的商店页面!

      使用 gempages 构建的 shopify 产品页面示例

      色彩丰富、充满活力和现代化的品牌——从英雄横幅图像和图像悬停效果到主页产品页面上的交互式按钮,这个网站浏览起来非常有趣。

      “我非常喜欢 GemPages。它非常人性化,具有更多自定义功能,使我们的产品页面更加丰富,对客户更具吸引力。客户服务也非常合作……它比我之前选择的应用程序更好,我会推荐给你!”

      - Saturnbird 咖啡

      波霸

      PopBae是一家总部位于美国的快时尚手袋、鞋类和配饰零售商,他们选择 Envy 作为其商店主题,后来安装了 GemPages 以实现更高级的 Shopify 定制。

      使用 gempages 构建的 shopify 收藏页面

      除了明亮清晰的产品图片外,该品牌还为其系列中的每件产品提供颜色、折扣价和原价。还有许多产品分类选项,让客户可以轻松找到自己想要的产品。

      您的商店页面可能看起来像这样
      免费试用 GemPages 来创建令人惊艳、转化率高的商店页面。无需编码。

      您的 Shopify 商店值得升级!

      现在您已经了解了有关 Shopify 主题定制的基础知识,以获得适合您品牌个性的精确外观。

      您还在等什么?立即使用 GemPages定制您的商店,并观察您的销售额增长!

      关于 Shopify 定制的常见问题解答

      Is it easy to customize Shopify?
      Honestly, Shopify customization is not easy. You need to have a certain level of technical knowledge to customize your Shopify store. If not, there's a good chance you'll find it way too complicated and time-consuming. A better idea for newbies is to customize Shopify with a third-party app like GemPages.
      Is Shopify highly customizable?
      ​​Shopify's ability to be customized is pretty impressive, from themes, products, discounts, and checkouts to payments. You can customize your Shopify in your dashboard regardless of your coding knowledge.
      Can you customize Shopify themes?
      Yes! Most of the basic customizations can be conducted in the Shopify admin. But if your store demands a higher level of customization, you may need the help of a page builder like GemPages. With GemPages, you can step out of the standard Shopify layout to launch pages that create unique experiences to convert customers.
      How much does it cost to customize a Shopify theme?
      If you go for a Shopify page builder like GemPages, you can start for free, or opt for the paid plan from $23/month. If you hire a professional freelancer, you pay way much more, from $30 - $150 per hour.
      Of course, you still need to pay your Shopify theme fees. A free theme costs you zero, but a paid Shopify theme costs you between $140 and $450.
      How to update the Shopify theme without losing customization?
      To update the Shopify theme without losing customization, simply duplicate your edited theme to backup. Follow the steps below to duplicate your theme.
      1. Enter your Shopify admin.
      2. Click on Online Store > Themes.
      3. Click the 3 dots button > Duplicate.
      4. Download the theme to have it as a backup.
      What is the most customizable Shopify theme?
      Both free and premium Shopify themes are customizable, and each theme has different customization options. Customizing your theme in the Shopify theme editor only gets you to a certain level. To really differentiate your brand and create a visually stunning custom shopping experience, you should turn to GemPages drag-and-drop page builder.

      Start selling on Shopify

      Start with free trial, then get your first month for $1.

      Start free trial
      Shopify Sign Up Shopify Sign Up