轻触Managethemes(管理方法模板)

导航栏到代码编辑器

PC：

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

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

ios系统：

在Shopify运用中，轻触店铺。

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

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

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

安卓手机系统：

在Shopify运用中，轻触店铺。

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

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

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

挑选以下几点之一，随后建立规格数据图表代码精彩片段

Sitewide

Producttype

Productvendor

备注名称：挑选“网址总宽”会在具备规格选择项的任何设备网页页面上表明规格数据图表。

建立规格数据图表代码精彩片段

在Snippets文件目录中点一下加上新精彩片段。

将代码片段取名为size-chart，随后点一下建立代码精彩片段：

将以下几点拷贝到您的size-chart代码精彩片段中：

divclass=pop-up-modaldivclass=pop-up-contentspanclass=close-buttontimes;/spanspanclass=size-chart-content{{pages.size-chart.content}}/span/div/divscriptconstmodal=document.querySelector(.pop-up-modal);consttrigger=document.querySelector(.trigger-pop-up);constcloseButton=document.querySelector(.close-button);functiontoggleModal(){modal.classList.toggle(show-pop-up);}functionwindowOnClick(event){if(event.target===modal){toggleModal();}}trigger.addEventListener(click,toggleModal);closeButton.addEventListener(click,toggleModal);window.addEventListener(click,windowOnClick);/scriptstyle.pop-up-modal{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);opacity:0;display:none;transform:scale(1.1);transition:visibility0slinear0.25s,opacity0.25s0s,transform0.25s;}.pop-up-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;padding:1rem1.5rem;width:auto;border-radius:0.5rem;}.pop-up-contenttable{table-layout:auto;}.close-button{float:right;width:1.5rem;line-height:1.5rem;text-align:center;cursor:pointer;border-radius:0.25rem;background-color:lightgray;}.close-button:hover{background-color:darkgray;}.show-pop-up{z-index:12;opacity:1;display:block;transform:scale(1);transition:visibility0slinear0s,opacity0.25s0s,transform0.25s;}.trigger-pop-up{margin:10px010px0;width:100%;}@mediaonlyscreenand(max-width:749px){.pop-up-content,.size-chart-contenttable{width:100%;}.size-chart-contentth,.size-chart-contenttd{padding:10px;}}/style

备注名称：必须对于模板Simple和Minimal的CSS款式实行一些变更。

假如您采用的是Simple模板，请将从.trigger-pop-up直到/style上边的具体内容更换为下列代码：

.trigger-pop-up{margin:10px010px8px;width:50%;}@mediaonlyscreenand(max-width:749px){.pop-up-content,.size-chart-contenttable{width:100%;}.size-chart-contentth,.size-chart-contenttd{padding:10px;}.trigger-pop-up{width:100%;}}

假如您要应用Minimal模板，请在完毕/style标识上边加上下列代码：

@mediaonlyscreenand(min-width:750px){.trigger-pop-up{width:50%;}}

将规格数据图表代码精彩片段加上到您的theme.liquid中

在Layout文件目录中，点击打开您的theme.liquid文档。

寻找完毕/body标识。在完毕/body标识上方黏贴下列代码：

{%ifrequest.page_type==product%}{%ifproduct.optionscontainsSize%}{%rendersize-chart%}{%endif%}{%endif%}

加上规格数据图表按键

在Sections文件目录中，点击打开product-template.liquid文档，要是没有product-template.liquid文档，则点击打开product.liquid文件。

将下列代码黏贴到加上到加入购物车按键上边：

{%ifproduct.optionscontainsSize%}aclass=trigger-pop-upbtnSeeSizeChart/a{%endif%}

“加上到加入购物车”按键的代码通常以buttontype=submitname=add开始。假如您店铺的经营语言表达不是英语，请将SeeSizeChart更换为您优选应用的文字。

备注名称：在Narrative模板中，您必须在Snippets文件目录中的product-form.liquid文档中插进以上代码

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

