How to Remove In-stock Information under Vision Theme

Hello everyone,

If you are using the Vision - Emerald Theme for your Shopify store and have noticed that the in-stock quantity is appearing on the collection listing pages, you're not alone. This can be particularly frustrating if you want a cleaner look or simply do not wish to display stock quantities publicly. In this blog post, we will explore the reasons and possible causes of this issue and guide you step by step on how to remove the in-stock information from your Vision Theme. Let's dive in!

Reasons and Causes of the Problem

Why is In-stock Information Displayed?

1. Default Theme Settings: In some Shopify themes like Vision - Emerald, the display of in-stock information on collection pages is enabled by default to provide customers with an idea of product availability.

2. Customer Assurance: Showing how many items are left can create a sense of urgency among buyers, encouraging them to make quicker purchasing decisions.

Similar Problems in Other Themes

1. Overwhelming Product Information: Displaying too many details such as in-stock quantities, SKU numbers, and other product data can clutter your collection pages.

2. Custom Code Modifications: Sometimes developers add custom code to display stock levels for specific marketing strategies, which may not align with all businesses.

Step-by-Step Guide to Remove In-stock Information

Step 1: Accessing Your Theme Code

1. Log in to Your Shopify Admin: Go to your Shopify admin panel and log in with your credentials.

2. Navigate to Online Store: Click on ‘Online Store’ in the left-hand navigation menu and then select ‘Themes’.

3. Edit Code: Find the Vision - Emerald theme and click on ‘Actions’ > ‘Edit code’.

Step 2: Locating the In-stock Code

1. Find the Collection Template: In the sidebar, look for the Templates folder and locate the collection.liquid file.

2. Locate the Product Snippet: Open the file and search for the section where product details are displayed. This is often in a product-grid-item.liquid snippet.

Step 3: Modifying the Code

1. Identify In-stock Code Block: Look for the code block responsible for displaying the in-stock quantity. It may look something like this:

   {% if product.available %}
     <p class="in-stock">In stock: {{ product.stock }}</p>
   {% endif %}
   

2. Comment Out or Remove Code: You can either comment out this section or remove it entirely:

   {% comment %}
     {% if product.available %}
       <p class="in-stock">In stock: {{ product.stock }}</p>
     {% endif %}
   {% endcomment %}
   

   Or simply delete it:

   {% if product.available %}
     <!-- Removed in-stock info -->
   {% endif %}
   

Step 4: Saving Changes and Previewing

1. Save Changes: Click the ‘Save’ button to apply the changes to your theme.

2. Preview Your Store: Navigate to your store's collection pages and refresh the page to ensure that the in-stock information no longer appears.

Questions and Answers Related to the Topic

Q1: What if I want to hide the in-stock information, but not remove it entirely?

A1: Instead of deleting the code, you can use CSS to hide the element. Add the following CSS to your ‘theme.scss.liquid’ file:

.in-stock {
  display: none;
}

Q2: Will this change affect my SEO?

A2: Removing the in-stock information will not impact your SEO. In fact, a cleaner, more navigable webpage can potentially improve user experience, which indirectly benefits SEO.

Q3: Can I re-enable the in-stock information later?

A3: Yes, by either uncommenting the code you initially commented out or by removing the CSS that hides it, you can re-enable the display of in-stock information.

Q4: What if the code is not in collection.liquid or product-grid-item.liquid?

A4: Themes can vary, and sometimes different snippets or sections may handle in-stock data. Look for other files associated with your collection or products within the ‘Snippets’ or ‘Sections’ folders.

Q5: Is there a way to conditionally display in-stock information based on product type?

A5: Yes, you can use logic within Liquid templates to conditionally display in-stock information based on product type or other criteria.

{% if product.type == 'Special Type' %}
  <p class="in-stock">In stock: {{ product.stock }}</p>
{% endif %}

Conclusion

Removing the in-stock information from your Vision - Emerald Theme can make your collection pages look cleaner and more streamlined. By following the step-by-step guide outlined above, you can easily achieve this without compromising your store's functionality. If you have any further questions or need additional assistance, feel free to leave a comment or reach out to Shopify support.

Happy Selling!