Liquid、JavaScriptなどに関する質問
こんにちは。Shopify初心者です。
表題について、もしお分かりの方がいらっしゃいましたら、ご教示いただけますと幸いでございます。
1.使用中のテーマ
Prestige 9.3.0
2.ご相談事項
セクション「Logo list」を使用して商品カテゴリを作成したいのですが、画像の下部にリンク付けしたテキストを設置するにはどのような設定が必要でしょうか?
デフォルトでは画像の追加と画像へのリンク付けが可能な状態です。
何卒よろしくお願い申し上げます。
logo-list.liquidのコードを編集することで対応可能です。あくまで簡易的な実装例としては、
①テキスト入力欄を作ります。
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"unit": "px",
"step": 10,
"label": "t:sections.logo_list.blocks.logo.logo_width",
"default": 120
},
{
"type": "text",
"id": "logo-text",
"label": "テキスト"
},
{
"type": "url",
"id": "link",
"label": "t:global.text.link"
}
このような形で "type": "text"のところを追記すると、カスタマイズ画面でテキスト入力欄が表示されます。
②入力したテキストが反映されるようにするには、
<a class="logo-list__item" href="{{ block.settings.link }}" style="{% render 'surface', background: section.settings.logo_item_background %}" {{ block.shopify_attributes }}>
{{- block_content -}}
<p>{{ block.settings.logo-text }}</p>
</a>
{%- else -%}
<div class="logo-list__item" {{ block.shopify_attributes }} style="{% render 'surface', background: section.settings.logo_item_background %}">
{{- block_content -}}
<p>{{ block.settings.logo-text }}</p>
</div>
このような形で<p>{{ block.settings.logo-text }}</p>を挿入します。デザインはCSSで調整してください。