※本ページの手順は、アプリ版のShopifyからだと正常にテーマの編集が反映されない場合があります。 恐れ入りますが、パソコンのブラウザで行っていただきますようお願い申し上げます。
- 1. 全てのテーマにおける共通手順
- 2.「アプリでテーマを拡張する」と出てきた場合の手順
- ※アプリブロックで意図する配置ができない場合
- 3. Liquidコードを自動編集
- ※参考:自動編集機能で挿入されるコードの詳細
- 4.カートページのLiquidコードを手動で編集する場合の手順
1. 全てのテーマにおける共通手順
- Shopify管理画面のメニューからアプリ管理>配送日時指定.amp>導入手順をクリックします。
- インストール先のテーマを選択します。現在ショップでご利用中のOS2.0対応のテーマにインストールする場合は「アプリでのテーマを拡張」を選択します。
現在ショップでご利用中ではないテーマにインストールする場合は、「テーマ一覧から選択して導入」を選択し、インストールするテーマを選択し「次へ」を選択してください。
以降の手順は、ご利用のテーマにより異なります。画面に従って、以下のいずれかの手順にお進みください。
2.「アプリでテーマを拡張する」と出てきた場合の手順
OS2.0対応の一部のテーマでは、コードを編集せずに簡単に導入することが可能です。
1. アプリでテーマを拡張するをクリックします。
2. ストアのカスタマイズ画面 > カートマークをクリックして、カート画面のカスタマイズ画面開きます。
3. 左側メニューのブロックを追加 > アプリより、本アプリを選択してください。
4. プレビューを見ながら、モジュールの位置を調整します。
5. 保存するをクリックして完了です。
※アプリブロックで意図する配置ができない場合
もしライブテーマに影響を与えず、控えのテーマのみで本手順を実行する必要がある場合は、控えのテーマに以下の4つのテンプレートを追加してください。(確認して、すでに同名のテンプレートが設置されていた場合は、対応不要です。)
{{ 'cart-attributes.scss.css' | asset_url | stylesheet_tag }}
<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-date" style="display: none;">
<label for="delivery-date">配送希望日</label>
<input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="なし" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-false" {% unless cart.attributes["配送日の指定"] == "指定する" %} checked{% endunless %}>
<label for="delivery-date-boolean-false" class="delivery-date-boolean-label">指定しない</label>
<input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="指定する" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-true" {% if cart.attributes["配送日の指定"] == "指定する" %} checked{% endif %}>
<label for="delivery-date-boolean-true" class="delivery-date-boolean-label">指定する</label>
<input id="delivery-date" type="date" name="attributes[配送希望日]" value="{{ cart.attributes["配送希望日"] }}" min='{{ "now" | date: "%Y-%m-%d" }}'>
</div>
<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-time" style="display: none;">
<label for="delivery-time">配送時間帯</label>
<select id="delivery-time" name="attributes[配送時間帯]">
<option value="指定なし" {% if cart.attributes["配送時間帯"] == "指定なし" %} selected{% endif %}>指定なし</option>
{% for delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}
<option value="{{ delivery_timezone }}" {% if cart.attributes["配送時間帯"] == delivery_timezone %} selected{% endif %}>{{ delivery_timezone }}</option>
{% endfor %}
</select>
</div>
<script>
window.onload = function() {
var ua = window.navigator.userAgent.toLowerCase();
var is_chrome = ua.indexOf('chrome') > -1;
var is_pc_safari = !is_chrome && ua.indexOf('safari') > -1 && ua.indexOf('mobile') == -1;
var is_ie = ua.indexOf('trident') > -1 || ua.indexOf('msie') > -1;
if (is_ie) {
// カレンダー機能を使えない
$('#delivery-date').remove();
var select_tag = "<select id=\"delivery-date\" name=\"attributes[配送希望日]\">\n";
{% if cart.attributes["配送希望日"] == "" %}
select_tag += "<option value=\"\" selected>指定なし</option>"
{% else %}
select_tag += "<option value=\"\">指定なし</option>"
{% endif %}
{% for i in (0..30) %}
{% assign plus_seconds = 86400 | times:i %}
{% assign option_date = "now" | date:'%s' | plus:plus_seconds | date:"%Y-%m-%d" %}
{% assign option_date_string = "now" | date:'%s' | plus:plus_seconds | date:"%Y-%m-%d (%a)" %}
{% if cart.attributes["配送希望日"] == option_date %}
select_tag += "<option value='{{ option_date }}' selected>{{ option_date_string }}</option>"
{% else %}
select_tag += "<option value='{{ option_date }}'>{{ option_date_string }}</option>"
{% endif %}
{% endfor %}
select_tag += "</select>";
$('.cart-attribute-delivery-date').append(select_tag)
}
}
</script>
{{ 'cart-attributes.scss.css' | asset_url | stylesheet_tag }}
<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-date" style="display: none;">
<label for="delivery-date">配送希望日</label>
<input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="なし" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-false" {% unless cart.attributes["配送日の指定"] == "指定する" %} checked{% endunless %}>
<label for="delivery-date-boolean-false" class="delivery-date-boolean-label">指定しない</label>
<input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="指定する" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-true" {% if cart.attributes["配送日の指定"] == "指定する" %} checked{% endif %}>
<label for="delivery-date-boolean-true" class="delivery-date-boolean-label">指定する</label>
<input id="delivery-date" type="date" name="attributes[配送希望日]" value="{{ cart.attributes["配送希望日"] }}" min='{{ "now" | date: "%Y-%m-%d" }}'>
</div>
<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-time" style="display: none;">
<label for="delivery-time">配送時間帯</label>
<select id="delivery-time" name="attributes[配送時間帯]">
<option value="指定なし" {% if cart.attributes["配送時間帯"] == "指定なし" %} selected{% endif %}>指定なし</option>
{% for delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}
<option value="{{ delivery_timezone }}" {% if cart.attributes["配送時間帯"] == delivery_timezone %} selected{% endif %}>{{ delivery_timezone }}</option>
{% endfor %}
</select>
</div>
.cart-attribute__field {
text-align: right;
margin-top: 20px;
margin-bottom: 20px;
input, select, textarea, label {
width: 100%;
max-width: 400px;
margin-left: auto;
display: block;
}
.delivery-date-boolean {
display: inline-block;
width: auto;
margin-left: 20px;
}
.delivery-date-boolean-label {
display: inline-block;
width: auto;
}
}
<div id="cart-delivery-datetime_section" data-os="1.0" data-timezones="{% for delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}'{{delivery_timezone}}',{%endfor%}"></div>
3. Liquidコードを自動編集
Liquidコードの自動編集の自動編集を実行するをクリックします。その次の画面で、「選択したテーマへのインストールが完了しました」と表示されていたら反映完了です。
※この手順は、OS2.0未対応の無料テーマのみに対応しています。(以下一覧)
Debut / Venture / Simple / Boundless / Supply / Narrative / Brooklyn / Minimal / Express
※参考:自動編集機能で挿入されるコードの詳細
本機能対象の各テーマにおいて、コードの編集内容は以下となっております。挿入されているコードを手動で削除することでモジュールを非表示にしたり、位置を手動で変更することでモジュールの配置を変えることも可能です。
・Debut
1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4.上記テンプレート内、<div class="cart__submit-controls">の手前に{% render"cart-attributes-os1"%}が挿入されています。
・Minimal
1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4.上記テンプレート内、<a class="btn btn--secondary" href="{{ routes.all_products_collection_url }}">{{ 'cart.general.continue_shopping' | t }}</a>の1つ前の行に{% render"cart-attributes-os1"%}が挿入されています。
・Supply
1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Templatesディレクトリの中から、cart.liquid をクリックします。
4.上記テンプレート内、<input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">の1つ前の行に{% render"cart-attributes-os1"%}が挿入されています。
・Narrative ※コード2つ
1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4.上記テンプレート内、<div class="cart-subtotal">の1つ前の行に{% render"cart-attributes-os1"%}が挿入されています。5.Snippets ディレクトリの中から、cart-drawer.liquid をクリックします。6.上記テンプレート内、{% if settings.show_cart_note %}の手前に{% render"cart-attributes-os1"%}が挿入されています。
・Boundless ※コード2つ
1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4.上記テンプレート内、<footer class="cart__footer">の1つ前の行に{% render"cart-attributes-os1"%}が挿入されています。5.Layout ディレクトリの中から、theme.liquid をクリックします。6.上記テンプレート内、{% endraw %}{% if settings.cart_notes_enable %}{% raw %}の手前に{% endraw %}{% render "cart-attributes-os1" %}{% raw %}が挿入されています。
・Brooklyn ※コード2つ
1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Templatesディレクトリの中から、cart.liquid をクリックします。
4.上記テンプレート内、<button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>の手前に{% render"cart-attributes-os1"%}が挿入されています。5.Snippets ディレクトリの中から、ajax-cart-template.liquid をクリックします。6.上記テンプレート内、{% endraw %}{% if settings.cart_notes_enable %}{% raw %}の手前に{% endraw %}{% render "cart-attributes-os1" %}{% raw %}が挿入されています。
※コードの配置は、テーマのアップデートなどにより若干変わる可能性があります。
4.カートページのLiquidコードを手動で編集する場合の手順
※主に、有料テーマをご利用の場合
※OS2.0対応テーマをご利用の場合は、本手順開始前に必ず、こちらを参考にテーマスニペットの再設置、または手動での必要なテンプレートの設置を行ってください。
1. Shopify管理画面の左側メニュー、オンラインストア>テーマをクリックします。「現在のテーマ」内のアクション>コードを編集する を選択するとコード編集画面が表示されます。
※「現在のテーマ」以外のテーマを選択した場合は、選択したテーマで同様の手順を実施してください。
2. 画面左側のディレクトリの中から、cart画面を編集するliquidを開いてください。
cart.liquid
cart-template.liquid
3. 上記liquid内の任意の位置に、以下のコードを設置してください。
{% render"cart-attributes-os1"%}
上記コード設置位置に関しては、必ずここでなければいけないという正解はなく、少なくともcart画面を編集するliquid内であればどこかにコードを挿入すれば、カート画面のどこかにモジュールが設置されます。
ただ、テーマの仕様によって適切な位置とそうでない位置があるかと思いますので、まずは任意の位置にコードを挿入いただきまして、モジュールが見えない、見えづらい、使いづらい場合は、その位置を前後にご調整いただきますようお願い申し上げます。
5. Saveをクリックします。
弊社では同じ環境でのテストができないため具体的な手順を個別でご案内することはできないのですが、有償にはなるものの実際にストア管理の権限をいただき代行で導入させていただくことが可能です。ご希望の場合はお問い合わせくださいませ。