一番簡単にSTUDIOに決済機能をつける方法

広告 ネットショップ開業・運営・集客 ホームページ作成

一番簡単にSTUDIOに決済機能をつける方法!BASEと連携する簡単手順を解説

今時店長
今時店長
こんにちは、今時店長です。

今回は、無料から使えるWEBサイト制作プラットフォーム「STUDIO・スタジオ」に、一番簡単に決済機能を追加する方法についてご紹介します。

これから紹介する方法は、導入費用、固定費などは一切かかりません。初心者でも簡単にできるので、ぜひ挑戦してみてください。

STUDIOに決済機能は搭載されていません

STUDIOの公式ヘルプより抜粋しました

この記事を書いている、2024年3月時点、STUDIOに決済機能はありません。以下に、公式ヘルプへの問い合わせと返答を掲載しました。

STUDIOでカート・決済機能は作れますか?
STUDIOではECサイトなどで利用されるカート・決済機能は提供していません。外部サービスとSTUDIOのカスタムコード機能やEmbedボックスでのコード埋め込みのご利用を検討してください。
https://help.studio.design/ja/articles/4185079

公式ヘルプには、代替え案として、外部サービスとSTUDIOのカスタムコード機能やEmbedボックスでのコード埋め込みのご利用を検討してくださいと記載されています。

今時店長
今時店長
というわけで、STUDIOに決済機能はありません。そこで、一番簡単に決済機能をつけられる一番おすすめの方法をご紹介します。

1番簡単にSTUDIO決済機能をつける方法をご紹介

ズバリその方法とは?STUDIOにBASEの商品を埋め込む

BASE(ベイス)

いくつかのサービスをためして、一番簡単だったのが「BASE」でした。

そもそもBASEとは

7年連続ネットショップ開設数第一位のサービス

BASEは、7年連続でネットショップ開設数第一位を獲得している、初期費用、月額無料から利用できるネットショップ作成サービスです。過去には「ネットでお店を開くなら・ベ・イ・ス」というテレビCMなども放送していました。

BASEは事前審査もなくカード決済などを導入できる

BASEの支払い方法は、フリマアプリなどで採用されているエスクロー決済(仲介)です。この決済は、事前審査もなくクレジットカードを含む複数の決済方法を一括で導入可能です。つまり、今すぐお店をオープンして販売をスタートできます。

BASE(無料ではじめる)

実際に買い物までの流れを動画でチェックする

驚くほど違和感もありません

実際に、STUDIOで作成したページに、BASEの商品を埋め込み、ユーザーがクリックしたと想定したと想定した動画を撮影してみました。

STUDIOに掲載された商品はカーソルをのせると「詳しくみる」というボタンが表示されて「画像をクリック」すると、BASEの商品ページに飛んで買い物ができます。

BASEの商品価格を変更すると、STUDIO上の価格も変更されます

商品を掲載したあとのメンテナンスについて確認しておきましょう。

商品の販売価格を変えたい場合には、BASEの商品価格を変更すれば、STUDIO側に表示されている商品の価格も変更されてます。

つまり、一度貼り付けてしまえば、商品価格のメンテナンスは不要です。

掲載した商品が在庫切れの場合には非表示にすればOK

商品が見つかりませんと表示される

商品の在庫が切れた場合には、BASE側の商品設定を非表示にしましょう。「商品が見つかりません」と表示されて、商品ページへは飛べなくなります。

商品の販売が終了したときには、STUDIOの商品掲載コードも削除しましょう。※「他の商品ページを見る」を掲載したい場合には、そのままで問題ありません。

BASE(無料ではじめる)

今時店長
今時店長
外部カートが使えるECカートであれば、ほかのサービスでも構いません、初期費用、月額無料で、実際にためして違和感がなかったのが「BASE」でした。ぜひ、ためしてみてください。
BASE
【完全ガイド】BASEのメリット・デメリットを徹底解説!15の魅力的な特長と評判まとめ

今回は、無料ネットショップ作成サービスのBASE(ベイス)について、実際に利用した経験などをもとにサービスの、メリットやデメリットをご紹介します。 BASEを実際に利用した感想、他社サービスとの違い、 ...

