Liquid、JavaScriptなどに関する質問
初めまして。
無料版テーマの「Rise」を使用中なのですが、モバイルでの商品列数が1 or 2列しかありません。
このモバイルにおける列数を3列にしたく、調べていたところ
他のテーマの方でも同様の質問をされている方がいました。
そちらではCSSのコードで変えることができるとのことで、そちらのコードをコピーして使用してみましたが、
テーマが違うためか反映されませんでした。
Riseにおける3列にする方法、もしくはCSSコードなどございましたら教えていただけると幸いです。
解決済! ベストソリューションを見る。
成功
「特集コレクション」での表示に限定して回答します。
3列固定でよければ、以下のコードをカスタムCSSに記載します。
@media screen and (max-width: 749px) {
.grid--2-col-tablet-down .grid__item {
width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
}
}
1〜3列をカスタマイズ画面で選択できるようにするには、以下の手順をお試しください。
なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。
1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。
2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。
3. 「セクション」フォルダ内のfeatured-collection.liquidファイルを選択します。
4. ページ下部に以下を追記します。
変更前:
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
変更後:
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
},
{
"value": "3",
"label": "3列"
}
]
},
これでカスタマイズ画面で1〜3列を選べるようになりました。
5. 最後に3列の場合のCSSを追記します。「アセット」フォルダ内のbase.cssファイルを選択し、以下のコードを追記します。
.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
/* 上記のコードを探して、その下に以下を追記 */
.grid--3-col-tablet-down .grid__item {
width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
}
6. 最後に「保存」をクリックして完了です。
成功
「特集コレクション」での表示に限定して回答します。
3列固定でよければ、以下のコードをカスタムCSSに記載します。
@media screen and (max-width: 749px) {
.grid--2-col-tablet-down .grid__item {
width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
}
}
1〜3列をカスタマイズ画面で選択できるようにするには、以下の手順をお試しください。
なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。
1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。
2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。
3. 「セクション」フォルダ内のfeatured-collection.liquidファイルを選択します。
4. ページ下部に以下を追記します。
変更前:
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
変更後:
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
},
{
"value": "3",
"label": "3列"
}
]
},
これでカスタマイズ画面で1〜3列を選べるようになりました。
5. 最後に3列の場合のCSSを追記します。「アセット」フォルダ内のbase.cssファイルを選択し、以下のコードを追記します。
.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
/* 上記のコードを探して、その下に以下を追記 */
.grid--3-col-tablet-down .grid__item {
width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
}
6. 最後に「保存」をクリックして完了です。
ありがとうございました!
無事に3列にすることができました!m(_ _)m
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024