Exclude Route Shipping Insurance from Shopify Product Recommendations

Are you a Shopify store owner using Route Shipping Insurance and wondering how to exclude it from your product recommendations? You’re not alone. Many merchants face this challenge when trying to optimize their product pages. In this comprehensive guide, we’ll explore effective methods to remove Route Insurance from your product recommendations while maintaining a seamless shopping experience for your customers.

Understanding the Problem

Why Exclude Route Shipping Insurance?

Route Shipping Insurance is a valuable service for many online stores, but it’s not typically a product you want to recommend alongside your regular merchandise. Including it in product recommendations can clutter your suggestions and potentially confuse customers.

The Impact on User Experience

Having insurance products mixed with your main offerings can detract from the shopping experience. Customers expect to see related products they might be interested in purchasing, not additional services that are better presented at checkout.

Technical Challenges

Excluding specific products from Shopify’s recommendation algorithm isn’t straightforward. The platform doesn’t provide a built-in setting to omit particular items, which is why many store owners seek custom solutions.

Solution: Modifying Your Theme Code

The Most Effective Approach

The most reliable method to exclude Route Shipping Insurance from your product recommendations involves adding custom JavaScript to your theme. This solution targets the specific product and removes it from the recommendations dynamically.

Step-by-Step Implementation

1. Access your Shopify admin panel
2. Navigate to Online Store > Themes
3. Find your current theme and click “Actions” > “Edit code”
4. Locate the theme.liquid file
5. Find the closing “ tag
6. Insert the following code just above the “ tag:

<script>
function removeRouteShippingProduct(){
  const isProductPage = /product/.test(window.location.href);
  const product = document.querySelector(`.template-product .product-recommendations-pannel [href*='/products/routeins']`);
  if (!product || !isProductPage){
    return;
  }
  product.closest(`.product`).classList.add('routein-product');
  product.closest(`.product`).remove();
}
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(removeRouteShippingProduct, 100);
});
</script>
<style>
.routein-product, [href*='products/routeins']{
  display: none !important;
}
</style>

How the Code Works

This script does several things:

1. It checks if the current page is a product page
2. It looks for the Route Insurance product in the recommendations
3. If found, it adds a class to the product element
4. It then removes the product from the display

The accompanying CSS ensures that any elements with the added class or matching URL are hidden from view.

Fine-Tuning Your Product Recommendations

Adjusting the Number of Displayed Products

After removing Route Insurance, you might notice gaps in your product recommendations. To address this, you may need to increase the number of products fetched by your recommendation engine.

Modifying Your Product Recommendations Liquid

If you’re using a custom product recommendations section, you might need to adjust your Liquid code. Here’s an example of how you might structure your recommendations:

<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">
  {%- if recommendations.products_count > 0 -%}
    <div class="product-recommendations-pannel">
      <h2>You may also like</h2>
      <ul>
        {%- for product in recommendations.products -%}
          <li class="product">
            <a href="{{ product.url }}">
              <img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
              <p class="product__title">{{ product.title }}</p>
              <p class="product__price">{{ product.price | money}}</p>
            </a>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
</div>

Note the data-limit="4" attribute, which you can adjust to fetch more products and ensure your recommendations grid remains full after excluding Route Insurance.

Troubleshooting Common Issues

Recommendations Not Updating

If you find that your recommendations aren’t updating after implementing the solution, try the following:

1. Clear your browser cache and reload the page
2. Ensure the script is properly placed in your theme.liquid file
3. Check for any JavaScript errors in your browser’s console

Styling Inconsistencies

After removing Route Insurance, you might notice layout issues. Address these by adjusting your CSS:

.product-recommendations-pannel ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.product-recommendations-pannel ul > li {
  flex: 0 0 calc(33.333% - 20px);
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .product-recommendations-pannel ul > li {
    flex: 0 0 100%;
  }
}

This CSS will help maintain a consistent layout across different screen sizes.

Best Practices for Product Recommendations

Regularly Review Your Recommendations

Even with Route Insurance excluded, it’s important to regularly review your product recommendations to ensure they’re relevant and appealing to your customers.

Use Analytics to Refine Selections

Leverage Shopify’s analytics tools to understand which recommended products perform best. Use this data to continually improve your product suggestion algorithm.

Consider Seasonal Adjustments

Your product recommendations should evolve with your inventory and seasonal trends. Regularly update your strategy to keep recommendations fresh and relevant.

By implementing these solutions and best practices, you can effectively exclude Route Shipping Insurance from your product recommendations while enhancing the overall shopping experience on your Shopify store. Remember to test thoroughly after making any changes to ensure everything works as expected across different devices and browsers.