コレクションリストページ
Plain Jane および Plain Jane Interactive 向け
最終更新
⌘Ctrlk
Plain Jane および Plain Jane Interactive 向け
学べること
コレクションリストページの設定とスタイリング方法
3Dコレクションカードのカスタマイズ方法
コレクション、画像、視覚効果を割り当てる場所
Shopify テーマエディター内：
移動先： オンラインストア > テーマ
クリック： テキストの 現在有効なテーマで
上部のドロップダウンを使って移動します コレクションリスト
コレクションリストページは、完全にカスタマイズ可能なスタイライズされた選択コレクションのグリッドです 3Dコレクションカード。各カードは特定のコレクションへリンクでき、マウスオーバーで視覚効果やテキストオーバーレイに反応します。
各カードでできること：
特定の コレクションへのリンク を表示するために選択
割り当てる デスクトップ および モバイル用のおすすめ画像
制御する ホバー効果 とテキスト 配置
調整: 色, 影, 間隔、および ホバーアニメーション
🖼️ アイキャッチ画像の設定
⚠️ コレクションカードのアイキャッチ画像は、Shopify 管理画面のコレクション設定から直接取得されます。
移動先： Shopify 管理画面 > 商品 > コレクション
使用したいコレクションをクリックします
アイキャッチ画像をアップロードします
カードのスタイリングを続けるためにテーマエディターに戻ります
コレクション画像を表示
ヘッダーを表示
説明を表示
ホバー時専用のコンテンツ（画像、ヘッダー、説明）を切り替えます
チルトを有効にする
チルトグレアを有効にする
💡 効果は ライブサイトでのみ表示されます、テーマエディターのプレビューでは表示されません。
背景色
ホバー時の背景色
ヘッダーと説明の色（デフォルトとホバー）
調整: header および 説明 配置とピクセル単位の位置調整に使用：
上下 および 左右 スライダー
別々のオプション（ため） デフォルト および ホバー 状態
カードの角丸：カードの角を丸めます（例： 30px)
カスタムホバータイトル＆説明：ホバー時のオプションのテキストオーバーレイ
ホバー時のカード背景：代替の背景画像をアップロード
グラデーションオーバーレイ：ホバー時に上下のグラデーションを色＋不透明度で追加
デスクトップカード寸法: 740px x 350px
モバイルカード寸法: 315px x 350px
⚠️ きれいなレイアウトのため、すべてのコレクションカードで一貫した画像サイズを使用してください
使用する場合は ミュージックプレーヤー セクションとコレクションリストを組み合わせるときは、覚えておいてください：
⚠️ ミュージックプレーヤーは 直接の
.mp3ファイルURLでのみ動作します。 Spotify や Apple Music などのストリーミングプラットフォームへのリンクは動作しません。
💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： support@openspaces.design
💻 ライブチャット： 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応
最終更新