FROM CACHE - jp_header
解決済

コレクションページ 商品表示を2つに分ける

oriori
新規メンバー
5 0 0

よろしくお願いします。

 

コレクションページ での商品表示ですが、

ページの中で2つに分けて表示させることは可能でしょうか?

 

やりたいことは、

例えば、8件表示をした後に画像を入れて、

9件目以降を再び表示させるという具合です。

 

どうぞよろしくお願いいたします。

 

テーマ:canopy

html cssの知識はあります。

 

 

 

1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
990 373 690

成功

該当テーマを触ったことがないのと実際に組んでいないので推測になりますが、以下のいずれかで対応できるかもしれません。

  • loopindexを使う
  • limitとoffsetパラメータを使う

 

■loopindexを使う場合

https://shopify.dev/api/liquid/objects/for-loops#forloop-index

上記ページにあるように特定のループ回数の時だけ処理を実行する仕組みを利用して画像を出力します。

 

 

■limitとoffsetパラメータを使う場合

https://shopify.dev/api/liquid/tags/iteration-tags#for-tag-parameters

上記ページにlimitとoffsetの説明があります。

具体例としては、コレクションのループを2作り、上部のループにlimit:8を設定し、下部のループにoffset:9を設定し、間に画像を出力させる方法が考えられます。

ただし絞り込みが正常に動作しないなど問題がでるかもしれません。

 

 

以上ですが、テーマ内部の仕組みによっては今回の記載内容では対応できなかったり、対応できても画像のサイズや見せ方によっては表示が崩れ全体的な手直しが必要になる可能性があります。

そのためまずテーマのサポートに相談を行い、解決できない場合はご自身か業者に依頼する形で作業を行うほうがよいかなと思います。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2

Jizo_Inagaki
Shopify Partner
990 373 690

成功

該当テーマを触ったことがないのと実際に組んでいないので推測になりますが、以下のいずれかで対応できるかもしれません。

  • loopindexを使う
  • limitとoffsetパラメータを使う

 

■loopindexを使う場合

https://shopify.dev/api/liquid/objects/for-loops#forloop-index

上記ページにあるように特定のループ回数の時だけ処理を実行する仕組みを利用して画像を出力します。

 

 

■limitとoffsetパラメータを使う場合

https://shopify.dev/api/liquid/tags/iteration-tags#for-tag-parameters

上記ページにlimitとoffsetの説明があります。

具体例としては、コレクションのループを2作り、上部のループにlimit:8を設定し、下部のループにoffset:9を設定し、間に画像を出力させる方法が考えられます。

ただし絞り込みが正常に動作しないなど問題がでるかもしれません。

 

 

以上ですが、テーマ内部の仕組みによっては今回の記載内容では対応できなかったり、対応できても画像のサイズや見せ方によっては表示が崩れ全体的な手直しが必要になる可能性があります。

そのためまずテーマのサポートに相談を行い、解決できない場合はご自身か業者に依頼する形で作業を行うほうがよいかなと思います。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
oriori
新規メンバー
5 0 0

ありがとうございます。

遅くなり申し訳ございません。

 

なかなか難しそうですね。

プロの方にお願いすることを検討します。

 

ありがとうございました。