Shopifyお気に入りアプリ「Swish」のカスタマイズ方法｜アイコン変更・日本語化・テーマとのデザイン統一

Shopifyストアにお気に入り（ウィッシュリスト）機能を追加できるアプリ「Swish」。導入自体は簡単ですが、実際に運用するとなると「アイコンをブランドに合わせて変えたい」「ボタンの文言を自然な日本語にしたい」「アプリのボタンだけ浮いて見えるので、テーマのデザインに揃えたい」といった調整が必要になります。

先日、私たちが保守を担当しているクライアントのShopifyストアで、まさにこの一連のカスタマイズを行いました。きっかけは「お気に入りボタンのハートのアイコンを星に変えたい」というご要望です。ハートはお気に入り機能の定番アイコンですが、ブランドイメージから考えると少し可愛すぎる、という判断でした。

Swishはアプリの紹介記事こそ日本語で多く見つかるものの、実際のカスタマイズ手順を解説した日本語の情報はほとんどありません。この記事では、アイコンの変更、ボタン文言の日本語化、テーマとのデザイン統一、メニューへのリンク追加まで、実際の作業で使ったコードとあわせて解説します。

Swishとは

Swish（Shopifyアプリストア）は、以前「Wishlist King」という名前で提供されていたShopifyのお気に入りアプリです。名称が変わっただけで、開発チームと製品は同じものです。

コレクションページの商品画像上のお気に入りボタン、商品ページのボタン、お気に入り一覧ページ、リマインドメールなど、お気に入り機能に必要な要素が一通り揃っています。特徴的なのは「Code Editor」というカスタマイズ機構を備えていて、アイコン・翻訳・CSS・コンポーネントのコードまで直接編集できる点です。カスタマイズの自由度は、お気に入り系アプリの中でもかなり高い部類だと思います。

一方で、管理画面とヘルプはすべて英語で、日本語サポートはありません。この記事で扱うのは、その英語の管理画面を前提とした実際の操作手順です。

カスタマイズの前提：Code Editorと「{Code} Access」

Swishのカスタマイズは、Swishの管理画面にあるSettings > Code Editorから行います。Code Editorの中に、アイコンを定義するCustom Icons、文言を管理するTranslations、スタイルを追加するCustom CSSなどのファイルが並んでいます。

ここで最初に知っておきたい重要なポイントがあります。Code Editorで加えたカスタムコードは、テーマ側で「{Code} Access」というApp embedを有効にしないと読み込まれません。手順は次のとおりです。

1. Shopify管理画面からテーマエディタ（カスタマイズ画面）を開く
2. 左上のApp embeds（アプリ埋め込み）アイコンをクリック
3. 「{Code} Access」をオンにして、環境（Main）を選択
4. 保存

私たちも最初、Custom Iconsを書き換えて保存したのにプレビューではハートのまま、という状態になり、原因がこの設定でした。

もう1つ注意点があります。App embedsの設定はテーマごとに独立しています。下書きテーマで動作確認をする場合は下書きテーマ側で有効化し、本番公開のタイミングでライブテーマ側でも有効化されているかを必ず確認してください。下書きでは動いていたのに、公開したら反映されていない、という食い違いはここで起こります。

お気に入りアイコンをハートから星に変更する

SVGの要件

Swishのアイコンは、公式ドキュメントのFAQに要件が記載されています。

• フォーマット：SVG
• サイズ：64×64ピクセル
• strokeとfillの両方のプロパティを含むこと

今回はサイトの別の箇所で使っていた15×15の星型SVGが手元にあったため、これを64×64にスケール変換して流用しました。既存のアイコン素材がある場合、viewBoxを64×64にしてtransformで拡大すれば、パスデータはそのまま使えます。

Custom Iconsの書き換え

Swish管理画面のSettings > Code Editor > Custom Iconsを開くと、iconsオブジェクトの中に各アイコンのSVGコードが定義されています。ファイルをアップロードする形式ではなく、このコードを直接書き換える形式です。

お気に入りボタンのアイコンはwishlistキーです。中身を次のように置き換えます。

