商品詳細の「カートに追加」ボタンの下にお気に入りボタンを設置したい

回答

挿入方法で「手動挿入」を選択し、アプリ画面の手順に従って用意し、少しアレンジすることで可能です。

この手順でできること

商品詳細ページのカートに追加ボタンの下に、商品をお気に入りするボタンを設置する

設定手順

ステップ 1：comasopify-wishlist.liquidのデフォルトのSVGアイコン部分を差し替える

置き換え前

<span class="comasopify-wishlist-btn-content">
  <svg class="comasopify-wishlist-icon"> ... </svg>
</span>

置き換え後

<span class="comasopify-wishlist-btn-content">
  <span class="comasopify-wishlist-text comasopify-wishlist-text-default">
    お気に入りする
  </span>
  <span class="comasopify-wishlist-text comasopify-wishlist-text-active">
    お気に入り済み
  </span>
</span>

ステップ 2：CSSの調整

自由に変更してください。ここでは対象クラスを参考で貼ります。

~/assets/base.cssなど任意の場

.comasopify-wishlist-icon-button {
}
.comasopify-wishlist-icon-button .comasopify-wishlist-text-active {
  display: none;
}
.comasopify-wishlist-icon-button.active .comasopify-wishlist-text-default {
  display: none;
}
.comasopify-wishlist-icon-button.active .comasopify-wishlist-text-active {
  display: inline;
}

ステップ 3：{% render 'comasopify-wishlist', product: product, type: 'product-main' %}をボタンを挿入したい場所に追加

未公開テーマを使ってテストしながら場所を決めることをお勧めします。

おまけ：利用テーマのクラスをつけると見た目が揃いやすい

<button
  class="comasopify-wishlist-icon-button button--secondary"
  type="button"
  aria-label="Add to wishlist"
  data-page="{{ page_type }}"
  {% if product %}
    data-comasopify-product-handle="{{ product.handle }}"
    data-comasopify-variant-id="{{ product.selected_or_first_available_variant.id }}"
  {% endif %}
>

完了後のイメージ