向购物车网页页面添加“再次购物”连接

备注名称

假如您应用Shopify的完全免费模板，您可以联络Shopify适用精英团队得到有关此实例教程的协助。此实例教程必须15分鐘的制定时长。若要掌握详细信息，客户程序Supportforthemes。

备注名称

此自定用以复古时尚Shopify模板，不适感用以“OnlineStore2.0”模板。

寻找您的模板构架版本号

探寻“OnlineStore2.0”模板自定

您可以将再次购物连接添加到购物车网页页面，使用户在将商品添加到购物车子可轻轻松松回到访问商品。您可以挑选添加一个连接，用以将顾客定项回目录网页页面、您的首页或她们以前查询的最后一个系列产品网页页面。

向购物车页面添加“再次购物”连接

若想向您的购物车网页页面添加再次购物连接，请实行下列实际操作：

PC：

在Shopify后台管理中，转到在线商店模板。

寻找要编写的模板，随后点一下实际操作编写代码。

在Sections文件目录中，点一下cart-template.liquid。假如您的模板中并没有此文档，则点一下Templates文件目录中的cart.liquid。

根据检索name=checkout的资料来搜索付款按钮的代码。结账按钮的代码行因模板而异，但会如下所示所显示：

buttontype=submitid=checkoutname=checkoutclass=btn{{cart.general.checkout|t}}/button

下一步是粘贴新的代码行以建立再次购物连接。您粘贴的代码将在于您期待连接转至的网页页面：

ios系统：

在Shopify运用中，轻按店铺。

在营销渠道一部分中，轻按在线商店。

轻触Managethemes（管理方法模板）。

寻找要编写的模板，随后点一下实际操作编写代码。

在Sections文件目录中，点一下cart-template.liquid。假如您的模板中并没有此文档，则点一下Templates文件目录中的cart.liquid。

根据检索name=checkout的资料来搜索付款按钮的代码。结账按钮的代码行因模板而异，但会如下所示所显示：

buttontype=submitid=checkoutname=checkoutclass=btn{{cart.general.checkout|t}}/button

下一步是粘贴新的代码行以建立再次购物连接。您粘贴的代码将在于您期待连接转至的网页页面：

安卓手机系统：

在Shopify运用中，轻按店铺。

在营销渠道一部分中，轻按在线商店。

轻触Managethemes（管理方法模板）。

寻找要编写的模板，随后点一下实际操作编写代码。

在Sections文件目录中，点一下cart-template.liquid。假如您的模板中并没有此文档，则点一下Templates文件目录中的cart.liquid。

根据检索name=checkout的资料来搜索付款按钮的代码。结账按钮的代码行因模板而异，但会如下所示所显示：

buttontype=submitid=checkoutname=checkoutclass=btn{{cart.general.checkout|t}}/button

下一步是粘贴新的代码行以建立再次购物连接。您粘贴的代码将在于您期待连接转至的网页页面：

针对偏向文件目录网页页面的连接

若要添加偏向文件目录网页页面的连接，请将下边代码粘贴到付款按钮相匹配代码以前或以后的新行中：

ahref=/collections/alltitle=ContinueshoppingContinueshopping/a

针对偏向首页的连接

若要添加偏向您的首页的连接，请将下边代码粘贴到付款按钮相匹配代码以前或以后的新行中：

ahref=/title=ContinueshoppingContinueshopping/a

针对偏向上一个查询的系列产品的连接

若要添加偏向上一个查询的系列产品的连接，请将下边代码粘贴到付款按钮相匹配代码以前或以后的新行中：

aid=continue-shoppinghref=title=ContinueshoppingContinueshopping/a

点一下储存。假如您添加了偏向文件目录网页页面或首页的连接，则实际操作已经完成。假如您添加了偏向上一个查询的系列产品的连接，则必须向您的模板代码中添加一些JavaScript。随后再次依照后面流程实际操作。

在Layout文件目录中，点一下theme.liquid。

在文档底端周边搜索完毕/body标识。将下列代码粘贴到完毕/body标识上边：