wishlist: `
  <svg viewBox="0 0 64 64">
    <path transform="translate(2.4,2.4) scale(4)" d="M7.39333 11.6328L3.46083 14.0075C3.34527 14.0646 3.23802 14.0877 3.13908 14.0768C3.04086 14.0653 2.94516 14.0313 2.85199 13.975C2.75811 13.9172 2.68733 13.8356 2.63966 13.7302C2.59199 13.6247 2.58766 13.5095 2.62666 13.3846L3.67316 8.93208L0.21191 5.93125C0.11441 5.85181 0.0501325 5.75683 0.019077 5.64633C-0.0119786 5.53583 -0.00511742 5.43003 0.0396604 5.32892C0.0844381 5.22781 0.144021 5.14475 0.21841 5.07975C0.293521 5.01692 0.394633 4.97431 0.521744 4.95192L5.08908 4.55325L6.87008 0.336917C6.91919 0.21775 6.98997 0.131805 7.08241 0.0790833C7.17486 0.0263611 7.27849 0 7.39333 0C7.50816 0 7.61216 0.0263611 7.70533 0.0790833C7.79849 0.131805 7.86891 0.21775 7.91658 0.336917L9.69758 4.55325L14.2638 4.95192C14.3917 4.97358 14.4931 5.01656 14.5682 5.08083C14.6434 5.14439 14.7033 5.22708 14.7481 5.32892C14.7921 5.43003 14.7986 5.53583 14.7676 5.64633C14.7365 5.75683 14.6722 5.85181 14.5747 5.93125L11.1135 8.93208L12.16 13.3846C12.2004 13.5081 12.1965 13.6229 12.1481 13.7291C12.0997 13.8352 12.0285 13.9169 11.9347 13.9739C11.8422 14.0317 11.7465 14.066 11.6476 14.0768C11.5494 14.0877 11.4425 14.0646 11.3269 14.0075L7.39333 11.6328Z"/>
  </svg>
`,

ポイントは、SVG側で色（fillやstroke）を指定しないことです。色はSwish側がボタンの状態に応じて付与するため、パスに色指定を残していると意図どおりに切り替わりません。

よくある構文エラー

書き換えて保存した際に「Error in line ○: Unexpected end of file」のようなエラーが出た場合は、バッククォート・カンマ・閉じ括弧の対応を確認してください。特に多いのが、元の行のバッククォートを残したまま新しいコードを貼り付けて、バッククォートが二重になっているケースです。次の3点をチェックすると、たいてい解決します。

• 各アイコンの定義がバッククォートで開いてバッククォートで閉じているか
• 定義の末尾にカンマがあるか
• iconsオブジェクト全体の閉じ括弧が残っているか

保存してもプレビューに反映されない場合は、前述の「{Code} Access」が有効になっているかを確認してください。

ボタンの文言を自然な日本語に変更する

Swishは多言語表示に対応していて、ボタンの文言は翻訳ファイルで管理されています。「カートに追加」「売り切れ」などの文言を変えたい場合は、Settings > Code Editor > Translations > Japaneseを開きます。

たとえばカートに追加するボタンの文言なら、翻訳ファイル内で「add_to_cart」を検索し、右側の値（表示される文字列）だけを書き換えます。sold_out、in_cart、wishlist_button系のキーも同じ要領で変更できます。

注意点は1つだけで、左側のキー名は変更しないことです。キー名はプログラム側から参照される識別子なので、書き換えると文言が表示されなくなります。

ボタンの配置をテーマに揃える

商品ページのお気に入りボタンを全幅で配置している場合、ボタン内のテキストが左寄せのままだと、テーマの他のボタンと並んだときに違和感が出ることがあります。

これはCSSを書く必要はなく、テーマエディタ側の設定で対応できます。商品テンプレートを開き、Swishの「Wishlist button」ブロックを選択すると、設定パネルにContent alignmentの項目があります。ここをCentreにして保存すれば、テキストが左右中央に配置されます。

私たちも最初はCustom CSSでの調整を試みたのですが、うまく効かず、公式ドキュメントを調べ直して設定項目の存在に気づきました。Swishは見た目に関する設定が意外と細かく用意されているので、CSSを書く前にまずテーマエディタとApp embedsの設定パネルを確認することをおすすめします。

お気に入り一覧ページのボタンをテーマのデザインに統一する

ここからは少し踏み込んだカスタマイズです。お気に入り一覧ページ（デフォルトのURLは /apps/wishlist）の「カートへ追加」ボタンは、初期状態では塗りつぶしのボタンスタイルで表示されます。今回のストアではコレクションページのカート追加ボタンが「カートアイコン＋下線付きテキスト」というデザインだったため、スマートフォン表示ではお気に入り一覧側もこれに揃えることにしました。

作業は2段階です。まずボタンのHTML構造にカートアイコンを追加し、次にCSSでテーマ側と同じ見た目に整えます。

ボタンにカートアイコンを追加する

お気に入り一覧のボタンは、Settings > Code Editor > Custom Product Cards内、renderCta()というメソッドで生成されています。ここのsubmitボタンに、アイコン表示用のwk-icon要素を1行追加します。

