"product only available in-store" option

Highlighted
New Member
2 0 0

Hey, 

 

I'm trying to figure out if it's possible to display items online without the option to buy. Some products are not allowed to be sold online, but I still want to display them with the description "only available in-store".

 

There are tutorials out there on how to do it, but it seems with my theme I can't seem to figure it out. Example: https://www.youtube.com/watch?v=tK7HWM5UPKo&t=37s

 

I am attaching my product page code, perhaps someone is willing to take a look at it? 

 

                    {% endif %}
                
                    {% if section.settings.display_availability %}
                    <div class="product-inventory">
                        {% if section.settings.text_availability != blank %}
                        {% if settings.enable_multilang %}
                        <label class="lang1">
                            {{ section.settings.text_availability | split: '|' | first }}
                        </label>
                        <label class="lang2">
                            {{ section.settings.text_availability | split: '|' | last }}
                        </label>
                        {% else %}
                        <label>
                            {{ section.settings.text_availability | split: '|' | first }}
                        </label>
                        {% endif %}
                        {% endif %}
                        <span>
                        {% if current_variant.inventory_management %}
                        {% assign first_inventory = current_variant.inventory_quantity %}
                        {% if first_inventory > 0 %}
                        {{ 'products.product.in_stock' | t }}
                        {% else %}
                        {{ 'products.product.out_of_stock' | t }}
                        {% endif %}
                        {% else %}
                        {{ 'products.product.many_in_stock' | t }}
                        {% endif %}
                        </span>
                    </div>
                    {% endif %}    

                    {% if section.settings.display_product_type %}
                    <div class="product-type">
                        {% if section.settings.text_product_type != blank %}
                        {% if settings.enable_multilang %}
                        <label class="lang1">
                            {{ section.settings.text_product_type | split: '|' | first }}
                        </label>
                        <label class="lang2">
                            {{ section.settings.text_product_type | split: '|' | last }}
                        </label>
                        {% else %}
                        <label>
                            {{ section.settings.text_product_type | split: '|' | first }}
                        </label>              
                        {% endif %}
                        {% endif %}
                        <span>{{ product.type }}</span>
                    </div>
                    {% endif %}
                  {% comment %}
                    {% if section.settings.display_product_color %}
                    <div class="product-barcode">
                      {% if section.settings.text_product_color != blank %}
                      {% if settings.enable_multilang %}
                      <label class="lang1">
                        {{ section.settings.text_product_color | split: '|' | first }}
                      </label>
                      <label class="lang2">
                        {{ section.settings.text_product_color | split: '|' | last }}
                      </label>
                      {% else %}
                      <label>
                        {{ section.settings.text_product_color | split: '|' | first }}
                      </label>              
                      {% endif %}
                      {% endif %}
                      <span>{{ current_variant.barcode }}</span>
                    </div>
                    {% endif %}
                  {% endcomment %}
                </div>
                {% endif %}
                
                {% if product.description contains '[countdown]' %}            
                {% assign count_down_first = product.description | split:'[/countdown]' | first %}
                {% assign count_down_final = count_down_first | split:'[countdown]' | last %}
                
                {% if section.settings.countdown == 'countdown_1' %}
                <div class="countdown">
                    {% include 'multilang' with section.settings.text_countdown %}
                    <div class="countdown-item" data-countdown-normal data-countdown-value="{{ count_down_final }}"></div>
                </div>
                
                {% else %}
                {% include 'countdown-progressbar' %}
                {% endif %}
                
                {% endif %}
                
                <div class="prices">
                    {% if product.compare_at_price > product.price %}
                    <span class="compare-price">
                        {{ product.compare_at_price_max | money }}
                    </span>
                    <span class="price on-sale" itemprop="price">
                        {{ product.price | money }}
                    </span>
                    {% else %}
                    <span class="price" itemprop="price">
                        {{ product.price | money }}
                    </span>
                    {% endif %}
                </div>
                
                {% if product.description contains '[countdown]' %}
                {% assign des = product.description | split:'[/countdown]' | last %}
                {% if des contains '[custom tab]'%}
                {% assign des = des | split:'[custom tab]' | first | split:'<iframe' | first %}
                {% endif %}
                {% else %}
                {% assign des = product.description %}
                {% if des contains '[custom tab]'%}
                {% assign des = des | split:'[custom tab]' | first | split:'<iframe' | first %}
                {% endif %}
                {% endif %}
                
                {% if section.settings.show_desc == 'short' %}

                {% if product.metafields.c_f['Short Description'] %}
                {% assign des = product.metafields.c_f['Short Description'] %}
                {% endif %}

                {% if settings.enable_multilang and des contains '[lang2]' %}
                <div class="short-description">
                    <div class="lang1">
                        {{ des | split: '[lang2]' | first | strip_html | replace: '&nbsp;', ' ' | truncate: 120 }}
                    </div>
                    <div class="lang2">
                        {{ des | split: '[lang2]' | last | strip_html | replace: '&nbsp;', ' ' | truncate: 120 }}
                    </div>
                </div>
                {% else %}
                <div class="short-description">
                    {{ des | split: '[lang2]' | first | strip_html | replace: '&nbsp;', ' ' | truncate: 120 }}
                </div>
                {% endif %}

                {% elsif section.settings.show_desc == 'full' %}
                {% if settings.enable_multilang and des contains '[lang2]' %}
                <div class="short-description">
                    <div class="lang1">
                        {{ des | split: '[lang2]' | first }}
                    </div>                
                    <div class="lang2">
                        {{ des | split: '[lang2]' | last }}
                    </div>
                </div>
                {% else %}
                <div class="short-description">
                    {{ des | split: '[lang2]' | first }}
                </div>                
                {% endif %}
                {% endif %}        
                
                {% form 'product', product, id: "add-to-cart-form", novalidate: 'novalidate' %}
                    
                {% if product.available %} 
                <div id="product-variants">
                    {% if variantCount > 1 %} 
                    <select id="product-selectors" name="id" style="display: none;">
                        {% for variant in product.variants %}
                        {% if variant.available %}
                        <option data-imge="{% if variant.image.size != blank %}{{ variant.image.src | product_img_url: 'compact' }}{% else  %}{{ product.featured_image.src | product_img_url: 'compact' }}{% endif %}" {% if variant == current_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                            {{ variant.title }}
                        </option>
                        {% else %}
                        <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                        {% endif %}
                        {% endfor %}
                    </select>
                    
                    {% if settings.use_color_swatch %}
                    {% for option in product.options %}
                    {% include 'swatch' with option %}
                    {% endfor %}
                    {% endif %}
                    
                    {% else %}
                    <input type="hidden" name="id" value="{{ product.variants[0].id }}" />
                    {% endif %}
                </div>
                {% endif %}
                
                {% if current_variant.available %}
                <div class="quantity">
                    <label for="quantity" {% if settings.enable_multilang %}data-translate="cart.label.quantity"{%endif%}>
                        {{ 'cart.label.quantity' | t }}: 
                    </label>
                    <div class="qty-group">
                        <a href="#" data-minus-qtt class="minus button"></a>
                        <input type="text" data-qtt-id="quantity__{{ product.id }}" name="quantity" value="1">
                        <a href="#" data-plus-qtt class="plus button"></a>
                    </div>
                </div>
                {% endif %}
                
                {% if section.settings.display_subtotal and current_variant.available %} 
                <div class="total-price">
                    <label {% if settings.enable_multilang %}data-translate="cart.general.subtotal"{%endif%}>
                        {{ 'cart.general.subtotal' | t }}:
                    </label>
                    <span class="total-money">
                        {{ current_variant.price | money }}
                    </span>
                </div>
                {% endif %}
                
                <div class="groups-btn">
                    {% if current_variant.available %}
                    <input data-btn-addToCart type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{%endif%} id="product-add-to-cart" value="{{ 'products.product.add_to_cart' | t }}">          
                    {% else %} 
                    <input type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.unavailable"{%endif%} id="product-add-to-cart" disabled value="{{ 'products.product.unavailable' | t }}">          
                    {% endif %}

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
743 39 126

Hello, @xlyzero!

 

My name is Tira, and I work at Shopify.

 

That is a very interesting question and concept! 

 

I appreciate that you did some research to try removing the button on the product page, to prevent customers from making a purchase. That YouTube video does look a bit outdated, as it is showing an older admin version. No worry though, we do have a tutorial on how to replace the add to cart button that you can follow.

 

If you're using a Shopify-theme, you can take a look at this help doc: Replace "Add to Cart" button. If you scroll down to the "Hide the add to cart button" section of the document, you'll see the instructions to hide the code for the Add to Cart button. 

 

In your product's description, you can then put your messaging, "Only available in-store" to inform customers that they can't purchase it online.

 

Let me know if that helps! 

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
2 0 0

Hey @Tira,

 

Thanks for sharing the guide with me. 

 

I followed the guide exactly but when I am trying to save the new template; I get an "unknown syntax 'schema'" error. 

The tags {% schema %} & {% endschema %} seem to be invalid, however, they were originally already in the code. 

 

Any way to troubleshoot this? 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
743 39 126

You're welcome, @xlyzero!

 

Were you trying to save a new template to replace the "Add to Cart" button with a link? I'm not exactly sure why this error would occur. What theme are you using?

 

If you're using a third-party theme, you can reach out to the theme developer directly to ask for assistance on how to hide the "Add to Cart" button, as the guide above may not be 100% accurate for themes that aren't made from Shopify. If it is a Shopify theme, please let me know and I would be happy to take a further look into your store with our design team to help. For Shopify themes, you can view our design policy here.

 

Let me know if that makes sense!

 

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
1 0 0

Hi Tira,

 

Trying to accomplish the same thing here - however, when I get to the step in the "Replace Add to Cart Button" doc that tells me to click on "product-template.liquid" in the Sections directory, I don't see "product-template.liquid" anywhere in the list.  Do you know why that is/how we can work around that? I am using the Shopify "Story" theme.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
743 39 126

Hi, @amena.

 

It looks like the Story theme is one of the paid themes from our Theme Store. Since it is a theme developed by a third-party developer, Groupthought, I recommend reaching out to them directly to ask for assistance with replacing your Add to Cart button on your theme. As they developed the theme, they will have more insight and knowledge and will be able to provide you with guidance and resources on how to implement this feature into your theme. The help doc is typically used for our free themes which are made by Shopify. Paid themes may come without the same sections as our free themes.

 

You can contact them on their contact page here: Groupthought Contact Page.

 

Let me know if that helps!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Tourist
8 0 1

Hey Tira- thanks for the link and the info! I managed to hide the 'Add To Cart' link but I cannot update all my product descriptions with "Product only available in store". Also, I think this would be counter-productive if in case the product were to be offered online in future.

Is there a way to add a text box or a non-functional button that says "Only available in store"? How do I add this to the newly created theme template file?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
743 39 126

Hi, @fuzzbuzz.

Glad to hear that you were able to hide your "Add to cart" link.

In the tutorial I linked earlier, there is a section to add an email link or a contact form to replace the link. I highly recommend choosing one of these options as it will bring a call to action to your customer and they can use this to contact you about the product directly. 

If you still want to add plain text to your product description, I recommend updating your product descriptions using our bulk editor. The bulk editor helps you apply changes or add information to multiple products and variants within your Shopify admin. You can check out our help doc on updating your products in bulk here: Using the bulk editor.  

Great point on your product pivot. If you do decide to sell your product online, you can always remove the coding that you've added from the tutorial and remove the text from the product description of your products by using the bulk editor. You can roll-back your theme to revert changes to a previous date by following the steps in our help doc here: Roll-back your theme

Let me know if this helps you accomplish this!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Tourist
8 0 1

Thanks for the helpful information @Tira. Instead of a contact form or email link, is there a way that I can add some code to the Liquid files or make another template for some products that are only available in store?

It's quite a painful procedure to make these edits in an excel and bulk import. Again, this will break the link that these products have with Vend. So I will have to re-publish them from Vend and add all pictures, info, etc.

Making a new template solves this issue, because it allows for the visitor to see that certain products are only available in store (much like Walmart or any other major retailer would show on their website). Is this possible or is it too much to ask for (asking because I'm not sure how much code will have to be edited).

Thanks in advance.

0 Likes
Highlighted
Shopify Partner
2471 129 406

 


@fuzzbuzz wrote:

It's quite a painful procedure to make these edits in an excel and bulk import. Again, this will break the link that these products have with Vend. So I will have to re-publish them from Vend and add all pictures, info, etc.

 


Quick fix is to add a tag like "_in_store_only" or similar tag name, then in the relevant product template find the spot that outputs the product description and make it conditional.

 

{% if product.tags contain "_in_store_only" %}
<p> Only sold in store</p>
{% else %}
   ...... standard product description code goes here
{% endif %}

 

 

Though be sure to check your templates as some themes come with alternate templates for  prepurchase, out of stock, etc that could be copied for instoreonly.

Or those templates may have a variable you can set to change the description.

 

If you need paid help with this customization contact me at paull.newton+shopifyforums@gmail.com 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com