STUDIOとBASEを連携して販売する簡単手順

BASEに登録した商品をSTUDIOで呼び出しをする

STUDIOとBASEを連携する方法

それでは、具体的にBASEに登録した商品を、STUDIOのページに呼び出して掲載する手順を解説します。

BASEでショップを開設して商品を登録する

BASEでショップを出店する:BASE

まずは、上のリンクから、BASEにお店を出店して商品を登録してください。BASEは、5分程度あればお店を開設して商品を登録も可能です。

BASE側のソースコードを作成する

赤線部分をBASEの商品ページのURLに書き換えてください。

中サイズ(220x380)はこちら。

<iframe frameborder="0" height="380" width="220" src="【商品詳細ページURL】/widget" ></iframe>

小サイズ(160x220)はこちら。

<iframe frameborder="0" height="220" width="160" src="【商品詳細ページURL】/widget/small" ></iframe>

大サイズ(320x480)はこちら。

<iframe frameborder="0" height="480" width="320" src="【商品詳細ページURL】/widget/large" ></iframe>

特別な理由がなけければ大サイズがオススメです。

STUDIOにソースコードを貼り付ける

STUDIOで左ツールバーの一番下の右矢印をクリックする

STUDIOにて、掲載するページに移動して、ツールバーの一番下「右矢印」をクリックする。

上の一番右にある、追加というタブをクリックして「Embed」→「Blank」とクリックしてください。

上の一番右にある、追加というタブをクリックして「Embed」→「Blank」とクリックしてください。

BASEのソースコードをSTUDIOに貼りつける

「iframe」というボックスが表示されるので、右の上「ボックス」タブにある「Custom」をクリックして、先ほどコピーしたソースコードをそのまま貼り付けてください。※最初に入っているテキストは上書きして消して問題ありません。

きちんと掲載できるように調整して完了です

あとは、ボックスの端などを掴んで、ドラッグ&ドロップをしてサイズなどを調整して、右のスクロールバーを消しましょう。

BASE(無料ではじめる)

今時店長
今時店長
STUDIOで、大量の商品を販売するような使い方には向いていません。STUDIOに注目商品を一品、二品、掲載するのに最適です。BASEは、予約販売、定期販売、など、とにかく多機能です。
BASE × Up-T 連携で実現する!ネットショップの無在庫オリジナル商品販売
BASE × Up-T 連携で実現する!ネットショップの無在庫オリジナル商品販売

今回は、無料でネットショップを作成できる「BASE」と、テレビCMなどでもおなじみ「Up-T」を連携して、無在庫でオリジナル商品を販売するネットショップを作る方法について解説します。 はじめに 今回利 ...

今回のまとめ

まとめ

今回は、無料から使えるWEBサイト制作プラットフォーム「STUDIO・スタジオ」に、一番簡単に決済機能をつくれる方法をご紹介しました。

「STUDIO」には、決済機能はついていません。「BASE」など、外部カートを作成できるサービスなどを活用して、「STUDIO」でネット販売をはじめましょう。

あわせてチェックしてほしい記事

BASEに関するメリットはこちら。

BASE
【完全ガイド】BASEのメリット・デメリットを徹底解説!15の魅力的な特長と評判まとめ

今回は、無料ネットショップ作成サービスのBASE(ベイス)について、実際に利用した経験などをもとにサービスの、メリットやデメリットをご紹介します。 BASEを実際に利用した感想、他社サービスとの違い、 ...

無料ネットショップ作成サービスに関する比較はこちら。

2024年版|無料ネットショップ開業サービス徹底比較
2024年版|無料ネットショップ開設サービス徹底比較!おすすめアプリをご案内

今回は、無料でネットショップを開設できるアプリやサービスについて、ECサイト運営実績10年以上の経験や感想をもとに、オススメサービスをご紹介します。 このページに掲載してある、全てのサービスは初期費用 ...

無形商品の販売には「STORES」が一押しです。

下にジンドゥーとSTORESを連携した、ネットでサービスなどを販売する方法について解説しています。※STUDIOは、STORESのボタンは動作しませんでした。

無料で簡単にJimdoに買い物かごをつける方法
ジンドゥーの裏技!?無料プランで登録数無制限!ネットショップ開設方法[STORESボタン設置]

