ホームページ作成「グーペ」 トップ » グーペノート» ホームページ作成» 「グーペ」と「カラーミーリピート」を組み合わせて商品を販売してみよう【カラー...

「グーペ」と「カラーミーリピート」を組み合わせて商品を販売してみよう【カラーミーリピートコラム・第3回】

みなさんこんにちは。
グーペを運営しているGMOペパボ株式会社のサービスである「カラーミーリピート」のディレクターの わま です。

カラーミーリピート」は簡単に商品販売を始められるサービスで、さまざまなホームページ作成サービスと組み合わせてご利用いただけます。
僕の同期のカラーミーリピート初心者の あべしゅん と一緒に、全3回で「グーペ」と「カラーミーリピート」を併用して商品を販売する方法をご紹介しています。

今回は第3回目です。前回の 『「カラーミーリピート」に商品を登録しよう』 に続いて、いよいよ「グーペ」で商品を販売します。

第3回:「グーペ」で作成したホームページに商品販売ページを組みこもう

カラーミーリピートディレクターでは、さっそく「カラーミーリピート」の管理画面にログインして「ページ」に進もう。
「ページ」に進んだら「埋め込みタグを生成」を押してみて。
次のような画面が表示されたかな。

カラーミーリピートの管理画面

カラーミーリピート初心者うん。表示されたけど…むずかしそうだね。

カラーミーリピートディレクターそんなことはないよ。
「コピー」を押して埋め込みタグをコピーしよう。

カラーミーリピート初心者これだけでいいの?

カラーミーリピートディレクターそうだよ。簡単だから安心して。
コピーしたら「グーペ」管理画面の「フリーページ」に移動しよう。
第1回で作成したフリーページに「HTML入力」で記入するよ。

カラーミーリピート初心者HTMLって難しそうな印象があるなあ。

カラーミーリピートディレクター大丈夫。コピー&ペーストするだけなんだ。

カラーミーリピート初心者とにかくやってみようか…。
「グーペ」のHTML入力画面にきたよ。

グーペの管理画面

カラーミーリピートディレクターじゃあ「カラーミーリピート」でコピーした埋め込みタグをここに貼り付けるよ。

グーペの管理画面

カラーミーリピートディレクターこれで作業は完了だよ。

カラーミーリピート初心者これで商品を販売できるの?

カラーミーリピートディレクターもちろん!
「グーペ」でつくったホームページのフリーページを更新して見てみよう!

グーペで作成したホームページ

カラーミーリピート初心者あ、「購入する」ボタンが設置されてるね。
けど、真ん中に置きたいなあ…。

カラーミーリピートディレクターそれもすぐに修正できるよ。
「グーペ」管理画面の「フリーページ」に戻って、今度はリッチエディタで編集してみよう。
リッチエディタの編集画面を開いたら、「購入する」ボタンをドラッグして選択してみよう。

グーペの管理画面

カラーミーリピートディレクター選択したら、真ん中寄せを選択すると「購入する」ボタンが真ん中に移動するよ。

グーペの管理画面

カラーミーリピートディレクターもう一度フリーページを更新して、実際のホームページでどのように反映されているか見てみよう。

グーペで作成したホームページ

カラーミーリピート初心者お、「購入する」ボタンがしっかり真ん中にきてるね。

カラーミーリピートディレクターさすがあべしゅん。のみこみが早いね。

カラーミーリピート初心者とても嬉しいよ。
「カラーミーリピート」で作った決済ページはどんな風に表示されるんだろう。

カラーミーリピートで作成した決済方法の表示

カラーミーリピート初心者あ、浮き上がって表示されてるね。
しかも、「グーペ」で作ったフリーページ内で決済ができるんだね。

カラーミーリピートディレクター「カラーミーリピート」の埋め込みタグを使うとモーダル表示といって、ページ遷移させないで商品を販売できるんだ。
ページの美しさを保つだけでなく、購入者の離脱率を減少させることにもつながるんだ。

カラーミーリピート初心者こんなに簡単にきれいな商品販売ページを作れて驚いたよ。
「カラーミーリピート」と「グーペ」をこんな風に組みあわせることができるなんて。

カラーミーリピートディレクター良さを理解してもらえたようでよかったよ。
あべしゅん もこれでカラーミーリピートマスターだね。

まとめ

みなさま、いかがでしたでしょうか。
全3回に渡り、「グーペ」と「カラーミーリピート」を組み合わせた商品販売サイトをつくってみました。
「カラーミーリピート」のくわしい情報は サービスサイトのトップページ から資料をダウンロードいただけます。

グーペをご利用の方は「管理画面>ネットショップ>カラーミーリピート(※要ログイン)」からのお申し込みで【3ヶ月間無料】でご利用いただけます。


みなさま、ぜひお試しくださいませ。


新着記事