最近浏览的产品列表是提高用户转化率的一种有效方式，可以在Shopify平台的在线零售商店中展示。然而，Shopify缺乏原生解决方案，只有少数插件和应用程序可供选择，其中很多需要每月会员资格或公开商店数据给第三方。这些插件和应用程序并没有提供令人惊艳的核心功能。

本教程将告诉您如何在Shopify中添加最近浏览的产品，使客户可以快速查看他们最近浏览的产品并促进销售交易。这对于达到销售高峰至关重要。现在就开始吧！

在 Shopify 中添加最近浏览产品的好处

理想的客户确切地知道他们想要什么，找到它，一到达您的网站就购买，并且可能会写一篇好评。

不幸的是，并不是每个客户都是理想的，卖家必须关注他们并引导我们潜在买家在网站上的一举一动。

所以，在花钱提升品牌知名度之后，你需要让消费者轻松找到他们想要的东西，并毫不犹豫地立即购买。

您只有几秒钟的时间来充分利用普通在线客户本已受限的注意力，他们经常在购买过程中迷失方向。

也许他们确实发现了他们正在寻找的物品，但在购买前不久由于某种原因而偏离了轨道并失去了兴趣。

• 最好的选择之一是提醒他们上次查看的产品，以便他们可以返回并继续他们开始购买。这项服务可能看起来是一种低成本的选择，但它被数字销售行业的重要竞争者所利用，例如 eBay 和亚马逊。这是一种独特的技术，可以挽回原本会丢失的消费者，但为什么呢？互联网市场上最著名的品牌确实在使用它，这很舒服，但为什么有益呢？以下是您可能会看到的一些好处：

• 它延长了人们在您的网站上花费的时间，奖励导航。它会自动引导他们找到他们可能感兴趣的商品（而不是让他们漫无目的地浏览几个页面）。

• 它提高了消费者的忠诚度，因为他们相信商店对他们和他们想要的东西感兴趣，使他们感到相关。

• 对于通知电子邮件，您有机会重新吸引原本会永远消失的消费者。

• 它有可能提高您的转化率！

如何在 Shopify 中添加最近浏览产品

步骤1：在资产内添加 recent-view.js

!function(){"use strict";function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}new(function(){function t(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.getQueryVariable()}var n,r,a;return n=t,(r=[{key:"getQueryVariable",value:function(){var e=window.location.href;if(-1!=window.location.pathname.split("/").indexOf("products")){var t=JSON.parse(localStorage.getItem("product_href"));null==t&&(t=[]),t.unshift(e),t=this.unique(t),localStorage.setItem("product_href",JSON.stringify(t))}}},{key:"getLocalStorage",value:function(e){localStorage.getItem(e)}},{key:"unique",value:function(e){var t=new Array;for(var n in e)-1===t.indexOf(e[n])&&t.push(e[n]);return t.length>4&&t.pop(),t}}])&&e(n.prototype,r),a&&e(n,a),Object.defineProperty(n,"prototype",{writable:!1}),t}())}();

步骤2：在资产内添加 sections_recent-view.js

!function(){var n=JSON.parse(localStorage.getItem("product_href")),a=document.querySelector("#history-product-grid"),e="";function i(n){return String(n).replace(/\B(?=(\d{3})+(?!\d))/g,",")}n.forEach((function(n){var c=n+".js",s=new XMLHttpRequest;s.open("GET",c,!0),s.send(),s.onreadystatechange=function(){if(4==s.readyState&&200==s.status){var n=JSON.parse(s.responseText);e+='\n        <li class="grid__item">\n          <div class="card-wrapper underline-links-hover">\n            <div class="card\n            card--standard\n             card--media\n            " style="--ratio-percent: 98.78419452887537%;">\n              <div class="card__inner color-background-2 gradient ratio" style="--ratio-percent: 98.78419452887537%;">\n                <div class="card__media">\n                  <div class="media--transparent media--hover-effect">\n                    <img\n                      src="'.concat(n.featured_image,'"\n                      alt="').concat(n.title,'" class="motion-reduce" width="329" height="325">\n                  </div>\n                </div>\n                </div>\n              </div>\n              <div class="card__content">\n                <div class="card__information">\n                  <h3 class="card__heading h3" id="title-template--').concat(n.id,'">\n                    <a href="').concat(n.url,'" class="full-unstyled-link">\n                      ').concat(n.title,'\n                    </a>\n                  </h3>\n                  <div class="card-information"><span class="caption-large light"></span>\n                    <div class="price  price--on-sale ">\n                      <div class="price__container">\n                        <div class="price__sale">\n                          <span class="visually-hidden visually-hidden--inline">Regular price</span>\n                          <span>\n                            <s class="price-item price-item--regular">\n                              $').concat(i(n.compare_at_price/100),' USD\n                            </s>\n                          </span>\n                          <span class="visually-hidden visually-hidden--inline">Sale price</span>\n                          <span class="price-item price-item--sale price-item--last">\n                            $').concat(i(n.price/100),' USD\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class="card__badge bottom left"><span class="badge badge--bottom-left color-accent-2">Sale</span></div>\n              </div>\n            </div>\n          </div>\n        </li>'),a.innerHTML=e}}}))}();

步骤3：在分区内添加 recent-view.liquid

{% schema %} { "name": "历史浏览", "settings": [], "presets": [ { "name": "历史浏览" } ] } {% endschema %} <section class="collection page-width" id="history">  <ul id="history-product-grid" class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop">  </ul> </section> <script src="{{ 'setions_recent-view.js' | asset_url }}" defer="defer"></script>

步骤4：创建 page.recent-view.json模板

{  "sections": {    "main": {      "type": "recent-view"    }  },  "order": [    "main"  ] }

完成以上步骤最近查看页面将添加成功

然在后台添加页面选择recent-view模板