今回は、人気ホームページ作成サービスである、ジンドゥー(Jimdo)にて、無料プランなのに無制限で商品を販売する裏技をご紹介します。 裏技と言うと胡散臭いイメージを持たれるかもしれませんが、もちろん規 ...

STORES(ストアーズ)
【完全ガイド】STORESのメリット・デメリットを徹底解説!15の魅力的な特長と評判まとめ

今回は、無料から使えるネットショップ作成ツール、STORES(ストアーズ)について、実際に利用した経験などをもとに、サービス特徴やメリットをご紹介します。 STORESを実際に利用した感想、他社サービ ...

最後まで読んで頂きありがとうございました。
また新しい情報などあれば更新していきます。

\ こちらの記事をシェアする /
  • この記事を書いた人
今時店長

今時店長

楽天市場の某大型サイトにて、2005年~2013年まで運営責任者を務める。その経験を活かし、2013年に楽天市場のショップへのサポートを目的に当サイトを立ち上げました。2016年に情報サイトとしてリニューアル、より幅広い層の方々にオンラインビジネスのノウハウやアドバイスを提供しています。

運営企業情報(プロフィール・運営理念)
掲載依頼・お問い合わせ
誤り報告フォーム

今月の入会特典のあるサービス

エックスサーバーキャンペーン

人気記事

最新版|ネットショップでの個人仕入れのノウハウ11選!基本~無在庫まで完全解説 1

今回は、ネットショップ運営実績10年以上の経験をもとに、商品を仕入れるノウハウ、おすすめサービスや卸業者・メーカーの探し方などをご紹介します。 このページの内容は、すべて個人事業主でも実践可能。基本的 ...

2024年版|無料ネットショップ開業サービス徹底比較 2

今回は、無料でネットショップを開設できるアプリやサービスについて、ECサイト運営実績10年以上の経験や感想をもとに、オススメサービスをご紹介します。 このページに掲載してある、全てのサービスは初期費用 ...

インターネット仕入れサイト 3

今回は、インターネットで商品を仕入れることができる、仕入れサイト・卸売りサイトをご紹介します。 掲載されているサイトは、すべて事業者向けの仕入れサイトです。一般のユーザーは購入することはできないので注 ...

無料でパッと作れるホームページ作成ツール 4

今回は、無料でパッと作れる、ホームページ作成ツールをご紹介します。「お金や時間を掛けずにホームページを作りたい」方は、ぜひ参考にしてください。 はじめに ホームページを作成するのに必要なもの 必要なも ...

無料で使えるネット予約システムを徹底比較 5

今回は、無料で使えるオンライン予約システムについて解説します。 フィットネス、ヨガなどのスクール。エステやマッサージなどのサロン。医療関係や各種イベントで予約システムを探している方は、ぜひ参考にしてみ ...

オリジナルTシャツ作成サービス徹底比較 6

今回は、オリジナルTシャツを作成できるサービスについて徹底比較してみました。おすすめのサービス、業者選び方のポイントについて解説します。 クラスT、部活T、サークルTなどの制作。オリジナルTシャツの販 ...

無料で使えるおすすめPOSレジアプリ4選(iPhone/iPad/Android対応) 7

今回は、スマートフォン(iPhone)やタブレット(iPad/Android)端末で利用できる、無料で使えるPOSレジアプリを4つご紹介します。 無料POSレジアプリの比較表 初期費用、月額費用、キャ ...

無料で使えるおすすめ決済フォーム!申込みWEBページが自分で簡単に作れる 8

今回は、初期費用、月額無料で使える、クレジットカード決済機能付き申込みウェブフォームの作り方をご紹介します。ぜひ参考にしてみてください。 こんな方におすすめのサービス 無料でクレジットカード決済機能つ ...

ネットショップ販売手数料の最安値はココ[初期・月額・クレジットカード決済手数料を比較] 9

今回は、ネットショップ作成サービスのクレジットカード決済手数料について比較してみました。初期費用、月額費用とあわせてチェックしてみてください。 こんな方におすすめの記事 無料サービスで実質的に負担する ...

-ネットショップ開業・運営・集客, ホームページ作成
-