Skip to main content

How to Add Compare Button to Product Cards

Learn how to add the compare button to your product cards and customize its appearance.

Automatic Installation​

The compare button is automatically added to product cards when you install XB Products Compare and enable the app scripts.

Steps to Enable​

  1. Install XB Products Compare from the Shopify App Store
  2. Go to Online Store → Themes → Customize
  3. Click App embeds
  4. Enable XB Products Compare scripts
  5. Save your changes

Manual Installation​

If you need to manually add the compare button to your theme, follow these steps:

1. Add Compare Button Code​

Add this code to your product card template (usually in product-card.liquid or similar):

{% comment %} Add compare button to product card {% endcomment %}
<div class="product-compare-wrapper">
  <button
    class="xb-compare-button"
    data-product-id="{{ product.id }}"
    data-product-handle="{{ product.handle }}"
    data-product-title="{{ product.title | escape }}"
    data-product-price="{{ product.price | money }}"
    data-product-image="{{ product.featured_image | img_url: '300x300' }}"
  >
    <span class="compare-icon">⚖️</span>
    <span class="compare-text">Compare</span>
  </button>
</div>

2. Add CSS Styling​

Add this CSS to your theme's stylesheet:

.xb-compare-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s;
}

.xb-compare-button:hover {
  background: #0056b3;
}

.xb-compare-button.added {
  background: #28a745;
}

.xb-compare-button .compare-icon {
  font-size: 16px;
}

Customization Options​

Button Position​

You can position the compare button in different locations:

{% comment %} Position after product title {% endcomment %}
<h3 class="product-title">{{ product.title }}</h3>
{% render 'compare-button', product: product %}

{% comment %} Position after price {% endcomment %}
<div class="product-price">{{ product.price | money }}</div>
{% render 'compare-button', product: product %}

{% comment %} Position after add to cart button {% endcomment %}
<button class="add-to-cart">Add to Cart</button>
{% render 'compare-button', product: product %}

Button Styling​

Customize the button appearance to match your theme:

/* Custom button styles */
.xb-compare-button {
  background: linear-gradient(45deg, #your-color1, #your-color2);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Icon-only button */
.xb-compare-button.icon-only {
  padding: 8px;
  border-radius: 50%;
}

.xb-compare-button.icon-only .compare-text {
  display: none;
}

Advanced Configuration​

Conditional Display​

Show the compare button only for specific products:

{% comment %} Show compare button only for products with variants {% endcomment %}
{% if product.variants.size > 1 %}
  {% render 'compare-button', product: product %}
{% endif %}

{% comment %} Show compare button only for specific product types {% endcomment %}
{% assign compare_types = 'Electronics,Clothing,Accessories' | split: ',' %}
{% if compare_types contains product.type %}
  {% render 'compare-button', product: product %}
{% endif %}

Custom Button Text​

Customize the button text based on context:

{% assign button_text = 'Compare' %}
{% if product.compare_count > 0 %}
  {% assign button_text = 'Compare Now' %}
{% endif %}

<button class="xb-compare-button">
  {{ button_text }}
</button>

Troubleshooting​

Button Not Appearing​

  • Check if app scripts are enabled in theme customization
  • Verify the button code is added to the correct template
  • Clear browser cache and refresh the page

Button Not Working​

  • Ensure JavaScript is not disabled
  • Check browser console for JavaScript errors
  • Verify product data is being passed correctly

Styling Issues​

  • Check CSS conflicts with theme styles
  • Use browser dev tools to inspect button elements
  • Ensure CSS selectors are specific enough

Best Practices​

Design Consistency​

  • Match button style with your theme's design
  • Use consistent colors and typography
  • Ensure adequate spacing around the button

User Experience​

  • Make the button clearly visible but not intrusive
  • Use descriptive text or icons
  • Provide visual feedback when products are added to comparison

Performance​

  • Minimize the number of DOM elements
  • Use efficient CSS selectors
  • Optimize images and icons used in the button
Pro Tip

Test the compare button on different devices and screen sizes to ensure it works well across all platforms.