高级 Shopify 定制开发如何创造更好的用户体验

已发表: 2020-11-14

对于高品质、创新和负责任生产的行李箱、箱包和其他旅行配件的卖家 Paravel 来说,定制功能是必须的。 他们生产和销售的产品是独一无二的,因此对他们来说,为客户提供独一无二的购物体验是必要的。

Paravel 需要大量基本的电子商务功能才能通过其在线商店进行实际操作。 最初,它们建立在一个名为 Spree 的开源平台上,因为它是一个开源平台,所以它有很多追随者和支持者。

与 Magento 等其他开源平台一样,Spree 是高度可定制的。 它还可以与大量第三方插件和应用程序集成,具有高度可扩展性,并且展现出一定程度的 UI 直觉,使开发适合移动设备的界面变得更加容易。

虽然这只是 Spree 各种功能特性的快速快照,但其中一些特性的成本与其他开源平台相同。 它们的功能可能几乎是无限的,但它们需要大量的开发时间,甚至需要更多的经验才能完成。 如果没有丰富的编码经验或开发背景,像 Spree 这样的平台会很快耗尽资源。

Paravel 需要这种独一无二的购物体验,但他们也需要一种开箱即用的解决方案,为他们的电子商务商家提供很多东西。 对他们来说,问题是他们如何才能将他们已经精心设计和开发的电子商务商店从 Spree 转移到一个更强大的平台?

彻底的迁移过程

在与我们的销售团队沟通后,Paravel 决定迁移到 Shopify Plus 就是答案——有一些规定。 除其他外,Paravel 不想体验迁移带来的任何负面影响,他们希望他们的新商店能够提供 Spree 商店的所有功能,然后再提供一些功能。 为此,Paravel 需要的不仅仅是 Shopify Plus 合作伙伴——他们需要 Shopify Plus 专家。

虽然 Spree 提供了几乎无限的定制选项,但 Shopify Plus 作为一个托管的电子商务 SaaS 平台,可以为他们提供更多。 在 1Digital 等开发团队的帮助下,Shopify Plus 可以为他们提供 Spree 提供的所有自定义设置等等。 Shopify Plus 还提供增强的安全功能、保证正常运行时间、快速的站点速度、与第三方应用程序和插件的类似兼容性、接受多种支付选项、巨大的可扩展性等等。 此时,Paravel 的任务是将他们现有的 Spree 商店及其设计和功能转移到 Shopify Plus。

对于一些人来说,网站迁移的过程是令人痛苦的,但我们知道并非如此。 有数百个成功的迁移在后视和一个开发团队支持我们的努力,我们知道它可以毫无困难地完成。 只是需要一个彻底的过程。

这个过程是密集的,但没有什么是1Digital Ⓡ Agency 不能出色地执行的。 该项目需要迁移 32 个产品字段(包括名称、描述、图像、价格等)以及每个 4,000 多个客户帐户和订单。 为此,我们设置了一个临时 Linux 服务器并编写了一个自定义脚本,以从其原始站点的 Spree 库存中提取和分类这些信息。

为了将其转移,我们创建了另一个自定义脚本以连接到 Shopify API,然后正确导入所有相关字段。 在此过程中和之后,数据被检查以确保它正确地登陆新商店,这样不仅不会丢失任何东西,而且会全部填充到它应该去的地方。

我们彻底的流程防止了数据丢失,但流量丢失怎么办? 如果有一件事让电子商务客户对平台重构的前景感到失望(即使它会带来巨大的好处),那就是担心失去流量或域权限。

幸运的是,我们的迁移过程可以防止对 SEO 造成损害,因为它可以防止数据丢失。 使用 Paravel,就像我们对每个迁移项目所做的那样,我们收集了与其网站关联的所有 URL,然后设置 301 重定向到新 Shopify 网站上的关联 URL。 不出所料,迁移完成后,Paravel 没有遭受流量损失或排名波动。

支持——以防万一

迁移到 Shopify 顺利进行,Paravel 正在前往具有增强功能和更好用户体验的新 Shopify Plus 商店,但为了安全起见,我们在迁移项目中包含了 30 天的免费支持期. 任何拥有经过验证的流程的 Shopify 移民机构都应该这样做; 这只是成功迁移策略的一部分。

