shopify　商品画面のスライド画像のチラつきについて

Question

お世話になっております。
本店サイトでshopifyを開店準備中なのですが、一部の端末で、スライド時の画像のチラつきが確認されています。
問題なくみれてる端末もあります。
（症状の様子を動画で撮影したものありますが添付が画像しかできないようなので、何らかの方法で動画お送りできれば伝わると思います）

これは原因等ありますでしょうか？
解決策等ありましたらご教授いただけますと幸いです。
宜しくお願い致します。

Answer

ECマスターズの中野です。

> これは原因等ありますでしょうか？

スライドショーの画像がちらつく現象は
いくつかの対処方法で解決する可能性が
ございますが、画面（画像）がちらつく
際の対処策として、

スライドショーのコードが記述されている
shopifyのファイルの中に、複数の動的な
メニューが設置されている様な場合、
画像がちらつく事がある様です。

この場合、動的なメニューを別々のファイル
に設置し直すと、ちらつきが解消される
場合があります。

例：「product-template.liquid」と
「header.liquid」に動的なメニューを
分けるなど

スライドショーは、アプリを利用して設置
されていらっしゃいますでしょうか。

差し支えなければ、以下の情報を
ご共有いただけますでしょうか。

・スライドショーはアプリで設置しているか、
自作コードで設置しているか

・どのような環境（OS、ブラウザ等）で
画像のちらつきが発生しているか

・スライドショーの記述部分のコード（お分かりであれば）

お手数おかけしますがよろしくお願いいたします。

Answer

中野様
お世話になっております。

ご回答ありがとうございます。

＞・スライドショーはアプリで設置しているか、
＞自作コードで設置しているか

有料テーマを購入したまま使っていますので、コードかと思いますが、分からないです。。。申し訳ありません。

＞・どのような環境（OS、ブラウザ等）で
＞画像のちらつきが発生しているか

PCではいまのところチラつきはでていません。
スマホで見た時に発覚したのが、LINE内ブラウザ(LINEで送信したリンククからそのまま開くとき)と、Googlechromeとsafariです。
現在開店準備中なのですが、本格的にオープンしたらインスタからリンクさせようと思っています。まだオープンしてないのでインスタから開いたときの状態はまだ確認できてないですが、この感じだとインスタから開いたときも怪しいなと思っております…
唯一チラつきなくみれたのがFirefoxです。


＞・スライドショーの記述部分のコード（お分かりであれば）
申し訳ありません、コードが分からないです。

宜しくお願い致します。

Answer

ECマスターズの中野です。

> スリーSさん

ご返信ありがとうございます。
また、ご連絡お待たせして申し訳ございません。

今回、スマートフォンからLINE経由で
ブラウザ（chromeとsafari）を開いた際に
スライドショーのちらつきが発生する、
との事ですね。

有料テーマをご利用で、対象テーマの機能
として備わっているスライドショー機能を
ご利用されているとの事も承りました。

PC上では現象が発生しないとの事
同様の事例でお調べしますと、
スライドショーに関するCSSの設定に
下記のコードを指定すると、
ちらつきが解消される場合がございます。

backface-visibility: hidden;

ただ、今回ご利用のテーマのCSSのコードを
ご確認頂く事が難しいとの事、Shopifyの
有料テーマでの不具合との事ですので、
こちらでも現象の再現と検証を行うことが
難しい現状がございます。

そのため、下記Shopifyが公開しております
テーマのサポートページのご案内になりまして、
有料テーマでは、テーマを提供している
開発元に問い合わせをいただく事が可能です。

■テーマのサポート
https://help.shopify.com/ja/manual/online-store/themes/theme-support#additional-resources

また、下記外部サイトとなりますが、
Shopifyの日本法人に問い合わせを
行う手順について記載されております。

■Shopify Japanカスタマーサポートに連絡する方法
https://bit.ly/3Qr1BgD

一度、上記URLをご参照頂き、
Shopifyにご確認頂けますでしょうか。

もし、対象のスライドショーに関する
CSSの設定が分かれば、こちらでも
現象解決のお手伝いが出来る可能性が
ございます。

すぐに解決につなげる事ができず
申し訳ありませんがよろしくお願いいたします。

Answer

中野様
お世話になっております。

ご確認ありがとうございます。

