导航到代码编辑器
PC:
在 Shopify 后台中,转到在线商店 > 模板。
找到要编辑的模板,然后点击操作 > 编辑代码。
苹果系统:
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,然后点击操作 > 编辑代码。
安卓系统:
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,然后点击操作 > 编辑代码。
选择以下内容之一,然后创建尺寸图表代码片段
Site wide
Product type
Product vendor
备注:选择“网站宽度”会在具有尺寸选项的所有产品页面上显示尺寸图表。
创建尺寸图表代码片段
在 Snippets 目录中点击添加新片段。
将代码片段命名为
size-chart
,然后点击创建代码片段:
将以下内容复制到您的
size-chart
代码片段中:
<div class="pop-up-modal"> <div class="pop-up-content"> <span class="close-button">×</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 中
在 Layout 目录中,点击打开您的
theme.liquid
文件。找到结束
</body>
标记。在结束</body>
标记正上方粘贴以下代码:
{% if request.page_type == 'product' %} {% if product.options contains 'Size' %} {% render 'size-chart' %} {% endif %} {% endif %}
添加尺寸图表按钮
在 Sections 目录中,点击打开
product-template.liquid
文件,如果没有product-template.liquid
文件,则点击打开product.liquid
文件。将以下代码粘贴到添加到购物车按钮上方:
{% 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:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
iPhone:
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
Android:
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
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
In the Snippets directory, click Add a new snippet.
Name your snippet
size-chart
, and click Create snippet:
Copy the following into your
size-chart
snippet:<div class="pop-up-modal"> <div class="pop-up-content"> <span class="close-button">×</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
In the Layout directory, click to open your
theme.liquid
file.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
In the Sections directory, click to open your
product-template.liquid
file orproduct.liquid
file if you do not have aproduct-template.liquid
file.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 replaceSee Size Chart
with the text that you prefer to use.
文章内容来源:Shopify商户官方网站