shopify向产品页面添加尺寸图表之代码片段设置步骤

导航到代码编辑器PC：在 Shopify 后台中，转到在线商店>模板。找到要编辑的模板，然后点击操作>编辑代码。苹果系统：在Shopify 应用中，轻触商店。在销售渠道部分中，轻触在线商店

目录

• 答案
• 文章目录
• shopify向产品页面添加尺寸图表之代码片段设置步骤详细回答

shopify向产品页面添加尺寸图表之代码片段设置步骤详细回答

导航到代码编辑器

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

选择以下内容之一，然后创建尺寸图表代码片段

• Site wide

• Product type

• Product vendor

备注：选择“网站宽度”会在具有尺寸选项的所有产品页面上显示尺寸图表。

创建尺寸图表代码片段

1. 在 Snippets 目录中点击添加新片段。

2. 将代码片段命名为 size-chart，然后点击创建代码片段：

1. 将以下内容复制到您的 size-chart 代码片段中：

<div class="pop-up-modal">   <div class="pop-up-content">     <span class="close-button">&times;</span>     <span class="size-chart-content">{{ pages.size-chart.content }}</span>   </div> </div> <script>   const modal = document.querySelector('.pop-up-modal');   const trigger = document.querySelector('.trigger-pop-up');   const closeButton = document.querySelector('.close-button');   function toggleModal() {     modal.classList.toggle('show-pop-up');   }   function windowOnClick(event) {     if (event.target === modal) {       toggleModal();     }   }   trigger.addEventListener('click', toggleModal);   closeButton.addEventListener('click', toggleModal);   window.addEventListener('click', windowOnClick); </script> <style>   .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: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;   }   .pop-up-content {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     background-color: white;     padding: 1rem 1.5rem;     width: auto;     border-radius: 0.5rem;   }   .pop-up-content table {     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: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;   }   .trigger-pop-up {     margin: 10px 0 10px 0;     width: 100%;   }   @media only screen and (max-width: 749px) {     .pop-up-content,     .size-chart-content table {       width: 100%;     }     .size-chart-content th,     .size-chart-content td {       padding: 10px;     }   } </style>

备注：需要针对模板 Simple 和 Minimal 的 CSS 样式执行一些更改。

如果您使用的是 Simple 模板，请将从 .trigger-pop-up 直到 </style> 上方的内容替换为以下代码：

.trigger-pop-up {   margin: 10px 0 10px 8px;   width: 50%; } @media only screen and (max-width: 749px) {   .pop-up-content,   .size-chart-content table {     width: 100%;   }   .size-chart-content th,   .size-chart-content td {     padding: 10px;   }   .trigger-pop-up {     width: 100%;   } }

如果您要使用 Minimal 模板，请在结束 </style> 标记上方添加以下代码：

@media only screen and (min-width: 750px) {   .trigger-pop-up {     width: 50%;   } }

将尺寸图表代码片段添加到您的 theme.liquid 中

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

2. 找到结束 </body> 标记。在结束 </body> 标记正上方粘贴以下代码：

{% if request.page_type == 'product' %}     {% if product.options contains 'Size' %}         {% render 'size-chart' %}     {% endif %} {% endif %}

添加尺寸图表按钮

1. 在 Sections 目录中，点击打开 product-template.liquid 文件，如果没有 product-template.liquid 文件，则点击打开 product.liquid 文件。

2. 将以下代码粘贴到添加到购物车按钮上方：

{% if product.options contains 'Size' %}     <a class="trigger-pop-up btn">See Size Chart</a> {% endif %}

“添加到购物车”按钮的代码通常以 <button type="submit" name="add" 开头。如果您商店的运营语言不是英语，请将 See Size Chart 替换为您首选使用的文本。

备注：在 Narrative 模板中，您需要在 Snippets 目录中的 product-form.liquid 文件中插入上述代码

Shopify商户官网原文详情：

Navigate to the Code Editor

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

Choose one of the following and create a size chart snippet

• Site wide

•  

• Product type

•  

• Product vendor

Note

Choosing Site wide displays the Size Chart on all product pages that has a Size option.

Creating a size chart snippet

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet size-chart, and click Create snippet:

1. Copy the following into your size-chart snippet:

<div class="pop-up-modal">   <div class="pop-up-content">     <span class="close-button">&times;</span>     <span class="size-chart-content">{{ pages.size-chart.content }}</span>   </div> </div> <script>   const modal = document.querySelector('.pop-up-modal');   const trigger = document.querySelector('.trigger-pop-up');   const closeButton = document.querySelector('.close-button');   function toggleModal() {     modal.classList.toggle('show-pop-up');   }   function windowOnClick(event) {     if (event.target === modal) {       toggleModal();     }   }   trigger.addEventListener('click', toggleModal);   closeButton.addEventListener('click', toggleModal);   window.addEventListener('click', windowOnClick); </script> <style>   .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: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;   }   .pop-up-content {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     background-color: white;     padding: 1rem 1.5rem;     width: auto;     border-radius: 0.5rem;   }   .pop-up-content table {     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: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;   }   .trigger-pop-up {     margin: 10px 0 10px 0;     width: 100%;   }   @media only screen and (max-width: 749px) {     .pop-up-content,     .size-chart-content table {       width: 100%;     }     .size-chart-content th,     .size-chart-content td {       padding: 10px;     }   } </style>

Note

There are some changes that need to be made to the CSS styling for the themes Simple and Minimal.

If you are using the theme Simple replace from .trigger-pop-up to right above </style> with this code:

.trigger-pop-up {   margin: 10px 0 10px 8px;   width: 50%; } @media only screen and (max-width: 749px) {   .pop-up-content,   .size-chart-content table {     width: 100%;   }   .size-chart-content th,   .size-chart-content td {     padding: 10px;   }   .trigger-pop-up {     width: 100%;   } }

If you are using the theme Minimal add the following code above the closing </style> tag:

@media only screen and (min-width: 750px) {   .trigger-pop-up {     width: 50%;   } }

Add the size chart snippet into your theme.liquid

1. In the Layout directory, click to open your theme.liquid file.

2. Find the closing </body> tag. Right above the closing </body> tag, paste the following code:

{% if request.page_type == 'product' %}     {% if product.options contains 'Size' %}         {% render 'size-chart' %}     {% endif %} {% endif %}

Add a Size chart button

1. In the Sections directory, click to open your product-template.liquid file or product.liquid file if you do not have a product-template.liquid file.

2. Paste the following code above the Add to cart button:

{% if product.options contains 'Size' %}     <a class="trigger-pop-up btn">See Size Chart</a> {% endif %}

The Add to cart button typically starts with something like <button type="submit" name="add". If your store's operating language is not English, then replace See Size Chart with the text that you prefer to use.

Note

In the theme Narrative you need to insert the above code within the product-form.liquid file that is located in the Snippets directory

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