商品画像の上にある「カートに追加」ボタン

画像の上にカートボタンを追加するのはなぜですか?

を配置する 商品をカートに追加 商品画像に直接ボタンを配置することで、顧客はより早く、より便利に買い物ができるようになります。 

ボタンを探すために下にスクロールする代わりに、ワンクリックですぐに商品をカートに追加できます。

メリット：

• 摩擦を減らす： 顧客は商品の詳細の下にあるカートボタンを探す必要がありません。
• 衝動買いを促す: クイック追加オプションを使用すると、顧客は複数の商品を一度に追加するのが簡単になります。
• モバイルエクスペリエンスの向上: 小さな画面では、ボタンオーバーレイを使用するとスペースを節約でき、レイアウトがきれいになります。
• ハイライトプロモーション: 季節ごとのキャンペーンや割引に合わせてボタンのスタイルを設定し、画像上で目立つようにすることができます。

商品画像の上にカートボタンを表示するにはどうすればよいですか?

GemPages v7 では、画像の上に「カートに追加」ボタンがある独自の製品リスト セクションをデザインできます。

まず、Shopify管理画面から、 GemPagesダッシュボード > ページ対象ページをクリックしてエディタを開きます。

次に、次の手順を実行します。

ステップ1: ページに商品リスト要素を追加する

• 左側のサイドバーから、 製品リスト要素をクリックし、要素をページにドラッグ アンド ドロップします。

• すっきりとしたデザインにするために、製品リスト要素にネストされたいくつかの子要素を削除できます。 

たとえば、製品のバリエーションとスウォッチを削除するには、要素をクリックして ビン のアイコンをクリックします。

ステップ2: 製品リスト要素に行要素を追加する

• 左側のサイドバーから、 行要素 ステップ 1 で作成した製品リストに追加します。

• 製品画像とカートに追加ボタンの要素をこの行にドラッグ アンド ドロップします。

ステップ3: カートボタンの位置を設定する

• 「カートに追加」ボタン要素をクリックして、設定パネルを開きます。
• に行きます 高機能 タブ> 役職.

• ドロップダウンから、選択します 絶対の 位置。

すると、カートボタンが商品画像の上に表示されます。

• をセットする 下 = 0 画像の下部にボタンを表示します。

• 帰ります 設定 タブをクリックして、ボタンの表示設定を好みに合わせて変更できます。例えば、テキストを削除したり、背景色を変更したり、ホバー時の状態を設定したりできます。

カートに追加ボタン要素の設定の詳細については、以下を参照してください。 この記事.

ステップ4: 保存して公開する

• また、ご購読はいつでも停止することが可能です プレビュー 結果を確認するには、 目 上部のバーにあるアイコン。
• すべてが順調であれば、 保存 変更して パブリッシュ ページを再公開するためのボタン。

結果：