return html`
  <button
    type="submit"
    class="wk-cta-button"
    data-wishlist-item-id=${this.wishlistItem.id}
    ?disabled=${!variant || !variant.available}
  >
    <wk-icon icon="cart" class="wk-cta-cart-icon"></wk-icon>
    <span class="wk-cta-label">${getAddToCartLabel()}</span>
    <wk-icon icon="spinner" class="wk-cta-spinner"></wk-icon>
  </button>
`;

icon=”cart”で参照するアイコンは、初期状態のSwishには存在しないため、Settings > Code Editor > Custom Iconsに新しくcartキーとして追加します。前述のwishlistキーと同じ階層に、次の形式で定義を書き足します。

cart: `
  <svg viewBox="0 0 64 64">
    <g transform="scale(3.2)">
      <path d="（テーマのカートアイコンのパスデータをそのまま貼り付け）"/>
    </g>
  </svg>
`,

今回はテーマが持っているカートアイコンのスニペットからSVGのパスデータをコピーし、20×20だったviewBoxを64×64に合わせるため、transformで3.2倍に拡大しました。その際、パスに付いていたfill指定と、カート内の点数を示すバッジ用の要素は削除しています。色はSwish側が付与するため、ここでも色指定を残さないのがポイントです。テーマ側と完全に同じ形のアイコンを表示させることで、アプリのページであることをほとんど意識させない見た目になります。

CSSでテーマのボタンスタイルを移植する

仕上げに、Settings > Code Editor > Custom CSSへ次のスタイルを追加します。スマートフォン（今回のテーマではブレイクポイントが1023px以下）ではテーマのクイック購入ボタンと同じ「アイコン＋下線付きテキスト」に、PCでは従来のボタンのままアイコンだけ非表示、という切り分けです。

/* SP(〜1023px): コレクションページのカート追加ボタンと同じ見た目に */
@media screen and (max-width: 1023px) {
  wishlist-page .wk-cta-button {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #333;
    width: fit-content;
    margin: 0 auto 3px;
    padding: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
  }
  wishlist-page .wk-cta-cart-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-left: 0;
  }
  /* Swishが付与するstrokeを無効化し、テーマ側と線の太さを揃える */
  wishlist-page .wk-cta-cart-icon svg,
  wishlist-page .wk-cta-cart-icon svg path {
    stroke: none;
    stroke-width: 0;
  }
  wishlist-page .wk-cta-cart-icon svg path {
    fill: #333;
  }
  wishlist-page .wk-cta-button .wk-cta-label {
    display: block;
    opacity: 1;
    white-space: nowrap;
    font-size: calc(0.9rem * var(--adjust-button, 1));
  }
}

/* PC(1024px〜): 従来のボタンのまま、アイコンは非表示 */
@media screen and (min-width: 1024px) {
  wishlist-page .wk-cta-cart-icon {
    display: none;
  }
}

数値やセレクタの一部（ブレイクポイント、フォントサイズの変数など）は使用しているテーマに依存するので、テーマ側のボタンのCSSを確認しながら合わせてください。考え方としては、テーマのボタンに当たっているスタイルをそのままSwishのボタンに移植するイメージです。

ドロワーメニューに「お気に入り」リンクを追加する

最後に、スマートフォンのドロワーメニュー（ハンバーガーメニュー）からお気に入り一覧へ移動できるように、リンクを追加します。これはSwish側ではなく、テーマのコード編集での対応です。

今回のテーマではドロワーメニューがsnippets/nav-drawer.liquidにあったため、ログインリンクの並びに次のコードを追加しました。ファイル名やクラス名はテーマによって異なるので、構造の参考としてご覧ください。

<li class="mobile-menu__item{% if request.path contains '/apps/wishlist' %} mobile-menu__item--active{% endif %}">
  <a href="/apps/wishlist" class="mobile-navlink mobile-navlink--small mobile-navlink--wishlist">
    <svg class="icon-star-wishlist" width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" aria-hidden="true">
      <path d="M7.39333 11.6328L3.46083 14.0075C3.34527 14.0646 3.23802 14.0877 3.13908 14.0768C3.04086 14.0653 2.94516 14.0313 2.85199 13.975C2.75811 13.9172 2.68733 13.8356 2.63966 13.7302C2.59199 13.6247 2.58766 13.5095 2.62666 13.3846L3.67316 8.93208L0.21191 5.93125C0.11441 5.85181 0.0501325 5.75683 0.019077 5.64633C-0.0119786 5.53583 -0.00511742 5.43003 0.0396604 5.32892C0.0844381 5.22781 0.144021 5.14475 0.21841 5.07975C0.293521 5.01692 0.394633 4.97431 0.521744 4.95192L5.08908 4.55325L6.87008 0.336917C6.91919 0.21775 6.98997 0.131805 7.08241 0.0790833C7.17486 0.0263611 7.27849 0 7.39333 0C7.50816 0 7.61216 0.0263611 7.70533 0.0790833C7.79849 0.131805 7.86891 0.21775 7.91658 0.336917L9.69758 4.55325L14.2638 4.95192C14.3917 4.97358 14.4931 5.01656 14.5682 5.08083C14.6434 5.14439 14.7033 5.22708 14.7481 5.32892C14.7921 5.43003 14.7986 5.53583 14.7676 5.64633C14.7365 5.75683 14.6722 5.85181 14.5747 5.93125L11.1135 8.93208L12.16 13.3846C12.2004 13.5081 12.1965 13.6229 12.1481 13.7291C12.0997 13.8352 12.0285 13.9169 11.9347 13.9739C11.8422 14.0317 11.7465 14.066 11.6476 14.0768C11.5494 14.0877 11.4425 14.0646 11.3269 14.0075L7.39333 11.6328Z"/>
    </svg>
    お気に入り
  </a>
