"product only available in-store" option

xlyzero
Visitor
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 %}

 

Replies 14 (14)

Tira
Shopify Staff (Retired)
1260 90 223

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! 

To learn more visit the Shopify Help Center or the Community Blog.

xlyzero
Visitor
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? 

Tira
Shopify Staff (Retired)
1260 90 223

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!

 

To learn more visit the Shopify Help Center or the Community Blog.

amena
Visitor
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.

Tira
Shopify Staff (Retired)
1260 90 223

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!

To learn more visit the Shopify Help Center or the Community Blog.

fuzzbuzz
Excursionist
15 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?

Tira
Shopify Staff (Retired)
1260 90 223

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!

To learn more visit the Shopify Help Center or the Community Blog.

fuzzbuzz
Excursionist
15 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.

PaulNewton
Shopify Partner
6274 573 1319

 


@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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


doorns
Tourist
3 0 1

I'm curious if one can do this with a variant of a certain product and if so, how might be the best approach.

Tira
Shopify Staff (Retired)
1260 90 223

Thanks for your reply @fuzzbuzz and for letting me know your concerns. 

I appreciate you chiming in, @PaulNewton. I'm not familiar with coding, but I think this would be a great suggestion. I wanted to add that you can absolutely add an alternate template to your product page. Alternate templates can be created in your theme and they allow you to apply your own coding customizations to specific products, collections and other pages that you apply the template to. You can check out our dev tutorial here to set this up on your store: Create alternate templates

Let me know if this helps you accomplish what you're looking to do. 

To learn more visit the Shopify Help Center or the Community Blog.

fuzzbuzz
Excursionist
15 0 1

Thanks @Tira this helps. I have referred to the link you shared for making alternative templates. Although I'm not a coder, I've managed to make a product-in-store-only template.

RockyG1rl
Visitor
2 0 1

Is there a way to put in a request for an "in-store only" button feature? We are a chocolate shop and there are some items that we do not want to ship but would still like to display on our website as products because people can purchase them in store.

Michael-Savvy
Visitor
1 0 1

do you have a new article for the 2.0 dawn theme?