Recustomer Tracking for Shopify では、shopifyストア内へ配送追跡blockを埋め込むことができ、
併せて、Recustomer Trackingのドメインの設定も可能になります。
下記の手順をご参照ください。
1．新しいセクションの追加
Shopify管理画面 →オンラインストア →テーマ → アクション → コードを編集
新しいセクションの追加 → recustomer-tracking.liquidの作成
2.コードの追加
下記ソースコードを1で作成したrecustomer-tracking.liquidにそのままペーストし保存。
**先にテーマのバックアップを作成しておくことを推奨します。
{%- style -%}
{% assign header_font = section.settings.header_font %}
{{ header_font | font_face }}
{% assign header_font_bold = header_font | font_modify: 'weight', 'bolder' %}
{% assign header_font_italic = header_font | font_modify: 'style', 'italic' %}
{% assign header_font_bold_and_italic = header_font_bold | font_modify: 'style', 'italic' %}
{{ header_font_bold | font_face }}
{{ header_font_italic | font_face }}
{{ header_font_bold_and_italic | font_face }}
.recustomer-banner {
background-color: {{ section.settings.background_color }};
{%- if section.settings.background_image != blank -%}
background-image: url('{{ section.settings.background_image | image_url }}');
background-position: center;
background-repeat: {{ section.settings.background_repeat }};
background-size: {{ section.settings.background_size }};
{%- endif -%}
min-height: {{ section.settings.height }}px;
padding: {{ section.settings.padding }}px;
}
.recustomer-banner-align--center {
justify-content: center;
text-align: center;
}
.recustomer-banner-align--left {
justify-content: flex-start;
text-align: left;
}
.recustomer-banner-align--right {
justify-content: flex-end;
text-align: right;
}
.recustomer-banner-col {
align-items: center;
display: flex;
}
.recustomer-banner-col-img {
max-height: {{ section.settings.height }}px;
}
.recustomer-banner-header {
font-family: {{ section.settings.header_font.family }};
font-size: {{ section.settings.header_font_size }}px;
font-style: {{ section.settings.header_font.style }};
font-weight: {{ section.settings.header_font.weight }};
margin: 0;
padding-bottom: {{ section.settings.header_padding_bottom }}px;
padding-top: {{ section.settings.header_padding_top }}px;
width: 100%;
}
.recustomer-banner-header-row {
background-color: {{ section.settings.header_background_color }};
margin-bottom: {{ section.settings.header_margin_bottom }}px;
}
.recustomer-banner-img {
display: block;
max-height: {{ section.settings.height }}px;
}
.recustomer-banner-row {
display: flex;
}
.recustomer-banner-width{
width: 50%;
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
.recustomer-banner-col {
flex-basis: auto;
width: 100%;
}
.recustomer-banner-col-img,
.recustomer-banner-img {
display: none;
}
.recustomer-banner-width{
width: 100%;
}
}
{%- endstyle -%}
<div class="recustomer-banner">
{%- if section.blocks.size > 0 -%}
<div class="recustomer-banner-row">
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'image' -%}
{%- if block.settings.image != blank -%}
{%- if block.settings.image_width != blank -%}
{%- assign srcset = block.settings.image | image_url: width: block.settings.image_width -%}
{%- capture style -%}max-width: min(100%, {{ block.settings.image_width }}px);{%- endcapture -%}
{%- else -%}
{%- assign srcset = block.settings.image | image_url -%}
{%- endif -%}
<div class="recustomer-banner-width recustomer-banner-col recustomer-banner-col-img recustomer-banner-align--{{ block.settings.image_horizontal_alignment }}">
{%- if block.settings.image_link_url != blank -%}
<a href="{{block.settings.image_link_url}}" target="_blank">
{%- endif -%}
<img
alt="{{ block.settings.image.alt | escape }}"
class="recustomer-banner-img"
loading="lazy"
src="{{ block.settings.image | image_url }}"
srcset="{{ srcset }}"
{%- if style -%}style="{{ style }}"{%- endif -%}
>
{%- if block.settings.image_link_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
{%- when '@app' -%}
<div class="recustomer-banner-col recustomer-banner-width">
<div class="tracking__block__center">
{% render block %}
</div>
</div>
{%- endcase -%}
{%- endfor -%}
{%- if section.blocks.size > 0 -%}
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": "Recustomer Tracking",
"blocks": [
{
"limit": 1,
"name": "Block",
"type": "block"
},
{
"limit": 1,
"name": "Image",
"settings": [
{
"id": "image",
"label": "Image",
"type": "image_picker"
},
{
"default": "center",
"id": "image_horizontal_alignment",
"label": "Horizontal Alignment",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
],
"type": "select"
},
{
"id": "image_link_url",
"label": "Image link URL",
"type": "url"
},
{
"id": "image_width",
"label": "Image width",
"type": "text"
}
],
"type": "image"
},
{
"type": "@app"
}
],
"presets": [
{
"name": "recustomer tracking"
}
],
"settings": [
{
"content": "全体設定",
"type": "header"
},
{
"default": "500",
"id": "height",
"label": "Height",
"type": "text"
},
{
"default": "0",
"id": "padding",
"label": "Padding",
"type": "text"
},
{
"default": "transparent",
"id": "background_color",
"label": "Background color",
"type": "color"
},
{
"content": "背景画像",
"type": "header"
},
{
"id": "background_image",
"label": "Background image",
"type": "image_picker"
},
{
"default": "repeat",
"id": "background_repeat",
"label": "Background repeat",
"options": [
{
"label": "No Repeat",
"value": "no-repeat"
},
{
"label": "Repeat",
"value": "repeat"
},
{
"label": "Repeat X",
"value": "repeat-x"
},
{
"label": "Repeat Y",
"value": "repeat-y"
},
{
"label": "Round",
"value": "round"
},
{
"label": "Space",
"value": "space"
}
],
"type": "select"
},
{
"default": "auto",
"id": "background_size",
"label": "Background size",
"options": [
{
"label": "Auto",
"value": "auto"
},
{
"label": "Contain",
"value": "contain"
},
{
"label": "Cover",
"value": "cover"
}
],
"type": "select"
}
]
}
{% endschema %}
3.Recustomer bannerを追加
Shopify管理画面 →オンラインストア → テーマ →カスタマイズより追跡blockを表示したいページにて[セクションの追加] をクリック。
Recustomer trackingを追加します。
4.Tracking Blockの追加
追加したセクションをクリックし追加できます。
アプリ追加：右側の配送確認ブロックが表示
image：左側のイメージ画像が表示
5.ドメインの設定
RecustomerアプリのTracking管理画面のページ設定 → URL変更より
”Headless Trackingの場合はこちら”をcheckにして配送追跡blockを追加したshopifyストアのドメインをこちらに設定できます。(例: https://recustomer.myshopify.com)