</li>

リンク先はお気に入り一覧の /apps/wishlist です。request.pathでの条件分岐は、お気に入り一覧を表示中にメニュー項目へアクティブ状態のクラスを付けるためのものです。

星のSVGはお気に入りボタンと同じパスを使っていますが、こちらは塗りつぶしではなく枠線のみのスタイルにしました。fill=”none”で塗りを消し、stroke=”currentColor”で枠線をテキストと同じ色にしています。stroke-linejoin=”round”を付けると星の角が少し丸まり、小さいサイズでもきれいに見えます。線の太さはstroke-widthで調整できるので、メニュー内の他のアイコンと見比べて合わせると統一感が出ます。

あとはテーマのCSSファイルに、アイコンとテキストを横並びにするスタイルを追加すれば完成です。

/* お気に入りリンク: 星とテキストを横並びに */
.mobile-navlink--wishlist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mobile-navlink--wishlist .icon-star-wishlist {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

Swishのカスタマイズに関するよくある質問

Custom Iconsを書き換えたのに反映されないのはなぜですか？

まず、テーマエディタのApp embedsで「{Code} Access」が有効になっているかを確認してください。Code Editorのカスタムコードは、このApp embedが有効なテーマでのみ読み込まれます。App embedsの設定はテーマごとに独立しているため、下書きテーマと本番テーマの両方で確認が必要です。

アイコンに使うSVGの条件はありますか？

公式ドキュメントでは、64×64ピクセルのSVGで、strokeとfillの両方のプロパティを含むことが条件とされています。既存のSVG素材を使う場合は、viewBoxを64×64にしてtransformで拡大すれば流用できます。色の指定はSwish側が行うため、パスには色を付けないでください。

日本語サポートがない中で、設定でつまずいたらどうすればいいですか？

Swishには全プラン共通で無料のセットアップ・カスタマイズサポートが付いているので、英語でのやりとりにはなりますが、開発元に依頼する選択肢があります。また、この記事で紹介したとおり、カスタマイズの多くはCode EditorとApp embedsの設定パネルで完結します。CSSを書き込む前に、まず設定項目を探してみることをおすすめします。

テーマを変更したらカスタマイズはどうなりますか？

Swish側（Code Editor内のCustom IconsやCustom CSS）のカスタマイズはアプリ側に保存されているため、テーマを変えても残ります。ただし、新しいテーマでApp embedsの「{Code} Access」を有効にし直す必要があります。一方、テーマのコードに直接追加した部分（今回のドロワーメニューのリンクなど）は、新しいテーマへ移植し直す必要があります。

まとめ：アプリは「入れて終わり」ではなく「馴染ませて完成」

Swishのカスタマイズについて、アイコンの変更、文言の日本語化、テーマとのデザイン統一、メニューへのリンク追加までを解説しました。

お気に入り機能に限らず、Shopifyアプリはインストールしただけだと、どうしても「アプリのデザイン」のままストアに載ります。アイコンや文言、ボタンのスタイルをテーマに揃える一手間をかけることで、機能がストアのブランド体験の一部になります。Swishはその調整に応えられるだけのカスタマイズ性を持ったアプリなので、導入を検討している方は、今回のような調整まで含めて計画するのがおすすめです。

Shopifyのカスタマイズや運用に関しては、会員限定ページを実装する方法や、顧客統合とポイントの注意点も紹介しています。あわせてご覧ください。

ENVY DESIGNでは、Shopifyストアの制作だけでなく、公開後の保守・運用の中で発生するこうしたカスタマイズのご相談にも対応しています。アプリの導入や調整でお困りの方は、お気軽にお問い合わせください。