scriptif(Storage!==undefined){vardefaultLink=/collections/all;{%iftemplatecontainscollection%}sessionStorage.collection={{collection.url}};{%endif%}{%iftemplatecontainscart%}if(!sessionStorage.collection){sessionStorage.collection=defaultLink;}document.getElementById(continue-shopping).href=sessionStorage.collection;{%endif%}}/script

点一下储存。

添加按钮款式（可选）

假如您应用完全免费的Shopify模板，则可以将款式运用于再次购物连接，使它展现按钮的外型。根据向按钮连接的代码中添加类特性，您可以使您的按钮与模板中别的按钮的款式配对。全部完全免费Shopify模板都对主按钮款式应用同样的类名字，而且大部分该类模板对协助按钮款式应用同样的类名字。

若想向“再次购物”连接运用关键按钮款式，请实行下列实际操作：

将特性class=btn添加到您已粘贴的代码行中，便于添加再次购物连接。您的代码应如下所示所显示：

ahref=/collections/alltitle=Continueshoppingclass=btnContinueshopping/a

若想向“再次购物”连接运用协助按钮款式，请实行下列实际操作：

备注名称：添加该类对Boundless并没有危害。

假如您采用的是Supply之外的完全免费模板，请将特性class=btn--secondary添加到您已粘贴的代码行中，便于添加再次购物连接。您的代码应如下所示所显示：

ahref=/collections/alltitle=Continueshoppingclass=btn--secondaryContinueshopping/a

假如您应用Supply，请将特性class=btn-secondary添加到您已粘贴的代码行，便于添加再次购物连接。您的代码应如下所示所显示：

ahref=/collections/alltitle=Continueshoppingclass=btn-secondaryContinueshopping/a

Shopify商家官方网站全文详细信息：

Addacontinueshoppinglinktoyourcart

Note

IfyouuseafreethemefromShopify,thenyoumightbeabletocontactShopifySupportforhelpwiththistutorial.Itrequires15minutesofdesigntime.Tolearnmore,refertoSupportforthemes.

Note

ThiscustomizationisforvintageShopifythemes,anddoesntapplytoOnlineStore2.0themes.

Findoutyourthemesarchitectureversion

ExploreOnlineStore2.0themecustomizations

YoucanaddaContinueshoppinglinktoyourcartpagethatallowscustomerstoeasilyreturntobrowsingproductsafteraddingsomethingtothecart.Youcanchoosetoaddalinkthatwilltakecustomersbacktoyourcatalogpage,backtoyourhomepage,orbacktothelastcollectionpagethattheywerelookingat.

AddaContinueshoppinglinktoyourcartpage

ToaddaContinueshoppinglinktoyourcartpage:

PC:

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheSectionsdirectory,clickcart-template.liquid.Ifyourthemedoesnthavethisfile,thenclickcart.liquidintheTemplatesdirectory.

FindthecodefortheCheckoutbuttonbysearchingthefileforname=checkout.Thelineofcodeforthecheckoutbuttonvariesthemetotheme,butwilllooksomethinglikethis:

buttontype=submitid=checkoutname=checkoutclass=btn{{cart.general.checkout|t}}/button

ThenextstepistopasteanewlineofcodetocreateaContinueshoppinglink.Thecodethatyoupastewilldependonwhichpageyouwouldlikethelinktogoto:

Foralinkthatgoestoyourcatalogpage

Toaddalinkthatgoestoyourcatalogpage,pastethefollowingcodeonanewlineeitherbeforeorafterthecodefortheCheckoutbutton:

ahref=/collections/alltitle=ContinueshoppingContinueshopping/a

iPhone：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheSectionsdirectory,clickcart-template.liquid.Ifyourthemedoesnthavethisfile,thenclickcart.liquidintheTemplatesdirectory.

FindthecodefortheCheckoutbuttonbysearchingthefileforname=checkout.Thelineofcodeforthecheckoutbuttonvariesthemetotheme,butwilllooksomethinglikethis:

buttontype=submitid=checkoutname=checkoutclass=btn{{cart.general.checkout|t}}/button

ThenextstepistopasteanewlineofcodetocreateaContinueshoppinglink.Thecodethatyoupastewilldependonwhichpageyouwouldlikethelinktogoto:

Foralinkthatgoestoyourcatalogpage

