Liquid、JavaScriptなどに関する質問
Dawnテーマのテンプレートで動画(MP.4)を自動再生したいのですが、
コード編集でどこをどのように設定すれば良いか分からず、、
設定方法等詳しい方いましたらご教示いただけますと幸いです。
@gith 様
他の方からも、動画の自動再生ができない、というご質問が多いので、
動画の自動再生をするシンプルなセクションを作ってみました。
新しいセクションを作成し、
下記のコードを貼り付けて保存してください。
(「コード編集」画面にて「セクション > 新しいセクションを追加うする」で、liquidファイルを作ります。liquidのファイル名は、なんでも良いです。思いつかない場合は、仮に弊社の名称を取って、video-qcoltd.liquid でも良いです。)
{%- style -%}
.qcoltd-video-auto-loop-wrap, .qcoltd-video-auto-loop-wrap video {
width: 100%;
}
{%- endstyle -%}
<div class="qcoltd-video-auto-loop-wrap">
{{
section.settings.video
| video_tag:
image_size: '1100x',
autoplay: true,
loop: true,
controls: false,
muted: true
}}
</div>
{% schema %}
{
"name": "動画(自動再生)",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "video",
"id": "video",
"label": "t:sections.video.settings.video.label"
}
],
"presets": [
{
"name": "動画(自動再生)"
}
]
}
{% endschema %}
新しいセクションを追加後、
テーマの「カスタマイズ」画面で、
トップページにセクションを追加します。
先ほど新たに追加した「動画(自動再生)」が追加候補の一番下にあるのでお選びください。
かなりシンプルにしましたので、
ストアにアップロードしたら動画のみ設定可能です。
画面幅いっぱいに広がるように作りましたが、
気になる場合は、「カスタムCSS」で、
.qcoltd-video-auto-loop-wrapのwidthを調整し、marginを設定してください。
例えば、widthを80%にするのであれば、下記のようになります。
.qcoltd-video-auto-loop-wrap {
width: 80%;
margin-right: auto;
margin-left: auto;
}
シンプルにする過程で、
遅延読み込みも外してしまいましたので、
ページの表示スピードが気になるようでしたらご相談ください。
もし、
YouTube動画のURLを設定できるようにしたい、
デスクトップとモバイルで見た目を変更したい、
などのご要望がある場合も、
同様にお気軽にご相談ください。
※ 相談いただいても必ず対応できるわけではないことご承知おきください。
ご参考まで。
(キュー田辺)
すべての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