Liquid、JavaScriptなどに関する質問
お世話になります。
現在2つのストアを改修しておりますが、表題の現象に悩んでおります。
ページをリロードした際に、チェックマークの画像が一瞬、画面いっぱいに表示されます。
2つのストアも同じ現象が起きており、2つのストアに共通している項目は、
Dawnテーマを使用、ページTOPにスライダーを使用、アプリにInstafeedを使用していることです。
スライダーとInstafeedを非表示にしてみても変わりませんでした。
何か対策方法はあるでしょうか。
Ba98さま
フルバランスの園畑です。
ご質問を確認いたしました。
チェックマークがどのセクションにある要素なのか把握できていないため、詳しいことは言えませんが、cssとjavascriptの読み込みの差があるため、一瞬表示崩れが起きるのかと思います。
一例ですが、表示崩れが起こる要素を特定し、以下サイトの方法を試してみてはいかがでしょうか?
https://xia-inc.com/2018/01/31/3301/
ご参考までに。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
園畑様
ご返信ありがとうございます。
こちら、カートに商品が追加されましたの頭に表示されるチェックマークであることが判明しました。
添付のURLを参考に、
theme.liquid内に下記コードを記載しました。
.cart-notification__heading .icon-checkmark{
display:none;
}
<script type="text/javascript">
$(window).load(function() {
$('#drawer-navigation').fadeIn(0);
});
</script>
カート追加時に表示されなくなりましたが、リロード時にもチェックマークが画面いっぱいに一瞬表示されなくなりました。
しかし、スペシャルリロード時には一瞬表示されます。
カスタマイズもほぼ行っていないのですが、これは仕様なのでしょうか。
問題が再現できないので推測になりますが、対象の画像タグ(おそらくsvg)に対して、viewBoxのサイズと同じ値でwidth属性とheight属性を記述すれば、少なくとも大きく表示されることはないのではと思われます。
なお、試されたコードはJS側のセレクタ指定が変更されていないので効果がありません(=CSSで消したままになる)。
以上ですが、難しい場合はエキスパートやパートナーに依頼されることをお勧めします。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024