最近瀏覽的產(chǎn)品列表是提高用戶轉(zhuǎn)化率的一種有效方式，可以在Shopify平臺(tái)的在線零售商店中展示。然而，Shopify缺乏原生解決方案，只有少數(shù)插件和應(yīng)用程序可供選擇，其中很多需要每月會(huì)員資格或公開商店數(shù)據(jù)給第三方。這些插件和應(yīng)用程序并沒有提供令人驚艷的核心功能。

本教程將告訴您如何在Shopify中添加最近瀏覽的產(chǎn)品，使客戶可以快速查看他們最近瀏覽的產(chǎn)品并促進(jìn)銷售交易。這對(duì)于達(dá)到銷售高峰至關(guān)重要?，F(xiàn)在就開始吧！

在 Shopify 中添加最近瀏覽產(chǎn)品的好處

理想的客戶確切地知道他們想要什么，找到它，一到達(dá)您的網(wǎng)站就購買，并且可能會(huì)寫一篇好評(píng)。

不幸的是，并不是每個(gè)客戶都是理想的，賣家必須關(guān)注他們并引導(dǎo)我們潛在買家在網(wǎng)站上的一舉一動(dòng)。

所以，在花錢提升品牌知名度之后，你需要讓消費(fèi)者輕松找到他們想要的東西，并毫不猶豫地立即購買。

您只有幾秒鐘的時(shí)間來充分利用普通在線客戶本已受限的注意力，他們經(jīng)常在購買過程中迷失方向。

也許他們確實(shí)發(fā)現(xiàn)了他們正在尋找的物品，但在購買前不久由于某種原因而偏離了軌道并失去了興趣。

• 最好的選擇之一是提醒他們上次查看的產(chǎn)品，以便他們可以返回并繼續(xù)他們開始購買。這項(xiàng)服務(wù)可能看起來是一種低成本的選擇，但它被數(shù)字銷售行業(yè)的重要競爭者所利用，例如 eBay 和亞馬遜。這是一種獨(dú)特的技術(shù)，可以挽回原本會(huì)丟失的消費(fèi)者，但為什么呢？互聯(lián)網(wǎng)市場上最著名的品牌確實(shí)在使用它，這很舒服，但為什么有益呢？以下是您可能會(huì)看到的一些好處：

• 它延長了人們?cè)谀木W(wǎng)站上花費(fèi)的時(shí)間，獎(jiǎng)勵(lì)導(dǎo)航。它會(huì)自動(dòng)引導(dǎo)他們找到他們可能感興趣的商品（而不是讓他們漫無目的地瀏覽幾個(gè)頁面）。

• 它提高了消費(fèi)者的忠誠度，因?yàn)樗麄兿嘈派痰陮?duì)他們和他們想要的東西感興趣，使他們感到相關(guān)。

• 對(duì)于通知電子郵件，您有機(jī)會(huì)重新吸引原本會(huì)永遠(yuǎn)消失的消費(fèi)者。

• 它有可能提高您的轉(zhuǎn)化率！

如何在 Shopify 中添加最近瀏覽產(chǎn)品

步驟1：在資產(chǎn)內(nèi)添加 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：在資產(chǎn)內(nèi)添加 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：在分區(qū)內(nèi)添加 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：創(chuàng)建 page.recent-view.json模板

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

完成以上步驟最近查看頁面將添加成功

然在后臺(tái)添加頁面選擇recent-view模板