この記事では、Shopifyストアにある「パーソナライズ デザイン」ボタンの見た目や操作感をオリジナルで調整する方法と、パーソナライズ可能な商品の「カートに追加」や「今すぐ購入」ボタンを表示・非表示にする方法を説明します。
Shopifyのボタンをスタイリングする
Shopifyストアの「パーソナライズ Design」ボタンのスタイル設定には、2つの方法があります。Gelato+ を使うか、CSS を使うかです。
Gelato+
Gelato+ をご利用中で、次のいずれかのテーマを使っている場合 — Dawn、Debut、Studio、Craft、または Simple — ボタンのスタイルは Gelato のダッシュボードから直接設定できます。手順は次のとおりです:
Gelatoのダッシュボードで、ストア セクションに移動します。
ストアの詳細を編集 をクリック
パーソナライズ セクションまでスクロールしてください。
ここから「パーソナライズ Design」ボタンのテキスト、背景色、枠線の色、文字色を変更できます。さらに、Design Editor の左上と右上に表示される「カートに追加」と「ショッピングに戻る」ボタンもオリジナル設定にできます。
CSS
Gelato+のサブスクリプションがない場合は、CSSを使ってShopifyの「パーソナライズデザイン」ボタンをスタイルできます。ボタンはCSSでIDセレクター #ge-personalize を使って参照できます。
カスタムCSSの追加方法についての詳しい情報は、こちらをご覧ください。具体的な手順については、Shopifyのテーマのドキュメントを参照するか、テーマ開発者にお問い合わせください。
たとえば、テーマに次のCSSを追加すると、ボタンの色を黒に変更できます。
#ge-personalize { color: black !important;}
CSS を使って「カートに追加」ボタンをオリジナルにカスタマイズすることもできます。CSS では、ID セレクター #ge-add-to-cart でこのボタンを参照できます。たとえば、次の CSS を使えば「カートに追加」ボタンの幅、色、フォントサイズを変更できます。
#ge-add-to-cart {width: 50% !important; color: black !important; font-size: 30px; }
Shopifyで「カートに追加」と「今すぐ購入」ボタンを表示／非表示にする
パーソナライズに対応した商品ページで、「カートに追加」と「今すぐ購入」ボタンを表示・非表示にできます。この設定は、上記の説明のとおり、Gelatoのダッシュボードのパーソナライズセクションにあります。