スライドに関するCSSですが、アセットの中にcssファイルはいくつかしか無くて(添付画像)、恐らく[theme.css]だとおもうのですが、肝心のクラス名が分からず、ご教授いただいたプロパティを記述できません、、。
もし可能でしたらログインID,PWお教えしますので、見てもらうことはできないでしょうか？###HR######IMG02b2c6f933644ee234f2dfcc0561d4e61.jpegIMG0###

Answer

ECマスターズの中野です。

> スリーSさん

かしこまりました。
つきましてはログイン情報と、
チラつきが確認されるページをご教示くださいませ。
よろしくお願いいたします。

Answer

中野様

お世話になっております。

ありがとうございます。
お手数おかけして申し訳ございません。

ログイン画面
https://admin.shopify.com/store/placebojp/
メール：info@placebojp.com
PW：placebo1102

スマホで見た際に、全ページでチラつきが起きています。
商品画像を横にスライドしていったときに、次の画像に切り替わったあとに、一瞬チラつきます。

ご確認宜しくお願い致します。

Answer

ECマスターズの山本です。

ログイン情報の共有ありがとうございました。
状況と再現を確認して、調査を行いましたところ、
現象としては、テーマの機能で、
スライド中に画像のリサイズが発生しており、
そのためにちらついているようです。

また、そのリサイズ動作において

・登録されているスライドショーの画像サイズが
　バラバラであること
・Shopifyの推奨画像サイズになっていないこと

が影響しているように見受けられます。

以下をお試しいただけますでしょうか？

（１）スライドショーに登録する画像サイズを
　　　すべて同じサイズにする。

（２）画像サイズは以下のいずれかのサイズにする
　960px × 720px（スライドショーの推奨サイズ）
　1800 × 800px（「prestige」の推奨サイズ）

※スライドショーの画像は、幅980ピクセルから
1920ピクセル、高さ600ピクセルから
1200ピクセルの間である必要があります。
 3：2、4：3、または16：9のアスペクト比を
使用できます。
最高の品質を得るには、写真を
1080px x 1920pxにする必要があります。
幅2500pxを超える写真は使用しないでください。

https://clickmajic.com/blog/ja/shopify-simple-theme-banner-size#:~:text=Shopify%E3%81%AE%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E7%94%BB%E5%83%8F%E3%81%AE%E5%AF%B8%E6%B3%95&text=%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%AF%E3%80%81%E5%B9%85,%E3%81%AB%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

「prestige」の推奨サイズに関する
コミュニティ情報
https://community.shopify.com/c/shopify-%E3%82%A2%E3%83%97%E3%83%AA/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E7%94%BB%E5%83%8F%E3%81%AE%E6%8E%A8%E5%A5%A8%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/m-p/1729259#:~:text=%E3%80%8E%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E7%94%BB%E5%83%8F%E3%81%A7%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1%E3%81%AE,400%C3%97600%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%81%A7%E3%81%99%E3%80%82%E3%80%8F


ご確認よろしくお願いいたします。

Answer

山本様
お世話になっております。

ご確認いただきありがとうございました。

画像のサイズが原因だったとのこと、承知しました。
調査していただきありがとうございます。大変助かりました。

品番が多いので、別の有料サイトを経由して、前のサイトから一気に移行させたことがこのサイズになってしまっている原因なのですが、一括でリサイズできるような方法やshopifyアプリなどございますでしょうか、、、？
オープンを直前に控えており、一枚一枚リサイズして再アップロードするのはさすがに間に合わないので、なにか手早くリサイズする方法があればご教授いただけないでしょうか。

宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> 一括でリサイズできるような方法やshopifyアプリなどございますでしょうか、、、？

XnView
https://forest.watch.impress.co.jp/library/software/xnview/

をご利用いただくことで、一括で画像サイズを
変更することができます。

インストールの際は、プルダウンで
Minimum installation
を選択いただくことで、最低限の機能のを
インストールすることができます。

インストールしましたら、

（上部メニュー）ツール ＞ 一括変換
↓
表示された画面にて、対象のファイルを選択
↓
「出力」の「フォルダ」にて、保存先フォルダを指定
↓
「変形」タブ

こちらで設定されたい変更方法を選択してください。

「キャンバスサイズの変更」で
一番大きいサイズに合わせていただくのが
よろしいかと思います。

Answer

伊藤様

お世話になっております。
ありがとうございます、試してみます！

この度はお手数おかけして申し訳ございませんでした。
大変助かりました。

今後ともどうぞよろしくお願いします。

shopify 商品画面のスライド画像のチラつきについて

shopify　商品画面のスライド画像のチラつきについて