第3回:Shopify でECサイト構築(WordPressでShopifyを使う方法)

第3回:Shopify でECサイト構築(WordpressでShopifyを使う方法)

今日はShopifyのカート機能だけを使えるプランでWordpressにカートを設置する方法をご紹介します。

商品数の少ない店舗や、現在ブログのアクセス数が安定しておりそこから販売につなげたいという方にはおすすめの方法です。

Shopifyのカート機能だけ使いたい時は Shopify Lite がおすすめ

Shopifyにはいくつかプランがあり、ネットショップ機能を使いたい場合には「Basic Shopify」という月々$29のプランを利用する必要があります。

Basic Shopifyなら、独自ドメインの設定をしたネットショップの構築やInstagramと連携させた販売路線を作ることも可能ですが、そこまで機能を求めていなかったり商品数がまだ少ない店舗なら「Shopify Lite」という月々$9のプランがおすすめです。

 

Shopify Liteでできること

Shopify Liteでできることは、カート機能の利用(決済を含む)と実店舗のPOSです。

決済方法は以下を選ぶことができます。

Shopify Lite で使える決済方法
・クレジットカード
・代金引換
・銀行振込
・AmazonPay
・Apple Pay
・Paypal決済
クレジットカードの決済手数料
・国内: 3.4%+¥0
・海外/AMEX: 3.9%+¥0
・銀行振込

と、なかなかの充実ぶりです。

商品登録数は限りがありませんので、自社ECサイトの構築までは…と考えている人にとってはかなりお手頃なのではないでしょうか?

 

では、実際にWordpressにカートボタンを追加する方法をご紹介していきます。

 

Shopifyの購入ボタン設置の表示は3種類

Shopifyに登録した商品の購入ボタンの表示の見え方は3種類から選ぶことができます。
実際に決済までできるボタンをつけてみました。

動きを試してみたい方は「カートに入れる」ボタンをクリックして試してみてくださいね。

 

ボタンだけを表示

シンプルにボタンだけを表示させる場合はこんな感じに見えます。
ボタンの色、角の丸さ、文字の色などカスタマイズ可能です。
写真や説明をページごとに凝った作りにしたい人はボタンだけ追加でも良さそうですね。

シンプルに写真とボタンを表示

Shopifyで登録したサムネイル1枚とカートに追加ボタンを表示。
サイドバーなどにカートを追加したい人にも向いている見せ方かもしれません。

ページ全体を表示

Shopifyで登録したサムネイルと、全ての写真をスライドで表示。
さらにShopify内の商品説明もそのまま使えます。

ボリュームのあるページになりますね。
とにかく写真をたくさん見せたい人にはこの見せ方は有効そうですね。


 

色々なシチュエーションで使えそうですね。

Shopifyの購入ボタン設置のやり方

実際に購入ボタンを設置するのはとても簡単です。
ShopifyにShopify Liteプランで登録し、商品管理から販売商品の登録していることを前提にして説明していきます。(もちろんShopify Liteプラン以外の上位プランでも設置可能です)

管理画面のサイドメニューからBuy Buttonをクリック

管理画面のサイドメニューからBuy Buttonをクリック

サイドメニューにある、販売チャネルからBuy Buttom >購入ボタンを作成するをクリックします。

ボタンの種類を選びます

ボタンの種類を選びます

商品購入ボタンを選ぶと1商品に対してのボタンを、コレクション購入ボタンを選ぶとコレクションという自分で作れるカテゴリーの商品を全て表示することができます。

今回は1つの商品のボタンを作成してみます。

ボタンを作成する商品を選ぶ

ボタンを作成する商品を選びます

レイアウトデザインを決める

レイアウトデザインを決める

レイアウトデザインの詳細を決めます。

レイアウトスタイル

レイアウトスタイルの項目では見た目の3種類を選ぶことができます。

・ベーシック(ボタンのみ)
・クラシック(写真1枚とボタン)
・フルプレビュー(全ての項目を表示)

ボタンのスタイル

ここではボタンの見た目を変更できます。

・ボタンの角
・ボタンの幅
・ボタンの色
・テキストの色
・フォント
・文字の大きさ

レイアウト

ここはボタンエリアのレイアウトデザインを変更できます。

・ボタンのテキスト(デフォルトはAdd to cart)
・説明文の文字色
・商品名の文字色
・フォント
・文字の大きさ

ショッピングカート

カートに商品を入れた後のカート内の文字の変更ができます。
デフォルトは英語になっているので、カートを日本語表示にしたい場合はここで変更します。

 

コードをコピーしてWordpress(Wix)に貼り付け

コードをコピーしてWordpress(Wix)に貼り付け

見た目の設定が終わり「次へ」をクリックすると、コードが表示されるのでコードをコピーしてWordpressにペーストすれば完成です。

 

Wordpressにペーストするときには、ビジュアルモードではなく、テキストモードにして貼り付けしましょう

Shopifyの導入に悩んだらまずはカート利用がお得

あっという間にカートをブログに追加することができますね!
ECサイトを構築するほど商品数がなかったり商品の数がまだ少なく見栄えがなぁと思っている方はまずShopifyのLiteプランがおすすめです。

月々$9ならお試しとしてもそんなにお財布に痛くありませんよね。

 

つなぐデザインではShopifyのカスタマイズをはじめLiteプランを使ってWordpressでサイト構築と同時に商品の販売機能も追加して制作することが可能です。

もちろん使い方や変更の方法もしっかりレクチャーしますし、更新までお任せいただければ対応も可能です。

まずはお気軽にご相談くださいね。

 

     

     

    (Visited 168 times, 1 visits today)