Shopifyのテーマ「DAWN」で、「複数列」のセクションのボタンを2つにする方法を解説します。
完成イメージ↓
「セクション」フォルダ内のmultirow.liquidファイルを選択し、schemaに下記を追記します。
変更前：
{
"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のリンク"
}これでカスタマイズ画面にボタン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;
}
}
{% comment %} 以下を追記します {% endcomment %}
.button-area{
display: flex;
gap: 16px;
}
{%- endstyle -%}
ウェブに関することなら、
何でもお気軽にご相談ください。