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

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>

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.

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

（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）

常见问答(FQAS)

在shopify后台产品页面的设置中,找到页面元素下的\"尺寸表\"选项,点击添加按钮即可插入尺寸表元素。设置完成后,保存页面即可在前台页面显示尺寸表。

shopify尺寸表默认支持以下单位:英寸(inch)、厘米(cm)、毫米(mm)。您也可以在单位下拉列表中选择其他单位如:英寺(yd)等。

是的,shopify尺寸表元素具有响应式设计,会自动适应不同尺寸的屏幕,保证用户在不同设备上查看时内容呈现正常。

是的,在后台编辑尺寸表时,每个单独尺寸下都可以输入描述文字,以便针对不同尺寸提供详细信息。