How to create an upcoming Collection and list the products along with pictures but without the ability to purhcase?

New Member
1 0 0

How to create an upcoming Collection and list the products along with pictures but without the ability to purhcase?

I sell clothing & apparel on my Shopify and I would like to create a new collection and show case sample products along with pictures (with or without pricing) but my customers should not able to check out them. They are only for window shopping and information purposes only. Thanks

 

0 Likes
Shopify Staff
Shopify Staff
100 0 19

Hey there Srilatha!

Cynthia here, a Guru with Shopify :).

What I would suggest doing in this case would be to create a whole new template for these products that aren't for sale, and apply that template to the products you're including in this new not-for-sale Collection.

First of all, go to your Admin->Online Store->Themes area, click the '...' icon, and go to Edit HTML/CSS.

Once you're there, under Templates on the left, click 'Add new template', and fill in the fields for a product.not-for-sale template like so:

Now that we've got that taken care of, you'll be able to switch/toggle between templates on your product pages, like my very first screenshot above. 

Product templates - by default - are set to "include" a Section called product-template, like this:

Before we go on - change that section above to say {% section 'product-not-for-sale %} instead (we'll be adding a new section, and won't be connecting to 'product-template' like it currently is above).

Now, go to Sections on the left, click "Add new section", and call it product-not-for-sale, like so:

When you create this - it isn't going to pre-populate with much information other than the schema, so you will need to copy and paste the code from the product-template Section we were talking about before:

Copy the entirety of that code (EXCEPT for the {% schema %} to {% endschema %} at the end) and paste it into your newly-created product-not-for-sale Section:

After that, it's time for the last step - removing the Add to Cart button.

This will keep the product title/price/details displaying normally on their own page, as well as in collections, but will remove any option for the customer to add this to their cart and checkout/purchase the item.

Search within your product-not-for-sale Section for this piece of Add to Cart button code:

          <button type="submit" name="add" id="AddToCart" class="btn">
          <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>

Delete that snippet of code, and that should do the trick!

You can now apply the product.not-for-sale Template (which includes the product-not-for-sale Section you just modified) like in my very first screenshot. 

Applying this template to products will remove the Add to Cart button and you can create a collection out of those products with that template :). 

If you need any help with this, please let me know and I'll be happy to take a look!

Cynn | Guru @ Shopify

Tourist
14 0 1

You can use our app "Coming Soon Products". Install the app and change the status of your products to "Coming soon". It will automatically replace "Add To Cart" and "Sold Out" buttons with "Coming soon". You can also add "Available from" label on a product level.

0 Likes
New Member
1 0 0

Hi there!  I've followed all of your steps but I can't seem to find the drop down box that allows me to select "product-not-for-sale".  Please help!

 

Thanks :)

0 Likes
New Member
1 0 0

I'm taking over from another designer who worked on my new client's website. I'm the backend trying to fix this issue but cannot find the product-template.liquid file to copy here as suggested. What other file names might it be? thanks

0 Likes
Tourist
11 0 3

How do I modify this snippet of code to allow the customer to pre-order? Just change "AddToCart" to "Pre-Order"? 

<button type="submit" name="add" id="AddToCart" class="btn">
          <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>

 

0 Likes