Toaddalinkthatgoestoyourcatalogpage,pastethefollowingcodeonanewlineeitherbeforeorafterthecodefortheCheckoutbutton:

ahref=/collections/alltitle=ContinueshoppingContinueshopping/a

Android：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheSectionsdirectory,clickcart-template.liquid.Ifyourthemedoesnthavethisfile,thenclickcart.liquidintheTemplatesdirectory.

FindthecodefortheCheckoutbuttonbysearchingthefileforname=checkout.Thelineofcodeforthecheckoutbuttonvariesthemetotheme,butwilllooksomethinglikethis:

buttontype=submitid=checkoutname=checkoutclass=btn{{cart.general.checkout|t}}/button

ThenextstepistopasteanewlineofcodetocreateaContinueshoppinglink.Thecodethatyoupastewilldependonwhichpageyouwouldlikethelinktogoto:

Foralinkthatgoestoyourcatalogpage

Toaddalinkthatgoestoyourcatalogpage,pastethefollowingcodeonanewlineeitherbeforeorafterthecodefortheCheckoutbutton:

ahref=/collections/alltitle=ContinueshoppingContinueshopping/a

Foralinkthatgoestoyourhomepage

Toaddalinkthatgoestoyourhomepage,pastethefollowingcodeonanewlineeitherbeforeorafterthecodefortheCheckoutbutton:

ahref=/title=ContinueshoppingContinueshopping/a

Foralinkthatgoestothelastcollectionviewed

Toaddalinkthatgoestothelastcollectionviewed,pastethefollowingcodeonanewlineeitherbeforeorafterthecodefortheCheckoutbutton:

aid=continue-shoppinghref=title=ContinueshoppingContinueshopping/a

ClickSave.Ifyouaddedalinkthatgoestoeitheryourcatalogpageoryourhomepage,thenyouaredone.Ifyouaddedalinkthatgoestothelastcollectionviewed,thenyouwillneedtoaddsomeJavaScripttoyourthemecode.Continuetofollowthenextsteps.

IntheLayoutdirectory,clicktheme.liquid.

Findtheclosing/bodytag,nearthebottomofthefile.Pastethefollowingcodeabovetheclosing/bodytag:

scriptif(Storage!==undefined){vardefaultLink=/collections/all;{%iftemplatecontainscollection%}sessionStorage.collection={{collection.url}};{%endif%}{%iftemplatecontainscart%}if(!sessionStorage.collection){sessionStorage.collection=defaultLink;}document.getElementById(continue-shopping).href=sessionStorage.collection;{%endif%}}/script

ClickSave.

Addbuttonstyling(optional)

IfyouuseafreeShopifytheme,thenyoucanapplystylingtoyourContinueshoppinglinktomakeitlooklikeabutton.Byaddingaclassattributetothecodeforyourbuttonlink,youcanmakeyourbuttonmatchthestyleoftheotherbuttonsinyourtheme.AllfreeShopifythemesusethesameclassnameforprimarybuttonstyles,andmostusethesameclassnameforsecondarybuttonstyles.

ToapplyprimarybuttonstylingtoyourContinueshoppinglink:

Addtheattributeclass=btntothelineofcodethatyoupastedtoaddaContinueshoppinglink.Yourcodeshouldlooklikethis:

ahref=/collections/alltitle=Continueshoppingclass=btnContinueshopping/a

ToapplysecondarybuttonstylingtoyourContinueshoppinglink:

Note

AddingthisclasswillnothaveaneffectonBoundless.

IfyouuseafreethemethatisnotSupply,thenaddtheattributeclass=btn--secondarytothelineofcodethatyoupastedtoaddaContinueshoppinglink.Yourcodeshouldlooklikethis:

ahref=/collections/alltitle=Continueshoppingclass=btn--secondaryContinueshopping/a

IfyouuseSupply,thenaddtheattributeclass=btn-secondarytothelineofcodethatyoupastedtoaddaContinueshoppinglink.Yourcodeshouldlooklikethis:

ahref=/collections/alltitle=Continueshoppingclass=btn-secondaryContinueshopping/a

文章内容由来：Shopify商户官方网站