Collection pages are very crucial for online stores as they display a grid or list of products together, thereby arousing customer interest. Our records suggest that about 30% of Wishlist actions originate from collection/category pages. So it is very important to add the wishlist button to collection pages.
Things to remember:
- The Wishlist button has to be added manually on collection pages. There is no way to do this without editing the theme.
- There is no universal file where we can add the code. It not only varies across themes but also different versions of the same theme.
- This process involves trial and error. If the wishlist button doesn’t show up after adding the code to one file, you need to repeat this with other files. A good strategy is to start reviewing templates/collection.liquid and analyse how control flows to different sections and snippets.
STEPS
1: In your Shopify Admin, visit Online Store => Themes =>(Select the theme) => Edit HTML/CSS
2: Under Snippets look for any of the below files and if present and click to open the file in editor. If none of the these files are present in the theme, check for a more exhaustive list at the end of this document.
- snippets/product-grid-item.liquid
- snippets/product-card-grid.liquid
- snippets/product-price.liquid
- snippets/product-thumbnail.liquid
Search for the term price in the file and if found, add the following code snippet near the closing </p> or </span> tags.
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
If the theme file contains reference to Product Liquid object at the beginning, our code has to be modified to include that reference . For e.g.
<span class="smartwishlist" data-product="{{ card_product.id }}" data-variant="{{ card_product.variants.first.id }}"></span>3. Click the Save button at the top. Open any collection/catalog page in your Shopify store, you would find the Wishlist icon with a tooltip titled ‘Add to Wishlist’ under each product item.
At this stage, if the wishlist button doesn’t show up, check the HTML source code of the page and search for “smartwishlist”. if you don’t find elements like <span class=”smartwishlist” ……></span>, then repeat the process with other files. Otherwise, move to next step.
4. If your theme uses search and filter apps to display the contents of collection pages, the above steps may not work. It requires editing the Javascript code of those apps in the theme to display the wishlist button.Following resources would be helpful in such cases.
Display buttons over product image
If you want to display the wishlist button over product image, simply add the following CSS to the Box 1 of Extra CSS tool.
.smartwishlist {
position: absolute;
top: 0;
right: 0;
}If the wishlist button doesn’t appear, add the following CSS to the parent element of the wishlist button, from the step 2 above.
.parent-of-smartwishlist{
position:relative
}If it still doesn’t show up, set the z-index property of the wishlist button
.smartwishlist {
position: absolute;
top: 0;
right: 0;
z-index: 99 !important;
}If the Wishlist button appears, but is positioned somewhere else, you need to edit the liquid file and relocate the wishlist code snippet (Step 2) as a sibling to the image element. A example is given below.
<div class="grid-item">
<img src="{{ product.featured_image.src | img_url: image_size }}" />
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
</div>
NOTE: Certain new themes use product cards. If the file explictly mentions product_card at uts beginning, then you need to replace product.id with product_card.id and product.variants.first.id with product_card.variants.first.id in the above code.
You are also encouraged to adjust the values of top and right parameters to strategise best wishlist experience.
Finally, remember that every store on Shopify is unique due to which there would always be cases where the wishlist button won’t appear even after implementing all the above steps. If you are not a developer, contact our support and we shall assist in getting the set up done.
List of Files
Below is a nearly exhaustive list of common files where the code snippet for collection pages has to be inserted. Most themes are likely to use at least one of the following files for displaying items on collection pages.
- snippets/product-card-grid.liquid
- snippets/product-grid-item.liquid
- snippets/product-price.liquid
- snippets/product-thumbnail.liquid
- sections/collection-new-list.liquid
- sections/collection-template.liquid
- sections/product-template.liquid
- snippets/add-to-link.liquid
- snippets/collection-item.liquid
- snippets/collection-page.liquid
- snippets/collection-product.liquid
- snippets/collection-template.liquid
- snippets/collection_item.liquid
- snippets/grid-rework.liquid
- snippets/grid-view-item.liquid
- snippets/interactive-group.liquid
- snippets/jas_product_loop.liquid
- snippets/nt_product_loop.liquid
- snippets/partial–product.liquid
- snippets/pricing.liquid
- snippets/product-block.liquid
- snippets/product-card-grid-newarrival.liquid
- snippets/product-card-grid.liquid
- snippets/product-card-list.liquid
- snippets/product-card.liquid
- snippets/product-details.liquid
- snippets/product-grid-item-category.liquid
- snippets/product-grid-item.liquid
- snippets/product-grid.liquid
- snippets/product-info.liquid
- snippets/product-item-big.liquid
- snippets/product-item.liquid
- snippets/product-list-item-inner.liquid
- snippets/product-list-item.liquid
- snippets/product-list-repeatable-item.liquid
- snippets/product-listing-item.liquid
- snippets/product-listing.liquid
- snippets/product-loop.liquid
- snippets/product-masonry-item.liquid
- snippets/product-price-related.liquid
- snippets/product-price.liquid
- snippets/product-thumb.liquid
- snippets/product-thumbnail.liquid
- snippets/product-thumbnail__product-info.liquid
- snippets/product-wishlist.liquid
- snippets/product_grid_item.liquid
- snippets/product_item.liquid
- snippets/qrack-purchase-buttons.liquid
- snippets/small-product-item.liquid
- snippets/snippet-product-item.liquid
- snippets/wishlist-product-detail.liquid
- snippets/wishlist-product.liquid
- snippets/zr-product-grid-item.liquid