免费支持期的长度根据项目的范围而有所不同,但在 Paravel 迁移的情况下,我们分配了 30 天。 这让他们有整整​​一个月的时间来调查他们的新网站并解决可能出现的任何迁移错误——我们将免费修复这些错误。

即使在那之后,我们也允许他们继续保留,不要求他们交押金; 只需为免费网站支持期结束后他们将记录的任何更改计费。 像这样的小事情对确保良好的客户服务大有帮助,我们的目标是确保迁移顺利进行,即使所有内容都经过检查、仔细检查和再次检查。

一个新开发的网站

但迁移并没有结束。 Paravel 制定了与新网站提供的客户体验相关的迁移标准,为了确保这一点,我们必须为他们开发一个全新的 Shopify Plus 网站。

作为他们项目的一部分, 1Digital Ⓡ Agency 的开发人员为他们制作了一个全新的主页,该主页更好地整合了品牌,并有助于以更理想的方式定位他们的产品。 它以更新的产品和背景图像为特色,更好地符合目标市场的兴趣和看法。 考虑一下新主页的圆滑、精致的印象,下面是旧主页的静止画面。

对于他们主页的访问者来说,新的布局立即引人注目,不仅因为其图像的卓越美感,而且因为它尽最大努力将 Paravel 产品的价值置于首位和中心。 您还会注意到,新主页布局的顶部有一个菜单,这是以前设计中缺少的; 以前访问他们的产品的方法是向下滚动页面,找到一个标有“购买该系列”的按钮。 如上所示,新页面具有更好的站点导航功能。

向下滚动主页,访问者可以通过滑动横幅查看评论,了解有关流行产品类别的更多信息,甚至可以通过社交媒体查看客户如何使用产品,如下面的一些屏幕截图所示。

除了主页之外,1Digital Ⓡ 在其他几个系统页面之上还为Paravel制作了一个新的类别页面模板以及一个“我们的故事”页面。 开发的页面包括购物车和结帐页面、登录页面、礼券页面和“谢谢”页面。 最后,我们定制了一些内容页面,包括他们的“FAQ”和“Terms”页面。

高质量响应式网站设计的重要性对于当今的电子商务至关重要,作为项目的一部分, 1Digital Ⓡ开发人员小心翼翼地为 Paravel 准备了一个更新的响应式网站。 为了提高 Paravel 的用户体验,1Digital 的新响应式设计会自动适应较小的屏幕,并相应地调整文本大小和重新格式化。

高级开发 - 类别页面功能

当 1Digital 开发人员传输与 Paravel 产品类别相关的所有信息时,我们还添加了一些新功能,以便他们传递给客户,从而改善客户体验。

我们在他们的类别页面模板中安装了元字段编辑器,以便 Paravel 可以快速更改出现在他们的类别页面显示上的一些徽章。 这使他们能够编辑自定义字段,以便更突出地显示与“新”、“畅销书”或“特色”产品相关的促销活动。

这个看似简单的功能为 Paravel 的管理员提供了强大的功能,无需与开发人员合作即可快速轻松地更改其网站的显示。 可以给男人一条鱼或教授艺术,我们向 Paravel 提供了有关如何使用和管理该应用程序的详细说明,以便他们即使在项目结束后也能轻松进行更改。

同样,1Digital 开发人员在 Paravel 的产品系列页面上创建了产品样本和快速查看功能。 我们为他们的 Shopify Plus 产品系列页面创建了一个自定义脚本,该脚本能够获取并显示所需的信息。

这些色板的脚本还确保当客户单击与感兴趣的颜色相关的色板时,产品图像将以该颜色显示。 此外,它将显示与更改相关的适用定价以及“个性化”的任何选项,或者,如有必要,“缺货”消息。

高级开发——产品页面功能

Paravel 非常重视客户体验,因此,他们需要在产品页面模板之外提供大量附加功能,包括帮助个性化购物体验的附加功能。

因此,作为该项目高级开发方面的一部分,1Digital 帮助创建了一组新的更好的功能来个性化他们网站上的购物体验,特别是在他们的产品页面上。

