コレクション一覧ページ
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
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月〜金、現地時間（EST）10:00〜18:00 に当社ウェブサイトで直接利用可能
最終更新