English

I want to place a favorite button below the "Add to Cart" button on the product details page.

by murasakikimura

‼️ We are currently not accepting requests for custom theme code implementation.

Answer

It is possible by selecting "Manual insertion" as the insertion method, following the steps on the app screen to prepare it, and then making some arrangements.

What this procedure allows you to do

Install a "favorite product" button below the "add to cart" button on the product detail page.

Setup procedure

❗ App enabled
"Manual insertion" selected, and snippets/comasopify-wishlist.liquid created

Step 1: Replace the default SVG icon part of comasopify-wishlist.liquid

Before replacement


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

After replacement


<span class="comasopify-wishlist-btn-content">
  <span class="comasopify-wishlist-text comasopify-wishlist-text-default">
    Favorite
  </span>
  <span class="comasopify-wishlist-text comasopify-wishlist-text-active">
    Favorited
  </span>
</span>

Step 2: Adjust CSS

Feel free to change it. Here are the target classes for reference.

~/assets/base.css or any other location


.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;
}

Step 3: Add {% render 'comasopify-wishlist', product: product, type: 'product-main' %} to where you want to insert the button

We recommend testing it with an unpublished theme to decide on the location.

Bonus: Applying classes from your active theme helps maintain a consistent look.

Adding your active theme's classes to the button in comasopify-wishlist.liquid (red text) is an easy way to maintain a consistent look.
This varies by theme, so please check your theme's CSS.

<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 %}
>

Image after completion

Verified with Horizon (v3.4.0), a theme not supported by automatic insertion.
Insertion location for {% render 'comasopify-wishlist', product: product, type: 'product-main' %}: ~/blocks/_product-details.liquid

Related articles