Shopifyで販売している場合、CTAボタンのデザインは非常に重要です。プロモーションページ、VIP向けニュースレターの登録、アフィリエイトリンクのいずれに誘導する場合でも、目を引くボタンはページに埋もれてしまうボタンよりも多くクリックされます。そして、ストアフロントにおいては、クリック数が増えるほど売上も増えるのです。
Dawnを含むShopify OS 2.0テーマにはネイティブのボタンブロックが用意されていますが、それらのボタンの見た目をコントロールできる範囲はごくわずかです。このブロックでは、ラベル、リンク、スタイルが塗りつぶしか輪郭線かを設定できますが、色はグローバルなテーマ設定から適用されます。これによりストアに一貫性が保たれますが（それこそがテーマ設定の目的です）、同時に、目立たせたいボタンがサイト上の他のすべてのボタンと同じ見た目になってしまうことも意味します。
独自の色、ホバー効果、アイコンを備えた単独のボタンを作成するには、2つのアプローチのいずれかを取る必要があります。テーマエディタにカスタムLiquidブロックを追加してHTMLとCSSを自分で記述するか、スタイリングを処理して貼り付け用の埋め込みコードを提供してくれる無料のホスト型ウィジェットを使用するかのどちらかです。
テーマコードを編集したり開発者に費用を支払ったりすることなく、Shopifyストアにコンバージョン最適化されたカスタムCTAボタンを設置したい場合、このガイドでは両方の方法を使ってShopify ボタンを追加する方法を解説します。
オプション1: カスタムLiquidとCSSを使用する
サードパーティ製のアプリをインストールせずにShopifyのストアフロントに独自のボタンデザインを導入する標準的な方法は、自分でコードを記述することです。Shopifyのテーマエディタには、独自のHTMLとCSSを追加できるカスタムLiquidセクションが含まれているため、テーマのファイルを直接編集することなく、ボタンを定義して思いどおりにスタイリングできます。
カスタムLiquidとCSSを使ってShopify ボタンを追加する方法は次のとおりです。
- Shopify管理画面から、左側のメニューにあるオンラインストアに移動します。次に、オンラインストアの横にある鉛筆アイコンをクリックするか、画面上のテーマを編集するをクリックします。
- 左側のサイドバーでセクションを追加をクリックし、カスタムLiquidを検索して選択します。右側にコードを入力するテキストフィールドが表示されます。
- ボタン用のHTMLを、CSSを含む<style>ブロックとともに追加し、右上隅にある保存をクリックします。作業を進めると、変更内容がプレビューに反映されます。
この方法を使う際の注意点: スタイリングを自分で記述するということは、ミスを犯すリスクがあることを意味します。スコープを限定したセレクタなしで記述されたルールはページ上の他の要素に影響を及ぼす可能性があり、ヘッダーやフッターに追加されたカスタムLiquidはストアのすべてのページに表示されます。そのため、わずかなミスでも、スタイリングしようとしていたボタンだけにとどまらない大きな影響を及ぼすことがあります。また、Shopifyはコードを編集する前にバックアップとしてテーマを複製することを推奨しており、このことはプラットフォームがそのリスクをどう捉えているかを反映しています。
開発者を雇えば技術的な問題は解決するかもしれませんが、たった1つのボタンのために正当化しにくいコストが発生します。特に、いくつかのバージョンをテストしたい場合、変更のたびに別途依頼が必要になることを考えればなおさらです。
オプション2: 無料でカスタマイズ可能なボタンウィジェットを追加する（おすすめ）
リスクなしでデザインをコントロールしたいですか？ホスト型の無料ボタンウィジェットは、独自の色、ホバー状態、アイコンを備えた、ShopifyにおけるカスタムLiquidの代替手段です。ビジュアルビルダーでボタンをカスタマイズし、埋め込みコードをコピーして、テーマエディタのカスタムLiquidブロックに貼り付けることができます。
Jotformのボタンウィジェットは、Shopifyのネイティブブロックにはないスタイリングオプションを提供します。背景色、テキスト色、ホバー色をそれぞれ独立して設定でき、ラベルの前後にアイコンを追加したり、角丸の半径、高さ、余白、ドロップシャドウを調整したりできます。
Jotformのボタンウィジェットを使ってShopify ボタンを追加する方法は次のとおりです。
- Jotformワークスペースのページで作成をクリックし、ウェブサイトウィジェットを選択して「Button」を検索し、ウィジェットを使用をクリックします。
- 一般タブで、ボタンのアクションを選択し、求められる情報（メールアドレス、電話番号、URLリンクなど）を入力して、ボタンのラベルを記述します。オファーに補足説明が必要な場合は、2行目のテキストや周囲のテキストを追加しましょう。
- スタイルタブで、色を設定し、アイコンをオンにしてその位置を選択し、形状とサイズを調整します。レイアウトタブでは、ボタンをインラインにするかフローティングにするか、またデスクトップ、モバイル、その両方のどこに表示するかを制御できます。
- 上部のナビゲーションバーにある公開をクリックし、左側メニューの埋め込みセクションでコードをコピーをクリックします。
プラットフォームをクリックしてShopifyを選択すると、プラットフォーム別の埋め込み手順を確認することもできます。
- カスタムボタンをShopifyに埋め込むには、テーマエディタを開き、ページテンプレートを選択して、セクションを追加またはブロックを追加をクリックし、カスタムLiquidを選択して埋め込みコードを貼り付け、右上隅にある保存をクリックします。
このオプションでは、ボタンをウェブサイトのテーマ内で直接ではなくJotformでスタイリングするため、変更内容はグローバルなテーマ設定とは分離されたままになります。別の色やラベルをテストする場合も、再びテーマのコードを編集するのではなく、ウィジェットを編集するだけで済みます。設定の全手順については、ウェブサイトにボタンを追加する方法をご覧ください。
スマートでサーバーレスなウィジェットでShopifyストアを強化する
ボタンは、開発者を雇ったり別の月額アプリに費用を払ったりすることなくサイトに追加できる、いくつかの機能のうちの1つにすぎません。Shopifyのコールトゥアクションの代替手段として、Jotformの無料ウェブサイトウィジェットのディレクトリには150以上のオプションがあり、ボタンと同じようにストアフロントの不足を補うことを目的としたものも複数含まれています。
たとえば、お知らせバーウィジェットは、送料無料の条件やセール期間を各ページの上部に表示し、買い物客がチェックアウトする前に目にできるようにします。購入ボタンウィジェットは、購入用のCTAで買い物客を商品、カート、またはチェックアウトのURLへ直接誘導するため、キャンペーンのランディングページや購入後のアップセルに適しています。また、eコマースカテゴリには商品カードや料金表があります。さらに、ストアと並行して顧客情報を収集できるJotformとShopifyの連携もあります。
各ウィジェットはボタンと同じ方法で埋め込めるため、シンプルな機能を追加したいたびに別のアプリのサブスクリプション料金を支払う必要はありません。
eコマースブランドとして、あなたの時間と予算は、1つのボタンを他と違って見せるためにカスタムLiquidを書くことではなく、商品の調達や広告ファネルの改善といったことに費やされるべきです。Jotformのボタンウィジェットなら、テーマに手を加えることなく、わずか1分でスタイルを変更できるCTAを手に入れられます。今すぐ無料でお試しください。
この記事は、テーマ設定に縛られたりカスタムLiquidコードを書いたりすることなく、高度にカスタマイズされたコンバージョン最適化済みのコールトゥアクションボタンを追加したいShopifyストアのオーナー、ドロップシッパー、eコマースマネージャー向けです。
コメントの送信: