Last Updated on by Dan S
Originally Published October 12, 2021.


Depending on what Shopify theme you are using, you may struggle with adding a View All Products button to the collections page. Adding this button will allow your customers to see all products in the collection in no particular order, improving navigation and product exposure.

View All Products

Here’s an easy way to add this button to themes like Minimal. While this will differ from theme to theme, the principles may be similar. With Shopify’s enhanced code editor and Online Store 2.0 framework in 2025, customization has become more streamlined than ever.

How to Add a ‘View All Products’ Button

The following method demonstrates how to add the button at the bottom of the Featured Collection section. However, you can adapt it to other pages in your store as needed. Before making any code changes, always duplicate your theme to create a backup copy:

  1. Go to Edit Code:
    • Navigate to your Shopify admin panel.
    • Select Online Store > Themes > Actions > Edit Code.
    • Note: Shopify’s new code editor (rolled out in 2025) provides enhanced search functionality, LiquidDoc support, and dark mode options for easier editing.
  2. Select Sections:
    • Open the Sections folder and locate feature-collection.liquid (or the equivalent section file in your theme).
    • Modern Online Store 2.0 themes may have different file structures, so check your theme’s documentation if needed.
  3. Locate Code:
    • Find the appropriate </div> tags where you want to insert the button (typically near the end of the section).
    • Insert the following code between these tags:
    {% if section.settings.show_view_all_button %}
              <div class="text-center">
              <a href="/collections/all" class="btn">View All Products</a>
              </div>
    {% endif %}

     

  4. Update Settings Schema:
    • Scroll to the bottom of the section file to find the schema settings.
    • Locate a setting like "label": "Center text below product images" or similar.
    • Add a comma before the closing curly bracket (}), then insert the following code:
       {
              "type": "checkbox",
              "id": "show_view_all_button",
              "label": "Display the View All Button"
            }
    • Tip: Use comments in your code to document your changes. In Liquid, use {% comment %} your note {% endcomment %} to help identify custom code later.
  5. Save and Customize:
    • Click Save (or use Cmd + S on Mac or Ctrl + S on Windows).
    • Go to Customize in the theme editor.
    • In the Sections area, select Featured Collection and check the box for displaying the “View All Products” button.
    • You can also customize the button text by changing "View All Products" to your desired text, like "Shop All" or "Browse Collection"
{% if section.settings.show_view_all_button %}
          <div class="text-center">
          <a href="/collections/all" class="btn">Shop All</a>
          </div>
    {% endif %}

Best Practices for 2025

  1. Always Create a Backup:
    • Duplicate your theme before making any code changes to ensure you can revert if needed.
  2. Use Shopify’s Enhanced Code Editor:
    • Take advantage of the new code editor features including Theme Check linter, which helps catch errors and follows best practices.
  3. Test Changes Incrementally:
    • Make small changes one at a time and test them before proceeding to avoid breaking your store.
  4. Consider Using the Theme Editor First:
    • For simple customizations, Shopify’s visual theme editor allows you to make changes without coding.
  5. Keep Your Theme Lightweight:
    • Avoid overloading your theme with unnecessary code to maintain fast loading speeds.

Reasons/Benefits of Adding a ‘View All Products’ Button

  1. Improved Navigation:
    • Provides customers with a straightforward way to view all products in a collection, enhancing their shopping experience.
  2. Increased Product Exposure:
    • Ensures that all products within a collection are easily accessible, potentially increasing sales by exposing customers to more items.
  3. User Convenience:
    • Reduces the number of clicks needed for customers to explore products, making the shopping process smoother and more enjoyable.
  4. Enhanced Theme Customization:
    • Adding this button allows for greater customization of your theme, making your store more user-friendly and visually appealing.
  5. Better Inventory Display:
    • Particularly useful for stores with large inventories, helping customers to quickly browse through extensive product lists.
  6. Improved Conversion Rates:
    • Better navigation and product visibility can lead to increased conversions, with studies showing that optimized store customization can boost conversion rates significantly.

Conclusion

Adding a “View All Products” button to your Shopify collections page can significantly improve customer navigation and enhance their shopping experience. While the steps may vary slightly depending on your theme, the basic principles remain the same.

With Shopify’s enhanced code editor and Online Store 2.0 framework in 2025, making these customizations has become more accessible. This addition not only improves usability but also increases the visibility of all products within a collection, potentially boosting sales. By following the steps outlined above and adhering to best practices like creating backups and testing changes incrementally, you can easily implement this feature and offer a more seamless browsing experience for your customers.

If you’re not comfortable editing code directly, consider using Shopify’s theme editor or hiring a Shopify Partner to help with customizations.