你是否想让的shopify商店针对不同的国家和地区显示不同的内容？
现在，您可以根据客户的购物来源为他们提供独家内容或产品，从而进一步改善客户的客户体验，例如：
- 向不同国家/地区显示不同的主页横幅
- 在未配送至特定国家/地区的产品系列页面上隐藏商品
- 根据国家/地区更改产品页面上的内容
在本教程中，我们将介绍如何向目标国家或地区提供内容和产品，以便提升店铺的整体体验。让我们开始吧。
按国家或地区自定义内容的先决条件
注意：这是一个高级教程，需要 Shopify Liquid 知识。
首先，您需要登录商店，并拥有访问在线商店主题编辑和产品的权限，这就是我们将要工作的地方。这可以是您自己的商店，也可以是客户商店中的合作者账户。
本教程用Dawn主题作为示例
其次，你的网站需要添加国家/地区选择器
Dawn 内置了国家/地区选择器。
最后，您应该熟悉localization 和country Liquid 对象才能利用本教程。
如何在 Shopify 中按国家/地区自定义内容
使用localization 和country对象，你可以让内容根据国家和地区显示：
{% if localization.country.iso_code == 'FR' %}
// show custom content only meant for France
{% else %}
show generic content
{% endif %}这种方法可以以多种方式使用，我们将使用 Shopify 的 Dawn 主题进行展示。
根据国家/地区更改商品内容
假设您有一个客户，他希望将位于特定国家或地区的客户引导至其它网站，而不是向他们显示 Add to cart （添加到购物车） 或 Out of stock （缺货）。
导航到主题部分中的 Dawn，单击 Actions（操作），然后单击 Edit Code（编辑代码），然后找到main-product.liquid。在这里，您可以对第 300 行进行以下更改：
{% comment %}
Replace the Add to Cart button with a link to an external website for products with tags containing do_not_sell_to_UK when the buyer's context is set to the United Kingdom.
{% endcomment %}
{% if product.tags contains "do_not_sell_to_UK" and localization.country.iso_code == 'GB' %}
<p><a href="https://example.com">Go to retailer website</a></p>
{% elsif product.selected_or_first_available_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}您还需要进行一个小的更改，以确保动态结帐按钮也处于隐藏状态，在第 310 行：
{% unless product.tags contains "do_not_sell_to_UK" and localization.country.iso_code == 'GB' %}
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
{% endunless %}
在此示例中，您的客户在英国签订了独家零售商协议的所有产品都带有do_not_sell_to_UK标签，这意味着他们不会在自己的网站上销售这些产品，而是将客户定向到该零售商，而不是 添加到购物车 选项。
根据国家/地区更改产品系列内容
同样，您也可以隐藏这些产品，使其不显示在产品系列页面上。同样，Blue Silk Tuxedo 带有do_not_sell_to_UK标签，为 ，当有人从英国浏览时，我们想通过编辑main-collection-product-grid将其从产品系列页面隐藏起来：
{% comment %}
Hide products on collection pages that are tagged with do_not_sell_to_UK when the buyer's context is set to the United Kingdom.
{% endcomment %}
{% unless product.tags contains "do_not_sell_to_UK" and localization.country.iso_code == 'GB' %}
<li class="grid__item">
{% render 'product-card', product_card_product: product, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, add_image_padding: section.settings.add_image_padding, show_vendor: section.settings.show_vendor, show_image_outline: section.settings.show_image_outline, show_rating: section.settings.show_rating %}
</li>
{% endunless %}
根据国家/地区更改主题分区
您还可以利用localization 和country 对象根据国家/地区更改主题内容，例如主页上的横幅。使用与上述相同的代码
首先，在 Dawn 主题的image-banner.liquid文件中，您可以在主题架构的顶部进行添加：
{% comment %}
Schema that adds a basic text input field to the image banner home page section of Shopify's Dawn theme.
{% endcomment %}
{
"type": "text",
"id": "available_countries",
"label": "Add the ISO code of the country that should see this banner."
}为简洁起见，此示例生成了一个基本文本字
接下来，您可以添加一个控制流语句，该语句将所有内容包装在image-banner.liquid文件中。这段代码将根据在上面的文本字段中输入的国家/地区显示或隐藏部分。
下面是image-banner.liquid整个文件，添加的控制流语句在第 5 行和第 6 行打开，在第 114 行和第 115 行关闭：
{% comment %}
Replace the standard image-banner.liquid file in Shopify's Dawn theme with the below to allow you to show or hide a hero image on the home page based on country.
{% endcomment %}
{% if section.settings.available_countries != blank %}
{% if localization.country.iso_code == section.settings.available_countries %}
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<div id="Banner-{{ section.id }}" class="banner{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
<img
srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}
{{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
src="{{ section.settings.image | img_url: '1500x' }}"
loading="lazy"
alt="{{ section.settings.image.alt | escape }}"
width="{{ section.settings.image.width }}"
height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
{% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
>
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
<img
srcset="{%- if section.settings.image_2.width >= 375 -%}{{ section.settings.image_2 | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.image_2.width >= 1100 -%}{{ section.settings.image_2 | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.image_2.width >= 1500 -%}{{ section.settings.image_2 | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.image_2.width >= 1780 -%}{{ section.settings.image_2 | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.image_2.width >= 2000 -%}{{ section.settings.image_2 | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.image_2.width >= 3000 -%}{{ section.settings.image_2 | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.image_2.width >= 3840 -%}{{ section.settings.image_2 | img_url: '3840x' }} 3840w,{%- endif -%}
{{ section.settings.image_2 | img_url: 'master' }} {{ section.settings.image_2.width }}w"
sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image != blank %}50vw{% else %}100vw{% endif %}"
src="{{ section.settings.image_2 | img_url: '1500x' }}"
loading="lazy"
alt="{{ section.settings.image_2.alt | escape }}"
width="{{ section.settings.image_2.width }}"
height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
{% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
>
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_text_box_position }} page-width">
<div class="banner__box color-{{ section.settings.color_scheme }}">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading {% if block.settings.heading_size == 'medium' %}h1{% else %}h0{% endif %}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank and block.settings.button_label_2 != blank and block.settings.button_link_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_1 | escape }}</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a{% if block.settings.button_link_2 != blank %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_2 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_2 | escape }}</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "spaced-section spaced-section--full-width",
"settings": [
{
"type": "text",
"id": "available_countries",
"label": "Add the ISO code of the country that should see this banner."
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label"
},
{
"type": "select",
"id": "desktop_text_box_position",
"options": [
{
"value": "flex-start",
"label": "t:sections.image-banner.settings.desktop_text_box_position.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_text_box_position.options__2.label"
},
{
"value": "flex-end",
"label": "t:sections.image-banner.settings.desktop_text_box_position.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_text_box_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.image-banner.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.image-banner.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.image-banner.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.image-banner.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.image-banner.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.image-banner.settings.color_scheme.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "medium",
"label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__2.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.blocks.heading.settings.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}现在，您可以将多个横幅添加到主题定制器中，并且通过输入您在“设置”中启用的任何国家或地区的 ISO 代码，在这些国家/地区之间切换将显示不同的主页横幅：
如果未在模板设置中输入国家/地区代码，则模板部分将向所有国家/地区显示。
原文https://www.shopify.com/partners/blog/customize-content-by-country
发表回复