How to Show Inventory Count on Shopify Crave Theme Product Grid

Introduction

Shopify themes offer various customization options to enhance the user experience and provide valuable information to customers. One such feature that many store owners find useful is displaying the inventory count on the product grid view. This allows customers to see how many items are in stock without having to click through to the individual product pages. In this article, we’ll explore how to implement this feature specifically for the Crave theme in Shopify.

Why Show Inventory Count on Product Grid View?

Displaying inventory levels directly on the product grid can offer several benefits:

1. Transparency: Customers appreciate knowing product availability upfront.
2. Urgency: Limited stock can encourage quicker purchasing decisions.
3. Efficiency: Shoppers can easily identify which products are available without extra clicks.

Understanding the Crave Theme

The Crave theme is a popular free Shopify theme known for its clean design and focus on product presentation. While it doesn’t natively display inventory counts on the grid view, we can add this functionality with some custom code.

Implementing Inventory Count Display

Locating the Correct File

To add the inventory count display to your product grid, you’ll need to edit the card-product.liquid file. This file controls how individual product cards are displayed in collection and featured product sections.

Adding the Custom Code

Follow these steps to implement the inventory count display:

1. Go to your Shopify admin panel and navigate to “Online Store” > “Themes”.
2. Find the Crave theme and click “Actions” > “Edit code”.
3. In the left sidebar, locate and click on the card-product.liquid file.

Step 1: Prepare the Variable

Add the following line of code near the beginning of the file, around line 33:

{% assign firstVariant = card_product.first_available_variant %}

This line creates a variable that holds the first available variant of the product, which we’ll use to display the inventory count.

Step 2: Display the Inventory Count

Next, add this code block where you want the inventory count to appear, typically around line 112:

{% if template.name == "collection" and firstVariant.inventory_quantity >= 1 %}
  <p>{{firstVariant.inventory_quantity}} product available</p>
{% endif %}

This code checks if the current page is a collection page and if the product has at least one item in stock. If both conditions are true, it displays the inventory count.

Customizing the Display

You can adjust the appearance of the inventory count by modifying the HTML and adding CSS classes. For example:

{% if template.name == "collection" and firstVariant.inventory_quantity >= 1 %}
  <p class="inventory-count">In stock: {{firstVariant.inventory_quantity}}</p>
{% endif %}

Then, add appropriate CSS to style the inventory-count class in your theme’s stylesheet.

Expanding Functionality

Showing Inventory on Featured Collections

To display the inventory count on featured collections as well, you can modify the condition in the code:

{% if firstVariant.inventory_quantity >= 1 %}
  <p>{{firstVariant.inventory_quantity}} product available</p>
{% endif %}

This change removes the template check, allowing the inventory count to appear on all product cards, including featured collections.

Handling Out of Stock Products

Consider adding a condition to display a message for out-of-stock items:

{% if firstVariant.inventory_quantity >= 1 %}
  <p>{{firstVariant.inventory_quantity}} product available</p>
{% else %}
  <p>Out of stock</p>
{% endif %}

Displaying Total Stock Across Variants

While showing the stock of the first variant is straightforward, displaying the total stock across all variants requires more complex code. This level of customization often necessitates advanced Liquid knowledge or the use of a specialized app.

Best Practices and Considerations

Performance Impact

Adding inventory checks to your product grid can slightly increase page load times, especially for large collections. Monitor your site’s performance after implementing this feature.

Inventory Accuracy

Ensure that your inventory management settings in Shopify are up-to-date to provide accurate information to your customers.

Design Integration

When adding the inventory count display, consider how it fits with your overall theme design. Aim for a balance between providing information and maintaining a clean, uncluttered look.

Testing

After implementing the changes, thoroughly test your site across different devices and browsers to ensure the inventory count displays correctly and doesn’t disrupt your layout.

Conclusion

Displaying inventory counts on the product grid view can significantly enhance the shopping experience for your customers. By following the steps outlined in this guide, you can successfully implement this feature in the Crave theme. Remember to test thoroughly and consider the overall user experience when making these customizations to your Shopify store.

For more advanced customizations or if you encounter any issues, consider consulting with a Shopify expert or exploring the official Shopify documentation at https://shopify.dev/themes.