我们配置了他们的产品页面模板,使其显示类似于他们的旧 Spree 商店。 然后,我们创建了一个“添加到购物车”条,该条将保留在产品页面显示的底部。 那是容易的部分。

我们还为他们的产品页面模板开发了一个工具,让购物者能够个性化他们的购物体验并使其更加真实。 除了让客户能够使用上述样本功能查看给定包(或其他产品)的外观外,Paravel 还让客户能够个性化他们的产品。

Paravel 对现实工具的转化促进功能感兴趣,该工具可以让客户真正看到他们的产品在个性化后会是什么样子,因此我们创建了一个工具,让他们能够做到这一点。

我们为 Paravel 构建的工具会在客户访问产品页面时显示带有“个性化”字样的弹出窗口然后我们创建了一个工具,使客户能够根据字体的样式和颜色个性化产品会标与他们的首字母。

该工具在客户点击“个性化”后在产品页面上显示为一个小部件,并且非常容易根据他们的喜好进行操作和定制。 为了确保产品能够正确显示个性化设置,我们必须创建一个自定义脚本,以便在产品的正确区域以客户选择的样式准确显示客户输入的字母,如图所示在下图中。 作为最后一层功能,我们创建了一个“尼龙模板”,使 Paravel 的客户能够使用刺绣字母而不是手绘字母或贴花来定制他们的产品。

我们为 Paravel 的产品页面创建了更多自定义项,包括通过 HTML 编码从他们的旧 Spree 商店的产品页面中实现四个选项卡。 我们还从 Paravel 的 Spree 商店重新创建了“选择你自己的冒险”功能,这使客户能够在其他一些定制的基础上,通过贴花和手绘设计进一步个性化 Paravel 的产品,以保持出现的原始功能的完整性。他们的狂欢商店。

与关键应用程序集成

为了保护新 Shopify Plus 商店的功能并确保流畅、愉快的用户体验,1Digital Agency 必须将 Paravel 的新商店与其关键业务应用程序集成。

除其他外,Paravel 的客户依赖于 Paravel 能够通过 YotPo 绘制和展示的评论和推荐,我们确保为他们无缝集成。 Paravel 还严重依赖使用 Zaius 来进行客户参与和 CRM,因此我们执行了该集成以及上述集成。

除此之外,Paravel 还利用了 RJ Metrics 和 Talkable 提供的功能。 这些应用程序为 Paravel 的管理员提供有价值的数据,并允许安全的推荐营销计划。

1Digital Agency 将所有这些应用程序与 Paravel 的新商店集成在一起,此外还编码和开发了他们的新 Shopify Plus 网站。 我们完成了这个项目,范围广泛,需要迁移和高级定制开发,没有任何问题。 也就是说,客户没有遇到业务过度中断,没有流量损失,并没有出现任何问题,而是搬到了一家新开发的具有高级定制功能的商店。 要做到这一点需要经验和全面的流程, 1Digital Ⓡ 将这两者都集成到我们的工作流程中。

完整的解决方案

一些供应商将他们的服务调整为一种或两种高度专业化的服务,但我们知道电子商务商家面临的问题是多种多样的。 如果我们只能提供开发服务,我们将无法将 Paravel 从 Spree 迁移到 Shopify Plus,后者是在线商家的领先电子商务平台之一。 同样,如果我们仅限于执行迁移,我们将无法按照他们想要的方式定制他们的新商店。

Shopify Plus 设计和开发服务,即使与我们的迁移服务相结合,也只是1Digital Ⓡ Agency 所提供服务的一小部分。 除了我们的 Shopify 定制设计服务之外,我们还提供全面的数字营销活动,包括极具竞争力、经过深入研究和有针对性的 SEO 和 PPC 活动。

这个成功故事取决于我们能够将 Paravel 从 Spree 迁移到新开发的具有高级功能的 Shopify Plus 商店。 我们的许多其他电子商务案例研究都侧重于其他电子商务平台,例如 BigCommerce 设计和开发、类似的 Magento 服务和数字营销活动。 浏览我们的曲目,如果您想了解我们如何解决您的在线业务所面临的问题,请致电 888-982-8269 联系我们。

下载PDF

标签: 1数字流程案例研究开发电子商务电子商务数据迁移电子商务平台迁移平台迁移平台响应式设计shopify plus