NavigatetotheCodeEditor

PC：

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

iPhone：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

Android：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

Chooseoneofthefollowingandcreateasizechartsnippet

Sitewide

Producttype

Productvendor

Note

ChoosingSitewidedisplaystheSizeChartonallproductpagesthathasaSizeoption.

Creatingasizechartsnippet

IntheSnippetsdirectory,clickAddanewsnippet.

Nameyoursnippetsize-chart,andclickCreatesnippet:

Copythefollowingintoyoursize-chartsnippet:

divclass=pop-up-modaldivclass=pop-up-contentspanclass=close-buttontimes;/spanspanclass=size-chart-content{{pages.size-chart.content}}/span/div/divscriptconstmodal=document.querySelector(.pop-up-modal);consttrigger=document.querySelector(.trigger-pop-up);constcloseButton=document.querySelector(.close-button);functiontoggleModal(){modal.classList.toggle(show-pop-up);}functionwindowOnClick(event){if(event.target===modal){toggleModal();}}trigger.addEventListener(click,toggleModal);closeButton.addEventListener(click,toggleModal);window.addEventListener(click,windowOnClick);/scriptstyle.pop-up-modal{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);opacity:0;display:none;transform:scale(1.1);transition:visibility0slinear0.25s,opacity0.25s0s,transform0.25s;}.pop-up-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;padding:1rem1.5rem;width:auto;border-radius:0.5rem;}.pop-up-contenttable{table-layout:auto;}.close-button{float:right;width:1.5rem;line-height:1.5rem;text-align:center;cursor:pointer;border-radius:0.25rem;background-color:lightgray;}.close-button:hover{background-color:darkgray;}.show-pop-up{z-index:12;opacity:1;display:block;transform:scale(1);transition:visibility0slinear0s,opacity0.25s0s,transform0.25s;}.trigger-pop-up{margin:10px010px0;width:100%;}@mediaonlyscreenand(max-width:749px){.pop-up-content,.size-chart-contenttable{width:100%;}.size-chart-contentth,.size-chart-contenttd{padding:10px;}}/style

Note

TherearesomechangesthatneedtobemadetotheCSSstylingforthethemesSimpleandMinimal.

IfyouareusingthethemeSimplereplacefrom.trigger-pop-uptorightabove/stylewiththiscode:

.trigger-pop-up{margin:10px010px8px;width:50%;}@mediaonlyscreenand(max-width:749px){.pop-up-content,.size-chart-contenttable{width:100%;}.size-chart-contentth,.size-chart-contenttd{padding:10px;}.trigger-pop-up{width:100%;}}

IfyouareusingthethemeMinimaladdthefollowingcodeabovetheclosing/styletag:

@mediaonlyscreenand(min-width:750px){.trigger-pop-up{width:50%;}}

Addthesizechartsnippetintoyourtheme.liquid

IntheLayoutdirectory,clicktoopenyourtheme.liquidfile.

Findtheclosing/bodytag.Rightabovetheclosing/bodytag,pastethefollowingcode:

{%ifrequest.page_type==product%}{%ifproduct.optionscontainsSize%}{%rendersize-chart%}{%endif%}{%endif%}

AddaSizechartbutton

IntheSectionsdirectory,clicktoopenyourproduct-template.liquidfileorproduct.liquidfileifyoudonothaveaproduct-template.liquidfile.

PastethefollowingcodeabovetheAddtocartbutton:

{%ifproduct.optionscontainsSize%}aclass=trigger-pop-upbtnSeeSizeChart/a{%endif%}

TheAddtocartbuttontypicallystartswithsomethinglikebuttontype=submitname=add.IfyourstoresoperatinglanguageisnotEnglish,thenreplaceSeeSizeChartwiththetextthatyouprefertouse.

Note

InthethemeNarrativeyouneedtoinserttheabovecodewithintheproduct-form.liquidfilethatislocatedintheSnippetsdirectory

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