WixとBASEの連携方法
※本ページはプロモーションが含まれています。

ネットショップの操作ガイド

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

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

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

今回の趣旨

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

WIX

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

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

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

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

Wixのモード

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

WIX
Wixのネットショップ評判どうなの?実際に掛かる費用・口コミなどをご紹介

今時店長皆さんこんにちは、今時店長です。 今回は、Web制作の世界をリードするデザインツール、Wixのネットショップ機能(Wixストア・Eコマース)について、料金や実際に利用した感想をご紹介します。 ...

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

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

BASE(ベイス)

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

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

サービス名称
BASE(ベイス)
運営事業者
BASE株式会社

初期費用
無料
月額費用
\無料で使える/
フリープラン
0

グロースプラン
5,980
最短契約期間
1カ月
商品登録数
無制限
(1日最大1,000件)
URL
独自ドメイン
利用可能※サブドメイン限定
常時SSL化
対応済み
特定商取引法に関する表記の一部非公開
2022年1月20日より、個人のショップオーナーを対象に特別商取引法の所在地・連絡先の非公開が可能になりました。
利用環境
WEBブラウザ
管理者用スマホアプリ
Google Chrome ※推奨
Safari 11 以降
Firefox
Microsoft Edge
参照元
BASE Creator
iOS(iPhone)
Android
スマートフォンもGoogle Chromeを推奨です。
サポート窓口
(日本語)
電話
メール
チャットでの問い合わせも対応してます。

BASE(無料ではじめる)

今時店長
BASEは、初期費用、固定費無料です。商品が売れた場合にのみ、手数料が差引されて入金される仕組みです。
BASE
BASE(ベイス)のココが凄い!12のメリット&サービスの特徴・評判・感想を聞きたい方はこちら

今回は、無料ネットショップ作成サービスのBASE(ベイス)について、実際に利用してみた経験などをもとにサービスの特徴(メリット)について解説します。 こんな方におすすめの記事 香取慎吾さんがCMする「 ...

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

赤線部分を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>
今時店長
上記で生成したソースコードを、Wixの「HTMLコードパーツ」に貼り付けて、WixページにBASEの商品を埋め込みます。

Wix ADIの手順

Wixサイト編集

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

Wix新しいセクションを追加

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

Wix ADIモードにてHTML編集方法

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

WixにBASEの商品を埋め込みする

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

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

WixにBASEの商品を掲載した完成イメージ

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

Wix エディタの手順

WixエディタでのHTML編集の様子

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

WixエディタにてHTML編集方法

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

WixエディタにてHTML編集方法

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

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

WixのエディタモードでBASEの商品を埋め込みした完成イメージ

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

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

完成後の挙動について

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

BASEの商品ページをJimdoに貼り付けた完成イメージ

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

BASEの商品ページ

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

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

BASEのセール割引設定

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

BASEインラインフレームの表示内容

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

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

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

今時店長オリジナルのTシャツ

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

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

BASE(無料ではじめる)

今時店長
BASEは、受注生産販売のほかにも、予約販売、定期販売、ダウンロード販売、抽選販売、など豊富な販売機能があります。
BASE
BASE(ベイス)のココが凄い!12のメリット&サービスの特徴・評判・感想を聞きたい方はこちら

今回は、無料ネットショップ作成サービスのBASE(ベイス)について、実際に利用してみた経験などをもとにサービスの特徴(メリット)について解説します。 こんな方におすすめの記事 香取慎吾さんがCMする「 ...

今回のまとめ

今時店長

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

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

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

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

ペライチ
ペライチ決済で売るべき商材はコレ!業界最安値水準の手数料でネットショップが簡単に作れる

今時店長皆さんこんにちは、今時店長です。 今回は、ホームページ作成サービスの「ペライチ」にある「決済オプション」について、サービスの特徴や最適な商材について解説していきます。 こんな方にオススメの記事 ...

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

ジンドゥー
ジンドゥーのネットショップどうなの?手数料や無料プランの制限内容について解説[実際に利用した感想・評価]

今時店長皆さんこんにちは、今時店長です。 今回は、Jimdo(ジンドゥー)のネットショップについて、実際に試用してみた経験をもとにサービスの内容や特徴(メリット)について解説します。 こんな方におすす ...

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

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

  • makeshop|新規ご契約でお得なクーポンプレゼント!10月14日まで
  • エックスサーバー|月額最大30%OFF&独自ドメイン永久無料!10月2日12時まで

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

おすすめ記事

無料で開業できるネットショップ作成サービスを徹底比較[CMで話題のオススメ・ツールを紹介] 1

今時店長皆さんこんにちは、今時店長です。 今回は、基本料金無料(タダ)で出店できる、ネットショップ作成サービスのについて、人気の傾向や料金や解説したのち、おすすめサービスをご紹介します。 こんな方に読 ...

商品仕入れ 2

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップの商品仕入れについてご紹介します。 個人が趣味や副業でも挑戦できるアイデアから、さらに本業として商品を仕入れるための基礎知識から具体的な ...

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

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

プロ目線で解説!ハンドメイドをネット販売する方法 4

今時店長皆さんこんにちは、今時店長です。 今回は、ハンドメイド・手作り・クラフト作品の方法について、ネット通販業界歴10年以上の経験をもとに、最適な販売方法について解説します。 こんな方にオススメの記 ...

MakeShop(メイクショップ) 5

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップ作成サービスのmakeshop(メイクショップ)について、サービスの特徴や手数料・実際に利用してみた感想をご紹介します。 こんな方にオス ...

オリジナルTシャツの販売 6

今時店長皆さんこんにちは、今時店長です。 今回は、自作のデザインを在庫リスクなしで販売できるサービスをご紹介します。 こんな方におすすめの記事 資金は無いけどオリジナル商品を販売したい方。 YouTu ...

ネットショップの確定申告 7

今時店長皆さんこんにちは、今時店長です。 今回はネットショップ(BASE、カラーミーなど)を運営している方に、はじめての確定申告について解説します。 ネットショップを運営している方だけでなく、ハンドメ ...

無料で実店舗とネットショップの在庫連動 8

今時店長皆さんこんにちは、今時店長です。 今回は、初期費用、固定費無料で使える決済サービスの「Square」を利用した、実店舗とネットショップの在庫を連携する方法について解説します。 実店舗とネットで ...

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

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

マルチ決済端末を徹底比較!おすすめサービス料金・特徴・選び方のポイント解説 10

今時店長皆さんこんにちは、今時店長です。 今回は、1台でお店をキャッシュレス化できる、マルチ決済端末について比較してみました。おすすめキャッシュレス決済端末から、レシートプリンター内蔵のオールインワン ...

無料で使えるPOSレジアプリ徹底比較 11

今時店長皆さんこんにちは、今時店長です。 今回は、スマートフォン(iPhone)やタブレット(iPad/Android)端末で利用できる、無料で使えるPOSレジアプリを4つご紹介します。 無料で使える ...

-ネットショップの操作ガイド
-,

Copyright © 2013-2023 いまどきのネットショップ開業講座