English

I want to use it with a customized theme.

by murasakikimura

‼️ We are currently not accepting requests for code implementation on customized themes.

Answer

We offer tags for stores with uniquely customized themes as "manual insertion."

You can freely customize the "display position" and "design" of the favorite function within the theme.

Even with themes that are difficult to automatically insert, you can still use the function and save data by installing the tags.

Target Stores

  • "Basic Favorites" installed & subscribed
    Basic Favorites App
  • Heavily customized theme
  • Theme editing outsourced to an engineer
  • Using a theme not supported by automatic insertion (want to know which themes are supported by automatic insertion)

What you will learn

  • Manual insertion mechanism
  • Common mistakes and how to check them

Manual insertion mechanism

In manual insertion mode, the app's script automatically links functions by adding specific "class names" and "data attributes" provided by the app to HTML elements.

Manual insertion in this app works in the following three steps:

  1. Activate core script: Turn on basic functionality in the embedded app settings.
  2. Create dedicated snippet: Create snippets/comasopify-wishlist-button.liquid to define generic button components.
  3. Call snippet: Execute {% render 'comasopify-wishlist-button' ... %} at the appropriate position in product details or listings.

Once the above conditions are met, the script automatically detects specific classes (.comasopify-wishlist-icon-button) and data attributes (data-comasopify-product-handle etc.) on the page and applies the functionality.

Product Detail Page (SKU-level registration)

  • Above product images, there are many competing functions (image upload function), so testing with an unpublished theme is recommended.
  • Directly above or below the "Add to Cart" button is relatively easy to place.

Product List / Thumbnail / Collection (Product-level registration)

  • Place within the product loop.
  • Be careful if placed within the <a> tag that encloses the entire product thumbnail, as clicking the button will navigate to the product details.

Header, etc. (Link to list view)

  • This is the entrance to check registered products.
  • The app provides a pop-up, so there is no need to prepare a separate page for the list.

Common Failures

App Block disabled If this app is turned OFF in the theme editor's "Embedded apps" settings, the script itself will not be loaded.
Missing handle name Check if data-comasopify-product-handle is empty, or if Liquid's {{ product.handle }} is being output correctly.
Typo in class name Check if comasopify-wishlist-icon-button is spelled correctly.