How to hide a product in your Shopify storefront

The Problem

When the Precycle Contribution app is added to a Shopify store, a donation product is created and added to the owner's webstore. Currently, Shopify does not have a way to automatically hide this donation product from appearing in the shop while still being available in the checkout process. If you don't want the Precycle Contribution product to be visible among the items available in your store this post is for you. Here are the step-by-step instructions for a manual configuration.

If you'd like to only use the new post-purchase flow, you can skip all the steps and got to the last point.

The post is heavily supported by images to show you how it can be done from the Shopify's admin panel.

Step 1: Check the product

Make sure to log in to your Shopify account and select the product you'd like to hide. Select the name in Products > All > Precycle Contribution.

You will notice the vendor's name precycle.today that created the "Precycle Contribution" product.

Step 2: Create a new collection with a condition

Select the Products > Collections > Create Collection. If you already have a collection, you can extend yours. For now, we don't have one and we create a Collection without precycle.today collection.

Collections are used to group products to make it easier to find them by categories. In our case, we want to hide our newly created vendor name. The condition we need is:

"Product vendor" "is not equal to" "precycle.today"

Then save the collection.

Step 3: Update your Storefront (Navigation or Theme)

Depending on where you are using the collections, you might want to update different parts of your online store.

Navigation

On our default Drawn Theme, we have three main menu links to Home, Catalog and Contact.

They can be accessed in your Store via Sales channels > Online Store > Navigation > Main menu.

The interesting navigation link here is Catalog which links to All products for now and includes all the products from the store (see before).

Before:

We will replace the Catalog's collection All products with the newly created/modified collection Collection without precycle.today to hide the "Precycle Contribution" product from the storefront.

After:

Theme configuration

Similar to the navigation customization, you can always update the theme collections that are used on your shop. Let's see what type of collection does the default "Drawn Theme" has. To do this we go to Sales channels > Online Store > Customize

Here we do have a "Featured products" - collection where we need to remove our "Precycle Contribution" product.

You will see that the "Precycle Contribution" product is gone. Our store has very few products so the "Precycle Contribution" product is always easy to spot. If you have a lot of products it may be harder to see. Make sure to update all your collections on the website even though you might not see the "Precycle Contribution" product in the preview.

---

Post-Purchase Flows (beta)

Shopify enables the merchant to use post-purchase flows. They happen only after the customer has paid. In our case, it allows the merchant to ask the customer if they want to contribute the plastic compensation after checkout. By magic, this flow does not require a visible product on the storefront. If you as merchant want to only use the post-purchase flow, you can disable any sales channel connected to the "Precycle Contribution" product and avoid all the previous steps.

---

Summary

Hiding products in your storefront, while making it buyable is not obvious and requires merchant interaction. Hopefully, this post provided an overview of how easy the steps are to accomplish this effortlessly. If you have edge cases or are stuck at some point, feel free to contact us.