Shopify Question posted in
The Shopify help center can be found here.

How should I inject the code from my app into collection's product grid for each item in shopify

I have been creating a shopify wishlist app, but I can’t seem to get around adding the wishlist icon onto grid item on collections template. I need to inject it programmatically because I want the app compatible to any shopify theme, not restricted to one html structure.

I have tried adding it via javascript, but in that way we don’t have the product id, variant id, or product handle information to retrieve data.

Tags:

2

Answers


  1. 0

    Your wishlist is likely best executed using the Theme App Extension pattern. With that, your wishlist become something (A section block) that any merchant can install in their theme and customize, with all the good logic your Wishlist needs. It’s not a hard pattern to follow.

    Login or Signup to reply.
  2. 0

    Adding a wishlist icon programmatically to a Shopify collection template can be challenging, especially when aiming for compatibility with various themes. Here are some steps and tips to help you achieve this:

    Use Shopify’s AJAX API: Shopify's AJAX API can help retrieve product information dynamically.

Inject HTML with JavaScript: Use JavaScript to inject the wishlist icon into the DOM. You can get the necessary product information using data attributes or by parsing the page.

Leverage Data Attributes: Many Shopify themes use data attributes to store product information, which can be accessed via JavaScript.

    Our Wishlist Guru App offers URL-based Wishlist sharing, Up to 300 wishlist items/month, and Multi-language support.
    https://apps.shopify.com/wishlist-guru

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search