お世話になっております。
Narrativeテーマを使用しております。
スマホにて、特集コレクションの商品表示を2列にしたいです。
どなたかお分かりになる方、よろしくお願いいたします。
Topic summary
スマホ表示で特集コレクションの商品を2列にしたいという相談。Narrativeテーマでの設定箇所が論点。
当初はcollection-template.liquidのmobileColumnsを’1’→’2’に変更する提案。保存済みでも1列のままで原因候補としてファイルの対象違いとブラウザキャッシュが指摘。
トップページの特集コレクションの場合はfeatured-collection.liquidの14行付近で{%- assign mobileColumns = ‘1’ -%}を’2’へ変更するのが正解。これで問題は解決。
用語補足：featured-collection.liquidはトップの特集コレクション用テンプレート。collection-template.liquidはコレクションページ（/collections/all）用。mobileColumnsはスマホ時の列数指定。
確認手段として、対象画面のURL共有（必要ならパスワードをPM）によるストアフロント確認が提案。
後続で別ユーザーがBrooklynと思われるテーマで「コレクションページを2列化」希望。featured-collection.liquidに該当コードが見当たらず、管理画面での確認依頼。
現状の成果：Narrativeの特集コレクションは2列化に成功。Brooklynのコレクションページ件は未解決・継続中。
アクション：対象ページとテーマに応じて正しいテンプレートを編集。必要に応じてURL共有で追加確認。
はじめまして。
以下手順で2列にすることが可能です。
-
コードの編集画面でcollection-template.liquidを開く
-
66行目あたりの以下を変更
{%- assign mobileColumns = '1' -%}
↓に変更
{%- assign mobileColumns = '2' -%}
ご参考になりましたら幸いです。
上水流様
お返事ありがとうございます。
-
コードの編集画面でcollection-template.liquidを開く
-
66行目あたりの以下を変更
{%- assign mobileColumns = '1' -%}
Copy
↓に変更
{%- assign mobileColumns = '2' -%}
Copy
こちら変更したのですが1列のままでした。
何か他に原因がありますかね？
ソースは上記アドバイス以外何も触っていません。
よろしくお願いいたします。
ご確認ありがとうございます。
手順に含めておりませんでしたので念のため確認させていただきたいのですが、コードを編集後に「保存する」ボタンはクリックされましたでしょうか？
上水流様
おはようございます。
はい、保存は押しております。
よろしくお願いいたします。
承知いたしました。
あとは考えられる原因としては、以下になります。
- 対象ページのファイルがcollection-template.liquidでは無い
※私のストアでは以前の手順で2列になることは確認できております
- ブラウザキャッシュが残っている
こちらは可能性が低いと思いますが、Google Chromeのシークレットウインドウのようなキャッシュに左右されない環境で確認ができます
可能であればストアフロントを確認させていただけるともう少し解決策の幅が広がるかと思います。
宜しくお願い致します。
お返事ありがとうございます。
＞ストアフロントを確認させていただけるともう少し解決策の幅が広がるかと思います。
こちらお願いしたいのですがどのように確認していただくのでしょうか？
今回2列にしたい画面のURLをいただけると、私の方でも確認することができます。
もしストアフロントにパスワードをかけられているようでしたら、私のプロフィール画面からプライベートメッセージにてパスワードをお教えください。
宜しくお願いいたします。
以前お伝えしていたファイルはコレクションページ(/collections/all)のものでした。
トップページの特集コレクションをスマホ時に2列にする場合は、以下の手順で修正をお願いします。
-
コードの編集画面でfeatured-collection.liquidを開く
-
14行目あたりの以下を変更
{%- assign mobileColumns = '1' -%}
↓に変更
{%- assign mobileColumns = '2' -%}
宜しくお願い致します。
1 Like
ありがとうございます。
無事変更ができました！
1 Like
失礼致します。。
brookrnテーマを使用しております。
スマホにて、コレクションページでの商品表示を2列にしたいです。
是非、ご教授頂けますと幸いです。
よろしくお願いいたします。
こんばんは。
コードの編集画面でfeatured-collection.liquidを開き
{%- assign mobileColumns = ‘1’ -%}
こちらのコードを検索して数字を変更
{%- assign mobileColumns = ‘2’ -%}
これでいけるかと思いますがおかがでしょうか？
nanchoroさま
ご返信ありがとうございます。
featured-collection.liquidにて
{%- assign mobileColumns = ‘1’ -%}を検索したのですが、
見当たらず、一度管理画面でご確認いただくことは可能でしょうか？
お手数をお掛け致しますが、
よろしくお願いいたします。