Some products are available online, others are not

Site URL: https://www.asiawest.net/

I created a website for a furniture store, and we have over 500 product listings on our site. Some products are available for online purchase through our "Shop" page, and others are not, and are listed in our "Product Gallery" page. My "Shop" is set up with normal product pages. My "Product Gallery" is also set up with product pages, but I set inventory to 0 and changed the text of the Add to Cart button to say "Not Available for Online Purchase".  I chose to separate these two pages to make it clear to the customer what is and is not available for online purchase, but I don't know if this is the best way to lay it out. I am concerned that customers will be confused by the difference between the Shop and Product Gallery pages. I wouldn't want somebody navigating to the shop page, thinking that it shows all of our products, and neglecting to view other products on the Product Gallery page, or vice versa.

I had an idea for how to reorganize this: Get rid of the "Product Gallery" page and list all products under the "Shop" page, even though some are not technically able to be "shopped". Customers would only find out upon navigating to a specific product's page whether or not that item is available to buy online, as it would either display the "Add to Cart" button or "Not Available for Online Purchase" button. With this idea, I would probably add a popup that would display when you navigate to a shop page. This popup would explain that not all items are available for online purchase. 

Does this alternate idea seem easier for customers to understand? I would love advice on this from anybody else who has a mixture of products that are/aren't available online. Is there a way to use tags to show what is and is not available for online purchase when you're scrolling on a product page? Thank you for any ideas or advice!!

Hello - I have the same issue. I want to have an ecommerce layout so I can list all my products but not the ability to add to the cart and in store pick up only. My work around was to make inventory 0 and edit the waitlist button. But now when I get the customer that used that button I cannot respond to them to say come pick up the item. There must be a template that allows for the same inventory and store front setup without the shopping cart functionality. Or ability to turn the cart off (not just hide the cart icon).

On 5/4/2020 at 10:27 PM, akb33 said:

I had an idea for how to reorganize this: Get rid of the "Product Gallery" page and list all products under the "Shop" page, even though some are not technically able to be "shopped". Customers would only find out upon navigating to a specific product's page whether or not that item is available to buy online, as it would either display the "Add to Cart" button or "Not Available for Online Purchase" button.

Hi @akb33

In my opinion, visitors will indeed have a better experience if they can view similar products together on the same page, even if they are not available for online purchase. However, as you pointed out, it's essential that product availability is made clear on the product list page(s). It would be frustrating for them to click into each product before they discover it is unavailable. You can do this by adding a label to these products.

Squarespace already has a 'Sold Out label that can appear when products have zero inventory. With some code, you could repurpose this for offline products. To enable Sold Out labels, open a product list page and then go to Design > Site Styles. Find the Products: Status Badges tweak, and choose a Style other than None. The labels will now appear for all products with zero inventory. You can change the label to "Available in store only" (see below) for certain products, by adding some code to your site and an "In-store" tag to these products.

First, add a tag to one of the products. Edit the product and then click + beside Tags in the lower left corner and type the name of the tag.

Save the changes and then go to Settings > Advanced > Code Injection to add some code.

You'll find the code in this guide: Changing Squarespace 'SOLD OUT' labels to something else. The specific instructions for your situation are in the section entitled How to change only one product category.

For the benefit of others who read this post:

• This snippet is for the Squarespace 7.0 Brine-family template, as referenced in the author's question.
• All code snippets provided are simplified and provided "as is", without warranty of any kind. If you need code for a business-critical website, consider hiring an experienced web developer who you can trust to build secure and reliable code at a competitive price.

I hope this helps.

-Paul

I found a solution that worked for what I am trying to do and it was easy.

Add this to the CSS field

.sqs-add-to-cart-button {
  display: none !important;
}

On 5/16/2020 at 8:48 PM, BRamirez said:

I found a solution that worked for what I am trying to do and it was easy.

Add this to the CSS field

.sqs-add-to-cart-button {
  display: none !important;
}

