【WixとBASEを連携】WixでBASEの商品を販売する方法！無料でネットショップが作れる！？

今時店長

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

今回は、ホームページ作成サービスのWix（ウィックス）に、無料ネットショップ作成サービスであるBASE（ベイス）の商品を埋め込んで掲載する方法を解説します。

今回の趣旨

WixのページにBASEの商品を掲載する

--この方法を使えば無料で決済が導入できる。

Wixは、無料から使えるホームページ作成サービスですが、決済機能を導入するには月額固定費が掛かります。

そこで、BASEに商品を出品してインラインフレームで埋め込めば、Wixに固定費用を掛けないで決済機能が導入することができます。

--どちらのデザイン編集モードでも出来ました。

デザインモードは「Wix ADI」「Wix エディタ」、どちらでも追加できました。ただし、手間は掛かるので、あくまでも１品、２品程度の販売にオススメです。

WixにBASEの商品を掲載する手順

BASEに出店して商品を登録する

まずは、BASEに会員登録して商品を登録してみてください。

クレジットカードも審査不要で導入できるため、５分程度あれば商品を登録して販売まで開始することができます。

BASEの基本情報

BASE（無料会員登録はこちら）

今時店長

BASEは、初期費用、固定費無料です。商品が売れた場合にのみ、手数料が差引されて入金される仕組みです。

Wixに貼り付けるソースコードを作成する

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

中サイズ（220x380）はこちら。

小サイズ（160x220）はこちら。

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

今時店長

上記で生成したソースコードを、Wixの「HTMLコードパーツ」に貼り付けて、WixページにBASEの商品を埋め込みます。

Wix ADIの手順

管理画面の左下にある「サイト編集」をクリックする。

追加したい部分の「+」で新しいセクションを追加をする。

左メニューより「HTML埋め込み」→ 最適なレイアウトのセクションを選んでドラッグして貼り付けます。

貼り付けすると上画像のように表示されるので、BASEで生成したコードを貼り付けして高さを適当に調整すれば完了です。

--実際に貼り付けした完成イメージ。

いい感じです、とくに違和感なく掲載できていると感じました。

Wix エディタの手順

「サイト編集」→ 「+」→「その他」→「カスタム埋め込み」→「HTML ifreme」をクリックする。

コードを入力に、BASEで生成したソースコードを貼り付けて、枠の右下をつかんで拡大して、いいかんじに貼り付けてください。

インラインフレームで貼り付けているだけなので、モバイル表示でも配置位置を確認して調整してください。

--実際に貼り付けた完成イメージ。

こちらの完成イメージも違和感ありません。

念の為、モバイルページの表示も確認してください。

完成後の挙動について

クリックしたあとの挙動も確認しておきましょう。

商品リンクはマウスを乗せると「詳しくみる」という文字が表示されます。

ボタンをクリックすると「BASE」の商品ページに移動します。

--BASE側で「セール」の設定をするとWixでも反映される。

BASEの管理画面で「セール」にて50%OFFを設定してみました。

Wix側も50%OFF表示に変更されました。これはいい感じです。

在庫切れ、数量限定、予約販売など。セール以外の設定は、ソースを貼り付けしたWix側には反映されませんでした。

--BASEには受注生産販売などWixにはない機能もある

BASEには、あらかじめデザインを作成しておき、注文が入ると生産して発送してくれる受注生産販売の機能もあります。

この機能を使えば、仕入不要でオリジナルグッズの販売ができます。Tシャツ以外に、スマホケース、マグカップなど色々なアイテムが作れます。

BASE（無料会員登録はこちら）

今時店長

BASEは、受注生産販売のほかにも、予約販売、定期販売、ダウンロード販売、抽選販売、など豊富な販売機能があります。

今回のまとめ

今回は、WixにBASEの商品を掲載する方法について解説しました。

すでにWixを利用しているかたで、１点、２点程度の商品を販売する際には、活用してほしい裏技ですね。

あわせてチェックしてほしいサービス

本気で決済機能が必要であればペライチがオススメです。

固定費を抑えたいかたにはJimdoがオススメです。

というわけで今回はここまで。
また新しい情報などあれば更新していきます。