FROM CACHE - jp_header

バリアントピッカーをスクロールにする

umki
訪問者
3 0 0

お世話になっております。

 

prestige テーマを使用しております。

表題の通り、バリアントピッカーやメタフィールドを使用したproduct variationsなどで10色(商品)以上を紐づけるとバリエーション(商品サムネイルやカラーピッカー)が折り返されて2列や3列になります。

スクロールタイプの表示にしてすっきりとさせたいですがテーマ内では難しいようです。

 

しかし当方、liquidやCSSなどに不慣れで初心者レベルです。

恐れ入りますが初心者でもわかりやすく解説してくださる方がいらっしゃいましたらご教示頂けますと幸いです。

(コードの挿入位置などもご指示いただけますと嬉しいです。)

 

よろしくお願いいたします。

2件の返信2

株式会社フルバランス
Shopify Partner
1463 519 651

Umki様

 

ご質問を確認いたしました。

以下の添付のようなイメージでしょうか?

スクリーンショット 0006-02-28 18.13.04.png

 

こちらcssの調整でスクロール形式にできます。

上記のバリエーションを囲んでいるクラス(おそらくColorSwatchList)に対して以下のcssを適用すると良いかと存じます。

 

 

 

.ColorSwatchList {
white-space: nowrap;
overflow: auto;
}

 

 

 

挿入するファイルは後尾に.cssがついているファイルになります。

ご参考までに。

 

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

 

分からない点があれば、またいつでもご連絡ください。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
umki
訪問者
3 0 0

ご回答ありがとうございます。
恐れ入りますが、「挿入するファイルは後尾に.cssがついているファイルになります。」
という部分がよくわかりません。


cssのコード追加をする場所は[テーマ] >[カスタマイズ]>[テーマ設定] >[カスタムCSS]で認識あっておりますでしょうか?

(こちらにいただいたコードを追加、保存しましたが、スクロール形式にはなりませんでした)