我们如何帮助Drupal Commerce商店中的移动销售翻倍?

在Droptica,我们 为波兰最古老的发行商之一 设计 ,制作并实施了一种新的 移动设备 在线商店 设计 我们使用了 Drupal 7 Commerce 并进行了一些搜索引擎优化。 结果? 增加销售。

出版社

三年前,我们开始与Wydawnictwo WAM出版社(波兰最古老的天主教出版商之一)合作。 除了有关宗教主题的书籍外,他们还出版科学和大众科学出版物,每年总共出版约150种书籍。 他们的产品包括祈祷书,宗教技巧,学术论文,文学,传记,年轻成人书籍和食谱,包括著名的阿纳斯塔西娅姐妹食谱。

教宗庇护十一世在谈到“祈祷的使徒”时说:“这是我们时代最令人钦佩的作品 ,它是克拉科夫Wydawnictwo WAM出版社的出处。 它由耶稣会士于1872年成立。 实际上,这意味着WAM在2017年庆祝成立145周年。

此外,该出版社还获得了许多奖项和荣誉,包括麦哲伦奖,2014年费尼克斯奖等等。
该出版社还经营着一个在线商店和Deon.pl(社交网络和新闻网站)。

合作开始

我们通过建立模块来改善他们在网站上的购买来开始我们的合作。 一些著名的例子包括:

  • 一个模块,允许用户发送购买的产品作为礼物;
  • 接送点选择;
  • 将Drupal Commerce与Freshmail集成在一起,从而使出版社可以定位新闻通讯并通过电子邮件发送有关新产品的信息。

手机版

我们的任务是现代化上述的Drupal Commerce商店。 在台式机上非常愉快。 然而,移动设备则是另一回事。 这家商店是在几年前使用Drupal 7进行设计和创建的,当时几乎没有听说过手机购物。 时代变了。 客户希望能够浏览商品,查找有关商品的更多信息并使用任何移动设备购买商品。

由于当今的标准与商店成立时的标准完全不同,因此必须改进图形设计和布局,以使从移动设备购物更加方便。

毫无疑问,来自移动设备的流量和购买量正在上升。 同时,我们应该记住,即使客户更喜欢使用计算机下达实际订单(例如,因为他们可能更喜欢使用标准键盘输入数据),他们也会经常了解有关报价和浏览商品的信息。手机或平板电脑。

我们必须采取行动。

我们从准备新的图形设计开始。 我们的图形设计师创建了适合移动设备的设计,不仅美观,而且可以改善并促进与用户的交互。

我们决定不仅要更改布局,而且还要选择合适的字体(可以在移动设备上更好地看到它)并更改颜色。 桌面外观将保持不变。
进行一些微小的更改后,客户接受了新设计,我们的开发人员开始着手进行设计。

我们首先将CSS移至SASS预处理程序。 变量,混入和更简洁的结构使在图形设计中进行更改的工作更快,更有效。

同时,我们的质量检查部门开始在Codeception中创建测试。 主要条件之一是保持桌面布局不变,应该在Codeception中进行测试以捕获当前的外观,并告知以后的工作过程中可能发生的不良更改。

经过初步准备,我们开始着手更改布局。 我们的首要任务是购买流程-购物车页面,付款方式选择和交付。 然后,我们更改了产品页面,信息页面和搜索结果。

同时,我们还开发了新的测试,以确保代码中的更改不会引起商店其他部分的更改,否则将很难引起注意。

事实证明,不仅需要更改SASS / CSS,而且还需要其他JS代码。 例如,该网站上有许多带有图形的轮播。 为了确保它们正常工作,我们必须另外更改和扩展现有的JavaScript代码。 我们以较小的分辨率在子页面上添加了其他下拉元素,并且完全重建了菜单,并添加了用于移动设备的所谓粘贴菜单。

在执行每个实施之前,我们执行自动和手动测试,我们分析了整个购买过程并检查了布局。 我们检查了不同环境和浏览器中的所有内容。 我们修复了所有弹出的错误,并确保布局统一。
在整个过程中,我们定期实施工作成果,平均每周一次。

变更摘要

  • 改进了移动设备的布局-现在很明显,它吸引了客户,并使导航站点和进行购买变得更加容易。
  • 购买流程的更改(表格已适应移动布局),以加快购物速度,并促进从智能手机和平板电脑选择送货和付款方式。
  • 修复手机屏幕上的错误。
  • 该网站已适应当前标准。
  • 实施自动测试,帮助我们捕获错误并节省开发人员的时间。
  • 减少会话时间,并增加使用移动设备的客户的收入。 这意味着客户比以前更快地找到了他们想要的东西。
  • 使用移动设备购买的商品数量增加了200%。

客户对新布局非常满意,但我们对销售增长最为满意。 经过几个月的评估,事实证明,不仅台式机版本的购买量增加了,而且与去年同期相比,使用移动设备进行的购买量也增加了两倍。

搜索引擎优化

在完成移动布局方面的工作后,我们将精力集中在SEO(搜索引擎优化和定位)上,以吸引新客户,增加网站流量并在搜索结果中添加有关产品的新信息。

我们从将网站连接到Google Search Console开始,该工具使我们能够测量网站的流量,提高性能并捕获错误。 然后,我们根据SEO审核实施了更改,其中包括:

  • 改善头条新闻;
  • 如果超过了描述标签中的最佳字符数,则向编辑者添加通知-标签中的信息在搜索过程中显示为提示;
  • 添加站点地图;
  • 为Google搜索结果增加价格和产品可用性;

此外,我们优化了网站上图形的大小,比例和质量。

图形的大小和页面加载速度对于优化Google搜索非常重要。 页面加载的速度越快,排名越高,这反过来又增加了在搜索结果中排名较高的可能性。

较小的图形可缩短页面加载时间。 更快的连接速度可以为更多客户提供服务。 对于使用智能手机和平板电脑的客户来说,快速页面加载也很重要,尤其是当它们的连接较弱且速度较慢时。 因此,更多的人可以方便地浏览页面并更频繁地购物。

SEO工作结果

  • 变化导致搜索引擎结果排名更高。
  • 搜索引擎(Google和其他引擎)的流量增加了。 流量增加了50%。
  • 索引属于Wydawnictwo WAM出版社书店的所有页面。 Google和其他搜索引擎现在可以检索页面的全部内容,为所有产品建立索引,并提高发布商的竞争优势。
  • 添加有关网站流量的工具。
  • 搜索结果包括有关价格和可用性的其他信息。
  • 添加新项目时,编辑者的工作更加轻松(SEO符合性信息)。

摘要

新的移动布局和与SEO相关的更改方面的工作为Wydawnictwo WAM出版社带来了许多好处。 其中最重要的是:

  • 实施更改后的几个月内,网站流量和销售量显着增加。
  • 台式机销量与上一年相比增长了50%。
  • 使用移动设备的购买量比上一年增长了200%。
  • 新用户增加84%。
  • 一种新的布局,使使用智能手机和平板电脑的客户可以更轻松地导航和购买商品。
  • 移动设备的新布局和图形设计。
  • 页面加载时间更快。
  • 降低拒绝率。
  • 商店完全符合GDPR。
  • 改进(简化和加快)采购流程-从购物车到选择送货方式。
  • 确保Google和其他搜索引擎抓取所有内容,产品和物品。
  • Google搜索结果中的其他产品信息。
  • 对于在书店工作的编辑人员而言,工作更轻松。
  • 符合当前标准。
  • 引入自动化测试,这将使开发人员以后可以更轻松,更快地为出版社工作。

我们将继续与Wydawnictwo WAM出版社合作。 我们目前正在努力改善仓库流程。