Thank you for this! Is there a way to apply this only to certain items in my shop? Some items are available for online purchase, so I do want them to have the Add to Cart button and wouldn't want to get rid of it for all of my products. Perhaps there's a way using tags? Any help is greatly appreciated!

Thanks 🙂

On 5/15/2020 at 6:48 AM, paul2009 said:

Hi @akb33

In my opinion, visitors will indeed have a better experience if they can view similar products together on the same page, even if they are not available for online purchase. However, as you pointed out, it's essential that product availability is made clear on the product list page(s). It would be frustrating for them to click into each product before they discover it is unavailable. You can do this by adding a label to these products.

Squarespace already has a 'Sold Out label that can appear when products have zero inventory. With some code, you could repurpose this for offline products. To enable Sold Out labels, open a product list page and then go to Design > Site Styles. Find the Products: Status Badges tweak, and choose a Style other than None. The labels will now appear for all products with zero inventory. You can change the label to "Available in store only" (see below) for certain products, by adding some code to your site and an "In-store" tag to these products.

First, add a tag to one of the products. Edit the product and then click + beside Tags in the lower left corner and type the name of the tag.

Save the changes and then go to Settings > Advanced > Code Injection to add some code.

You'll find the code in this guide: Changing Squarespace 'SOLD OUT' labels to something else. The specific instructions for your situation are in the section entitled How to change only one product category.

For the benefit of others who read this post:

• This snippet is for the Squarespace 7.0 Brine-family template, as referenced in the author's question.
• All code snippets provided are simplified and provided "as is", without warranty of any kind. If you need code for a business-critical website, consider hiring an experienced web developer who you can trust to build secure and reliable code at a competitive price.

I hope this helps.

-Paul

This worked! Thank you so much for your help!

How would I do this for more than just one category? For example, if I want to change products with the tag "store" to say "In-store Only", and products with the tag "seasonal" to say "Seasonal Item", while leaving everything else to say "Out of Stock"? How would I add multiple categories using the code in your blog post?

On 5/18/2020 at 3:33 PM, akb33 said:

How would I do this for more than just one category?

You can do this by repeating the code for each category/message.

On 5/21/2020 at 4:04 PM, paul2009 said:

You can do this by repeating the code for each category/message.

I tried this, but it seems when I add the whole block of code, one after another, then it doesn't work for any of the categories. Am I doing something wrong?

Hi Paul--

I've been using this code for a couple of months now and it works great. However, I have recently run into an issue. I'm realizing that products that have the label "In-Store Only", still show the label "Sold Out" when they are displayed under "You Might Also Like" on another product page. (See photos below for examples). Do I have to edit my code to make sure the "In-Store Only" tag always displays with these products? Thank you!

On 5/15/2020 at 6:48 AM, paul2009 said:

Hi @akb33

In my opinion, visitors will indeed have a better experience if they can view similar products together on the same page, even if they are not available for online purchase. However, as you pointed out, it's essential that product availability is made clear on the product list page(s). It would be frustrating for them to click into each product before they discover it is unavailable. You can do this by adding a label to these products.

Squarespace already has a 'Sold Out label that can appear when products have zero inventory. With some code, you could repurpose this for offline products. To enable Sold Out labels, open a product list page and then go to Design > Site Styles. Find the Products: Status Badges tweak, and choose a Style other than None. The labels will now appear for all products with zero inventory. You can change the label to "Available in store only" (see below) for certain products, by adding some code to your site and an "In-store" tag to these products.

First, add a tag to one of the products. Edit the product and then click + beside Tags in the lower left corner and type the name of the tag.

Save the changes and then go to Settings > Advanced > Code Injection to add some code.

You'll find the code in this guide: Changing Squarespace 'SOLD OUT' labels to something else. The specific instructions for your situation are in the section entitled How to change only one product category.

For the benefit of others who read this post:

• This snippet is for the Squarespace 7.0 Brine-family template, as referenced in the author's question.
• All code snippets provided are simplified and provided "as is", without warranty of any kind. If you need code for a business-critical website, consider hiring an experienced web developer who you can trust to build secure and reliable code at a competitive price.

I hope this helps.

-Paul