67
在您的 Shopify 商店中为产品页面添加尺寸图表是一个非常实用的功能。让我们一起来了解如何通过简单的代码设置来实现这一功能。
在 Shopify 后台中,您可以通过以下步骤进入代码编辑器:
PC 用户:
1. 转到"在线商店" > "模板"
2. 找到要编辑的模板,然后点击"操作" > "编辑代码"
苹果设备用户:
1. 在 Shopify 应用中,轻触"商店"
2. 在"销售渠道"部分中,轻触"在线商店"
3. 轻触"管理模板"
4. 找到要编辑的模板,然后点击"操作" > "编辑代码"
安卓设备用户:
1. 在 Shopify 应用中,轻触"商店"
2. 在"销售渠道"部分中,轻触"在线商店"
3. 轻触"管理模板"
4. 找到要编辑的模板,然后点击"操作" > "编辑代码"
在进入代码编辑器后,您需要在"Snippets"目录中创建一个新的代码片段。点击"添加新片段",将其命名为"size-chart",然后点击"创建代码片段"。
将以下代码复制到您的"size-chart"代码片段中:
```html
{{ pages.size-chart.content }}
[removed]
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);
[removed]
<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: 1;
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;
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` 的内容替换为以下代码:
```css
.trigger-pop-up {
margin: 10px 0 10px;
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;
}
.trigger-pop-up {
width: 100%;
}
}
```
如果您使用的是 Minimal 主题,请在结束 `/style` 标签之前添加以下代码:
```css
@media only screen and (min-width: 750px) {
.trigger-pop-up {
width: 100%;
}
}
```
在 Layout 目录中,打开您的 theme.liquid 文件。找到结束 `/body` 标签,在其正上方粘贴以下代码:
```liquid
{% if request.page_type == 'product' %}
{% if product.options contains 'Size' %}
{% render 'size-chart' %}
{% endif %}
{% endif %}
```
在 Sections 目录中,打开 product-template.liquid 文件(如果没有,则打开 product.liquid 文件)。将以下代码粘贴到"添加到购物车"按钮的上方:
```liquid
{% if product.options contains 'Size' %}
{% endif %}
```
请注意,如果您的商店语言不是英语,请将"See Size Chart"替换为您喜欢使用的文本。
在 Narrative 主题中,您需要在 Snippets 目录的 product-form.liquid 文件中插入上述代码。
Q: 为什么我在产品页面上看不到尺寸图表?
A: 请确保您已经正确地完成了上述所有步骤,包括创建代码片段、将其添加到 theme.liquid 文件中以及在 product-template.liquid 文件中添加按钮。另外,请确保您的产品有"Size"选项。
Q: 如何自定义尺寸图表的内容?
A: 您可以在 Shopify 后台的"在线商店">"页面"中创建一个新页面,并在其中编辑尺寸图表的内容。然后,在上述代码片段中的 `{{ pages.size-chart.content }}` 中引用该页面的内容。
Q: 我可以为不同的产品类型或供应商设置不同的尺寸图表吗?
A: 是的,您可以创建多个代码片段,每个片段针对不同的产品类型或供应商。然后,根据产品的类型或供应商,在 theme.liquid 文件中选择性地渲染相应的代码片段。
