セクション「複数列」にボタンを追加する方法【DAWN】

Shopifyのテーマ「DAWN」で、「複数列」のセクションのボタンを2つにする方法を解説します。

管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

「セクション」フォルダ内のmultirow.liquidフファイルを選択します。

Schemaに下記を追記します。カスタマイズ画面にボタン2のラベルとリンクの入力欄が表示されます。

変更前：

{
          "type": "text",
          "id": "button_label",
          "default": "t:sections.multirow.blocks.row.settings.button_label.default",
          "label": "t:sections.multirow.blocks.row.settings.button_label.label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.multirow.blocks.row.settings.button_link.label"
        }

変更後：

{
          "type": "text",
          "id": "button_label",
          "default": "t:sections.multirow.blocks.row.settings.button_label.default",
          "label": "t:sections.multirow.blocks.row.settings.button_label.label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.multirow.blocks.row.settings.button_link.label"
        },
        {
          "type": "text",
          "id": "button_label-2",
          "default": "ボタン2のラベル",
          "label": "ボタン2のラベル"
        },
        {
          "type": "url",
          "id": "button_link-2",
          "label": "ボタン2のリンク"
        }

ボタンを表示するために、以下を追記します。

変更前：

{%- if block.settings.button_label != blank -%}
                <a
                  {% if block.settings.button_link == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link }}"
                  {% endif %}
                  class="button button--{{ section.settings.button_style }}"
                >
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}

変更後：

<div class="button-area">
              {%- if block.settings.button_label != blank -%}
                <a
                  {% if block.settings.button_link == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link }}"
                  {% endif %}
                  class="button button--{{ section.settings.button_style }}"
                >
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}

              {%- if block.settings.button_label-2 != blank -%}
                <a
                  {% if block.settings.button_link-2 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link-2 }}"
                  {% endif %}
                  class="button button--{{ section.settings.button_style }}"
                >
                  {{ block.settings.button_label-2 | escape }}
                </a>
              {%- endif -%}
              </div><!-- /.button-area -->

ボタンを横並びにするスタイルを追記します。

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

//以下を追記
  .button-area{
    display: flex;
    gap: 16px;
  }
{%- endstyle -%}

最後に保存をクリックして完了です。