如何使Shopify 按国家/地区自定义内容

你是否想让的shopify商店针对不同的国家和地区显示不同的内容?

现在,您可以根据客户的购物来源为他们提供独家内容或产品,从而进一步改善客户的客户体验,例如:

  • 向不同国家/地区显示不同的主页横幅
  • 在未配送至特定国家/地区的产品系列页面上隐藏商品
  • 根据国家/地区更改产品页面上的内容

在本教程中,我们将介绍如何向目标国家或地区提供内容和产品,以便提升店铺的整体体验。让我们开始吧。

按国家或地区自定义内容的先决条件

注意:这是一个高级教程,需要 Shopify Liquid 知识。

首先,您需要登录商店,并拥有访问在线商店主题编辑和产品的权限,这就是我们将要工作的地方。这可以是您自己的商店,也可以是客户商店中的合作者账户。

本教程用Dawn主题作为示例

其次,你的网站需要添加国家/地区选择器

Dawn 内置了国家/地区选择器。

最后,您应该熟悉localizationcountry Liquid 对象才能利用本教程。

如何在 Shopify 中按国家/地区自定义内容

使用localization 和country对象,你可以让内容根据国家和地区显示:

{% if localization.country.iso_code == 'FR' %}
  // show custom content only meant for France
{% else %}
  show generic content
{% endif %}

注意:您应该使用国家/地区 ISO 代码,而不是localization.country.name .当您提供多种语言时,国家/地区名称将被翻译,并导致条件内容仅以一种语言工作。

这种方法可以以多种方式使用,我们将使用 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

  • 什么是 Shopify Plus?

    2024年11月22日
  • 如何为客户定制Shopify电子邮件通知

    2024年11月26日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注