Shopify テーマ、Liquid、ロゴ、その他の類似トピック
現在Dawnテーマを使っております。
コレクションリストに4つのコレクションを追加しました。
デスクトップだと2列×2行で表示されるのですが
モバイルだと1列で表示します。
モバイルも2列で表示させるにはどうすれば良いのでしょうか?
お手数ですがどなたかご教授お願いします。
テーマの確認いたしました。
表示するコレクション数に応じて表示の列数が動的に変わるようになっており
カスタマイズ画面からはカラム数の調整ができない仕様になっています。
モバイルでも2列で表示させるためには、コード編集でLiquidとCSSで調整する必要があるかと存じます。
もしもモバイルで表示がコレクションリストが縦に長くなってしまうのが気になるのであれば
「モバイルでスワイプを有効にする」にすることで表示コレクションの列と行が一つになり右スワイプで次のコレクションが表示される形式に変更できますのでお試しください。
ご返信遅くなり申し訳ございません。
こちらですが
管理画面>オンラインストア>テーマ>アクション>コード編集
上記から下記のCSSを編集することで微調整可能です。
section-collection-list.css
スワイプ有効時
@media screen and (max-width: 989px) {
.collection-list.slider .collection-list__item {
max-width: 100%;
}
}
↓
@media screen and (max-width: 989px) {
.collection-list.slider .collection-list__item {
max-width: 50%;
}
}
スワイプ無効時
@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(100% - 3rem);
}
.collection-list__item.grid__item {
padding-bottom: 1rem;
}
↓
@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(50% - 3rem);
}
.collection-list__item.grid__item {
padding-bottom: 1rem;
padding-left: 1rem;
}
上記のように変更することで2×2に変更可能です。
コード編集が難しい場合は、エキスパートやパートナーなどにご依頼されることをお勧めいたします。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024