- カテゴリー: ホームページ作成
- 公開: 最終更新:
「グーペ」と「カラーミーリピート」を組み合わせて商品を販売してみよう【カラーミーリピートコラム・第3回】
みなさんこんにちは。
グーペを運営しているGMOペパボ株式会社のサービスである「カラーミーリピート」のディレクターの わま です。
「カラーミーリピート」は簡単に商品販売を始められるサービスで、さまざまなホームページ作成サービスと組み合わせてご利用いただけます。
僕の同期のカラーミーリピート初心者の あべしゅん と一緒に、全3回で「グーペ」と「カラーミーリピート」を併用して商品を販売する方法をご紹介しています。
今回は第3回目です。前回の 『「カラーミーリピート」に商品を登録しよう』 に続いて、いよいよ「グーペ」で商品を販売します。
第3回:「グーペ」で作成したホームページに商品販売ページを組みこもう
では、さっそく「カラーミーリピート」の管理画面にログインして「ページ」に進もう。
「ページ」に進んだら「埋め込みタグを生成」を押してみて。
次のような画面が表示されたかな。
うん。表示されたけど…むずかしそうだね。
そんなことはないよ。
「コピー」を押して埋め込みタグをコピーしよう。
これだけでいいの?
そうだよ。簡単だから安心して。
コピーしたら「グーペ」管理画面の「フリーページ」に移動しよう。
第1回で作成したフリーページに「HTML入力」で記入するよ。
HTMLって難しそうな印象があるなあ。
大丈夫。コピー&ペーストするだけなんだ。
とにかくやってみようか…。
「グーペ」のHTML入力画面にきたよ。
じゃあ「カラーミーリピート」でコピーした埋め込みタグをここに貼り付けるよ。
これで作業は完了だよ。
これで商品を販売できるの?
もちろん!
「グーペ」でつくったホームページのフリーページを更新して見てみよう!
あ、「購入する」ボタンが設置されてるね。
けど、真ん中に置きたいなあ…。
それもすぐに修正できるよ。
「グーペ」管理画面の「フリーページ」に戻って、今度はリッチエディタで編集してみよう。
リッチエディタの編集画面を開いたら、「購入する」ボタンをドラッグして選択してみよう。
選択したら、真ん中寄せを選択すると「購入する」ボタンが真ん中に移動するよ。
もう一度フリーページを更新して、実際のホームページでどのように反映されているか見てみよう。
お、「購入する」ボタンがしっかり真ん中にきてるね。
さすがあべしゅん。のみこみが早いね。
とても嬉しいよ。
「カラーミーリピート」で作った決済ページはどんな風に表示されるんだろう。
あ、浮き上がって表示されてるね。
しかも、「グーペ」で作ったフリーページ内で決済ができるんだね。
「カラーミーリピート」の埋め込みタグを使うとモーダル表示といって、ページ遷移させないで商品を販売できるんだ。
ページの美しさを保つだけでなく、購入者の離脱率を減少させることにもつながるんだ。
こんなに簡単にきれいな商品販売ページを作れて驚いたよ。
「カラーミーリピート」と「グーペ」をこんな風に組みあわせることができるなんて。
良さを理解してもらえたようでよかったよ。
あべしゅん もこれでカラーミーリピートマスターだね。
まとめ
みなさま、いかがでしたでしょうか。
全3回に渡り、「グーペ」と「カラーミーリピート」を組み合わせた商品販売サイトをつくってみました。
「カラーミーリピート」のくわしい情報は サービスサイトのトップページ から資料をダウンロードいただけます。
みなさま、ぜひお試しくださいませ。