FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください
現在コミュニティを移動しています!7月7日以降、現在のコミュニティは約2週間読み取り専用となります。期間中はコンテンツの閲覧は可能ですが、一時的に新規投稿や返信はできなくなります。詳しくはこちら

セクション「Logo list」を使用した商品カテゴリの作成について

セクション「Logo list」を使用した商品カテゴリの作成について

雪だるま
新規メンバー
5 0 0

こんにちは。Shopify初心者です。
表題について、もしお分かりの方がいらっしゃいましたら、ご教示いただけますと幸いでございます。

 

1.使用中のテーマ
Prestige 9.3.0

 

2.ご相談事項
セクション「Logo list」を使用して商品カテゴリを作成したいのですが、画像の下部にリンク付けしたテキストを設置するにはどのような設定が必要でしょうか?
デフォルトでは画像の追加と画像へのリンク付けが可能な状態です。

 

何卒よろしくお願い申し上げます。

1件の返信1

株式会社ナレッジサービス
Shopify Partner
71 30 28

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で調整してください。