カートパーマリンクとは、商品が追加されている状態のチェックアウトページのURLを発行する機能です。
- メルマガ
- SNS
- ブログ記事
- LP(ランディングページ)
- etc
リンクなので、上記のようにあらゆる場所で利用できるのがカートパーマリンクの最大のメリット。
クーポンを適用したり、セット商品を販売することもできます。
顧客を直接チェックアウトページに誘導できるので、購入プロセスが簡潔になり、購入率アップに貢献してくれます。
本記事では、ECマーケティングにぜひ活用したいShopifyのカートパーマリンクの設定方法を詳しく解説します。
購入ボタンアプリでチェックアウトリンクを作成する
最も手軽なカートパーマリンクの作成方法は、アプリを利用する方法でしょう。
Buy Button channelをインストールします。無料で利用できます。
管理画面[商品管理]からカートパーマリンクを作成したい商品の詳細ページに移動し、画面右上[その他の操作]→[Create checkout link]をクリックします。
バリエーションがある場合はいずれかをチェックし、[リンクをコピー]をクリックすればURLがクリップボードにコピーされます。
テキストリンクやボタンなど任意の形式で挿入して使用できます。
なお、チェックアウトリンクは編集できません。
つまり、単一商品(バリエーション)のカートパーマリンクのみの発行です。
手動でカートパーマリンクを作成する
もちろん、アプリを使わなくても作成できるし、柔軟にカートパーマリンクを設定するには手動で行います。
カートパーマリンクの基本形式は以下の通り。
http://yourdomain.com/cart/バリアントID:数量
商品のバリアントIDと数量(整数)を、コロン:
で繋ぎます。
複数商品のカートパーマリンクは以下の形式です。
http://yourdomain.com/cart/バリアントID:数量,バリアントID:数量
カンマ,
で区切ってバリアントID:数量
を追加していきます。
リンク形式で発行する
HTMLでリンクを挿入するタグは、以下のように記述します。
<a href="カートパーマリンク">テキスト</a>
例えば、ブログ記事やページなどの場合は、エディタのテキストを選択してを使えばリンクアイコンをクリックして設定できます。
バリアントIDを調べる
Shopifyの商品情報には、[商品ID]以外に[バリアントID(商品のバリエーションごとのID)]が存在します。
カートパーマリンクでは商品IDは使わず、バリアントIDで指定します。
バリアントIDを確認する方法は以下の通りです。
商品ページのURLで確認する
Shopifyストアフロントの商品ページにアクセスし、ブラウザのアドレスバーを確認します。
http://yourdomain.com/products/handle?variant=11223344556677
のような形式で表示されます。
?variant=11223344556677
の=
の後の数値がバリアントIDです。
バリアントIDが表示されていない場合は、一旦別のバリエーションを選択してから再び選択することでバリアントIDが表示されるはずです。
そもそもバリエーションが無い商品は商品ページのURLから確認できません。
管理画面から確認する
管理画面から個別のバリエーション情報を表示し、そのURLからバリアントIDを確認することもできます。
variants/
以降の数値がバリアントIDです。
バリエーションの無い商品のバリアントIDの確認方法
バリエーションが無い商品にもバリアントIDは存在します。
しかし、商品ページのURLから確認しようとしてもバリアントIDは表示されません。
そこで、ソースコードから確認します。
ブラウザ上で右クリックし、[ソースを表示]または[ページのソースを表示]といったメニューをクリックします。(表記はブラウザによって異なる)
ページ内検索でvariants":[{"id":
と検索します。
variants":[{"id":11223344556677,
のよう記載されている数値の部分がバリアントIDです。
ページ内検索はWindowsならCtrl
+f
、Macなら⌘
+f
で実行します。
チェックアウトではなくカート画面にリンクさせる
カートパーマリンクはデフォルトでチェックアウト画面にアクセスする仕様ですが、カートページに遷移させることもできます。
http://mystore.myshopify.com/cart/商品バリエーションID:数量?storefront=true
カートパーマリンクに?storefront=true
というパラメータを付加すればOKです。
ディスカウントを適用したカートパーマリンク
ディスカウントが適用された状態のチェックアウトを用意できます。
http://mystore.myshopify.com/cart/商品バリエーションID:数量?discount=ディスカウントコード
カートパーマリンクに?discount=XXXXXXXXXXX
というパラメータを付けます。
=
の後に実際のディスカウントコードを記述します。
複数のディスカウントコードを追加したい場合は、ディスカウントコードをカンマ,
で繋ぎます。
http://mystore.myshopify.com/cart/商品バリエーションID:数量?discount=ディスカウントコード,ディスカウントコード
ディスカウントコード自体にカンマを使用している場合、そのディスカウントコードをカートパーマリンクに使用することはできないので注意です。
Shopifyのディスカウント機能と発行方法の詳しい解説は以下の記事をどうぞ。
顧客情報を入力したチェックアウトURL
顧客情報が入力された状態のカートパーマリンクを発行することもできます。
特定の顧客のためのチェックアウトである場合に、入力の手間を簡略化させることができます。
チェックアウトパラメータ | 説明 |
---|---|
checkout[email] | 顧客のメールアドレス |
checkout[shipping_address][first_name] | 配送先住所の「名」フィールド |
checkout[shipping_address][last_name] | 配送先住所の「姓」フィールド |
checkout[shipping_address][address1] | 配送先住所の「住所1」フィールド |
checkout[shipping_address][address2] | 配送先住所の「住所2」フィールド |
checkout[shipping_address][city] | 配送先住所の「市区町村」フィールド |
checkout[shipping_address][province] | 配送先住所の「都道府県」フィールド |
checkout[shipping_address][country] | 配送先住所の「国」フィールド |
checkout[shipping_address][zip] | 配送先住所の「郵便番号」フィールド |
入力例としては、以下のような形式になります。
https://yourdomain.com/cart/11223344556677:2?checkout[email]=mail@example.com&checkout[shipping_address][last_name]=山田&checkout[shipping_address][first_name]=太郎
私の環境に限った話かもしれませんが、パラメータの値が入力される場合と表示されない場合がありました。キャッシュ等の問題かもしれませんが、正確な原因は今のところ特定できていません。
パラメータを組み合わせる
パラメータとは、ざっくり言うと「付加情報」です。
URLにパラメータ(とその値)を追加してアクセスすると、その情報に基づいてページが何らかの処理を行います。
URLの?
以降の部分がパラメータとなります。
http://mystore.myshopify.com/cart/商品バリエーションID:数量?パラメータ=値
パラメータとその値はイコール=
で繋ぎます。これで1セットです。
複数のパラメータ(とその値)をセットしたい場合は、パラメータ同士を&
で繋ぎます。
http://mystore.myshopify.com/cart/商品バリエーションID:数量?パラメータ=値&パラメータ=値&パラメータ=値
例えば、クーポンコードのパラメータとカートページへのパラメータを付加したい場合は以下のように記述します。
http://mystore.myshopify.com/cart/11223344556677:1?discount=XXXXXXXX&storefront=true
まとめ
- カートパーマリンクで直接チェックアウト画面から販売できる
- URLなので、様々な媒体に掲載できるのが強み
- カートパーマリンクには商品IDではなくバリアントIDが使用される
- バリアントIDはストアフロント商品ページ or 管理画面の商品バリエーション個別ページから確認できる
- バリエーションの無い商品はストアフロント商品ページのソースコードから確認できる
- チェックアウトページではなく、カートページにリンクさせることもできる
- ディスカウント(クーポン)や顧客情報をセットした状態のカートパーマリンクも作成できる
- パラメータを複数セットしてカートパーマリンクをカスタマイズできる
コメント