Liquid、JavaScriptなどに関する質問
Debutの標準装備のスライダーを、画像を直接クリックしてリンクに飛ばせるようにしたいです。
デフォルトだとボタンを設置しないとリンクに飛ばせない仕組みになっているので、非常に困っています。
セクションのliquidにどのような記述をすればブロックとして追加できますか?
解決済! ベストソリューションを見る。
成功
管理画面にログインして、「アクション」→「コードの編集」と進み、Sectionsフォルダ内のslideshow.liquidファイルを選択してください。
"zh-TW": "圖片"
}
},
{
"type": "select",
上記のコードを探して、次のように変更します。
"zh-TW": "圖片"
}
},
{
"type": "url",
"id": "image_url",
"label": "URLを入力"
},
{
"type": "select",
次に、下記のコードを探します。
<div
{% unless block_image.alt == blank %}
role="img"
aria-label="{{ block_image.alt | escape }}"
data-alt="{{ block_image.alt | escape }}"
{% endunless %}
class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
data-bg="{{ block_image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: block_image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ block.settings.alignment }};"
data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
上記のコードを、次のように書き換えたら「保存」をクリックします。
<a href="{{ block.settings.image_url }}">
<div
{% unless block_image.alt == blank %}
role="img"
aria-label="{{ block_image.alt | escape }}"
data-alt="{{ block_image.alt | escape }}"
{% endunless %}
class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
data-bg="{{ block_image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: block_image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ block.settings.alignment }};"
data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
</a>
これで「画像スライド」の設定項目にURLの入力欄が追加されていると思います。
※コード編集の経験がない場合は、専門の業者に依頼されることをお勧めします。
成功
管理画面にログインして、「アクション」→「コードの編集」と進み、Sectionsフォルダ内のslideshow.liquidファイルを選択してください。
"zh-TW": "圖片"
}
},
{
"type": "select",
上記のコードを探して、次のように変更します。
"zh-TW": "圖片"
}
},
{
"type": "url",
"id": "image_url",
"label": "URLを入力"
},
{
"type": "select",
次に、下記のコードを探します。
<div
{% unless block_image.alt == blank %}
role="img"
aria-label="{{ block_image.alt | escape }}"
data-alt="{{ block_image.alt | escape }}"
{% endunless %}
class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
data-bg="{{ block_image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: block_image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ block.settings.alignment }};"
data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
上記のコードを、次のように書き換えたら「保存」をクリックします。
<a href="{{ block.settings.image_url }}">
<div
{% unless block_image.alt == blank %}
role="img"
aria-label="{{ block_image.alt | escape }}"
data-alt="{{ block_image.alt | escape }}"
{% endunless %}
class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
data-bg="{{ block_image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: block_image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ block.settings.alignment }};"
data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
</a>
これで「画像スライド」の設定項目にURLの入力欄が追加されていると思います。
※コード編集の経験がない場合は、専門の業者に依頼されることをお勧めします。
質問失礼いたします。
テーマDawnでも同様の編集は可能でしょうか?
ご教授いただけますと幸いです。
ユーザー | ランク |
---|---|
35 | |
11 | |
7 | |
6 | |
6 |
すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023