Shopify themes, liquid, logos, and UX
I am trying to remove the quantity picker from one of my products as i am using a variant to chose the quantity as there is discounts if you buy more.
I think i have found the code and know i need to make a new template and section to have my page go to this code.
Capture 1 is the code i believe i need to edit or change.
Would anyone be able to help. i am using the Brooklyn Theme
Solved! Go to the solution
This is an accepted solution.
Hey there,
Bo here from Shopify Support!
That is a really great question and you are absolutely heading down the right path to get this done. You will be able to remove the quantity selector from this product by creating a new template and a new section so let's get started.
{% section 'product-template' %}
with:
{% section 'product-template-alternate' %}
Now that you have made this change to the code itself you can go ahead and select that template for your product.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
Bo | Retired Staff Member
This is an accepted solution.
Hey there,
Bo here from Shopify Support!
That is a really great question and you are absolutely heading down the right path to get this done. You will be able to remove the quantity selector from this product by creating a new template and a new section so let's get started.
{% section 'product-template' %}
with:
{% section 'product-template-alternate' %}
Now that you have made this change to the code itself you can go ahead and select that template for your product.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
Bo | Retired Staff Member
Thanks Bo,
Worked a charm
Hi Bo,
I'm also a newbee with Shopify and I have followed your instructions on how to make an alternate product page template and thereafter comment out the Quantity selector.
At first view it works fine (no quantity selector appears on the product page where I have assigned the my new alternate product page template:-)) - but when I use the new alternate product template it seems that I loose some of the regular settings. For instance, the Social sharing icons ar also gone and the styling of the submit to card button is gone too.
Do I have to do some changes in "settings_data.json", "social-sharing.liquid" or some other setting-files to get the altenate product page to act like my normal product pages.
Snap_1.png:
My normal product page
Snap_2.png:
The product where I have used the new alternate product Page Template (As you can see, The Social Sharing section is gone and the styling off the submit button is also gone.
Can you please guide me in this matter?...thanks in advance....
/Ulf
Hey there, Ulf!
This tutorial was specific for an unedited version of the Brooklyn theme. Is this the theme that you are currently using?
All the Best,
Bo
Bo | Retired Staff Member
Hi Bo and sorry for the delayed reply.
I've solved the issue my self...actually right after I posted my request. It seemed that I just had to update my Shopify settings for that particually the page where I had assigned the new template :-). So all is working great now.
But thanks for your rapid reply to my question in the first place 🙂
Best Regarda
/Ulf
Brilliant! I am so glad this worked out for you in the end!
All the Best,
Bo
Bo | Retired Staff Member
Hello Ulf, I have also attempted this method to remove the quantity selector - It worked! but now my dynamic payment / buy it now button also removed, what settings did you change?
Kind Regards
Matt
Hey Bo, i have a concerning regarding the quantity selector and i am using the Brooklyn theme as well. For my case i wanna remove it completely from the cart page as my services consist of offering guided private tours this implies that prices are related to the number of travellers so the quantity selector in the cart is simply confusing.
Hey there, @allos111
That is a really great question, it is however a great deal more complicated as it requires a lot of delicate removal of CSS and javascript. I would recommend getting in touch with our support team directly regarding this so that they can escalate it to our themes team. If you go to this page and click Contact Support you will be prompted to either login or continue without a store. Once you have selected an option you will be asked to ask about a topic. Search for your query and relevant help docs will appear as well as the option to proceed to contact the support team.
All the Best,
Bo
Bo | Retired Staff Member
Hi Bo,
I am using the Mobilia theme, and wanting to do the same. Is the coding different for Mobilia?
Many thanks,
heyy Bo,
can you suggest me the best way to catch variant change event on product page.
Hey there, @1234567891
I would recommend posting this query in our awesome API and Technology Community. I would not know how to implement that kind of tracking, however, someone in the community might! It's the best place to get help from both Shopify's dev team and other developers for assistance with API related questions and development.
All the Best,
Bo
Bo | Retired Staff Member
Hi! I want to remove the quantity only from certain products on my store (more than one but not all). How would I go about doing this? I am using Debut theme. Would what was previously suggested work for this?
Also, is there a way to change the name of the quantity selector? Also just for certain products.
Any help on this would be greatly appreciated!
Hey there, @AidanSchaper
I would recommend posting this query in the Design Community board to get more eyes on it as this is a relatively old post. I would love to look into it for you so feel free to @Bo me in the new post.
All the Best,
Bo
Bo | Retired Staff Member
Hello Bo,
I have tried to follow the steps but unfortunately, I don't get anything related to quantity on the product-template-alternate.
This is the only think that I find the i search for quantity...
Hey there, @Valentinaudisio
I must stress that the tutorial you were following was for the Brooklyn Theme. There is no one-size-fits-all solutions when it comes to themes as they are all coded very differently. From what I can see from your screenshot it looks like you may be using a heavily customized version of Narrative or a third-party theme. If you are using Narrative you will need to take some different steps. As statd, however, your theme looks heavily customized and so I cannot guarantee these steps will work. If they do not, our theme support team may be able to assist you. To get their help we’ll need to access your account. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit https://bit.ly/3cJkx8V and log in to your account to create a support request.
Steps:
1. From your theme code editor, scroll down to the Snippets folder and open the product-form.liquid file.
2. Copy all of the code from this file.
3. Click Add a new snippet, name it product-form-alternate and then paste the code from your clipboard into this new snippet.
4. In this new file look for the following code:
{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__quantity-selector">
<label class="product-form__quantity-label{% unless section.settings.show_variant_labels %} product-form__quantity-label--hidden{% endunless %}" for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input class="product-form__quantity-input" type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" pattern="[0-9]*">
</div>
{% endif %}
Replace it with this:
{% comment %} {% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__quantity-selector">
<label class="product-form__quantity-label{% unless section.settings.show_variant_labels %} product-form__quantity-label--hidden{% endunless %}" for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input class="product-form__quantity-input" type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" pattern="[0-9]*">
</div>
{% endif %} {% endcomment %}
Click Save.
5. Open up your product-template-alternate file and find the following code:
{% include 'product-form' %}
Replace it with:
{% include 'product-form-alternate' %}
6. Click Save.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
Bo
Bo | Retired Staff Member
Hello
Thank you so much for your help!
Unfortunately, I can't find any code that says "include"
Am I doing anything wrong?
Hey again, @Valentinaudisio
Apologies for any confusion! I can see that the file that is open in your screenshot is the product-form-alternate as opposed to the product-template-alternate file. Now that you have added the alternate product form you must open the product-template-alternate file in your Sections folder and look for the code that says "include" there.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
Bo
Bo | Retired Staff Member
Hello,
sorry for the confusing, as you can see it is the first time dealing with coding..
I managed to copy the code on the right page, however, i don't get the product option into the item page..
Not to worry. It looks like you missed some of the original steps from my initial tutorial.
1. Go to the product.liquid file in your Templates folder and copy all of the code.
2. Click "Add a New Template" and select "product" from the dropdown. Nam this new template "alternate".
3. Paste the code from your clipboard.
4. Find {% section 'product-template' %} and replace it with {% section 'product-template-alternate' %}
5. Click Save.
You should now be able to select this template from the product page. Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
Bo
Bo | Retired Staff Member
Hi Bo,
Thank you.. however, now all the variants disappeared and the button add to cart too...and I managed to delete an old Bold page which generated a liquid error on all pages. Please help, how can I fix both issues?
I am using an app called best custom product options for the variants that I need.. see the last screenshot with how it should look like without the quantity,
It looks as though you may have left the product-form-alternate blank as opposed to adding the code as instructed. I'm afraid that the support I can give here is limited as I am unable to access your store through this channel. Please go through all my instructions very carefully and make sure you did not miss anything, you should not be having these issues. If you find you are unable to find the issue please contact support directly. They will likely escalate this to themes for you.
While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit https://bit.ly/3cJkx8V and log in to your account to create a support request.
Bo
Bo | Retired Staff Member
Hello Bo,
sorry to be a pain, i have contact support but they can't find the file..
Hey again, I was out of the office when you got back to me. Could you give me the ticket number for this interaction please? I'll go ahead and track it down and make the changes for you.
Bo
Bo | Retired Staff Member
Hello,
Sure, 23249344
Hey @Valentinaudisio
Thank you for sharing! I can see that this has now been solved.
All the Best,
Bo
Bo | Retired Staff Member
Hi Bo,
I am afraid that I had to change the name of the product and the quantity is back.
Can you please help me removing it again?
Thanks
Hey @Valentinaudisio
I am unable to assist with this. Please respond to the ticket directly to get help from the theme support team.
Bo
Bo | Retired Staff Member
Hi Bo, Can you share the same for theme 'Venture' ?
Hey there, @opulence
That would be a completely different tutorial, I would recommend posting your request as a new post here in our design forum to get help.
All the Best,
Bo
Bo | Retired Staff Member
Bo, I did this and it worked fine on the Venture theme product page, but then when i view my cart the quantities choice reappears. How do I go about removing the quantities choices on the cart of one specific product?
Thx
Wonderful!! I am glad to hear that this worked on the product page. Removing the quantity selector for all products in the cart page would be relatively easy, however, having it appear and remove based on the product will be more complicated. If you want it to only not show on certain products I would recommend reaching out to a Shopify Expert.
<p> <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0">{{ 'cart.general.remove' | t }}</a> </p> </td> <td class="cart__cell--quantity"> <label for="Updates_{{ item.key }}" class="cart__quantity-label medium-up--hide">{{ 'cart.label.quantity' | t }}</label> <input type="number" name="updates[]" id="Updates_{{ item.key }}" class="cart__quantity" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}" aria-label="{{ 'cart.label.quantity' | t }}"> </td>
{% comment %} <p> <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0">{{ 'cart.general.remove' | t }}</a> </p> </td> <td class="cart__cell--quantity"> <label for="Updates_{{ item.key }}" class="cart__quantity-label medium-up--hide">{{ 'cart.label.quantity' | t }}</label> <input type="number" name="updates[]" id="Updates_{{ item.key }}" class="cart__quantity" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}" aria-label="{{ 'cart.label.quantity' | t }}"> </td> {% endcomment %}
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
Bo | Retired Staff Member
Hi Bo,
I'm using Brooklyn theme and I would like to remove the quantity box on the cart slider. Is it possible? If yes, please let me know how it could be done!
Hey there, @marbil_1
I would recommend posting this query in the Design Community board to get more eyes on it as this is a relatively old post. I would love to look into it for you so feel free to @Bo me in the new post.
All the Best,
Bo
Bo | Retired Staff Member
Are we also be able to remove quantity selector on the cart page?
That can be done for sure. What version of what theme are you currently using? These tutorials are very specific to the theme and version. If you would like, you can create a new thread altogether about this in the design forum so other people can chime in on how to help and find the answer you get when they are looking for the same solution!
All the Best,
Bo
Bo | Retired Staff Member
I'm using a third party theme 😞
Thank you for confirming, @AnnCodi39. In that case, I would recommend starting a new thread, as the theme is the third party I would not be the best to advise you. You could also hire a Shopify Expert.
All the Best,
Bo
Bo | Retired Staff Member
Hey Bo,
I tried following the steps and it didn't work out. Here is a screenshot. I'll be glad if you can guide. Thanks.
@Bo wrote:Hey there,
Bo here from Shopify Support!
That is a really great question and you are absolutely heading down the right path to get this done. You will be able to remove the quantity selector from this product by creating a new template and a new section so let's get started.
- Go to Online Store > Edit Code.
- Under the Templates folder select "Add a new template". Select product from the dropdown and you can name it what you want, for this case we will simply call it alternate and create the template.
- On line six replace:
{% section 'product-template' %}with:
{% section 'product-template-alternate' %}
- Click Save.
- Under the Sections folder you will select "Add a new section". You will name this new section "product-template-alternate".
- Go to product-template.liquid and copy all the code. Once copied go back to product-template-alternate and paste replace whatever code is there with what you have copied.
- At the start of line 329 you will add {% comment %} and at the end of line 334 you will close it with {% endcomment %}. The finished product will look like this:
- Click Save.
Now that you have made this change to the code itself you can go ahead and select that template for your product.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
Hey there, @Rafay-Hussain
Could you please confirm the name of the theme that you are using and send me on a link to your store?
Thank You!
Bo
Bo | Retired Staff Member
Hi Bo,
Thanks for sharing your knowledge with us!
I attempted to do this but quickly realized it would be different for every theme. I am currently using the Debut theme. Would you be able to help me remove the quantity bar on some of my products?
Looking forward to your reply. Thank you!
Hey there, @hushlifestyle
So most of the steps are the same as my original posting, you will just need to edit a different line in this new alternate copy of the product-template.liquid. You will need to comment out the following code:
{% if section.settings.show_quantity_selector %} <div class="product-form__item product-form__item--quantity"> <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label> <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*"> </div> {% endif %}
The end result will look like this:
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
Bo | Retired Staff Member
Can you share the same process for venture theme?
It worked, but it made all my product photos stacked on top eachother instead of being organized in smaller thumbnails with button. Do you have a solution? 🙂
Hi Bo,
I would like to do this to remove the quantity from the Minimal theme as the quantity and price will be dictated by the variants. How do I do that? I got to the section where you change the code on line 329 but I did not find that code there.
@Bo wrote:Hey there,
Bo here from Shopify Support!
That is a really great question and you are absolutely heading down the right path to get this done. You will be able to remove the quantity selector from this product by creating a new template and a new section so let's get started.
- Go to Online Store > Edit Code.
- Under the Templates folder select "Add a new template". Select product from the dropdown and you can name it what you want, for this case we will simply call it alternate and create the template.
- On line six replace:
{% section 'product-template' %}with:
{% section 'product-template-alternate' %}
- Click Save.
- Under the Sections folder you will select "Add a new section". You will name this new section "product-template-alternate".
- Go to product-template.liquid and copy all the code. Once copied go back to product-template-alternate and paste replace whatever code is there with what you have copied.
- At the start of line 329 you will add {% comment %} and at the end of line 334 you will close it with {% endcomment %}. The finished product will look like this:
- Click Save.
Now that you have made this change to the code itself you can go ahead and select that template for your product.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
Hey there, @CoolErin
That would be a completely different tutorial, I would recommend posting your request as a new post here in our design forum to get help.
All the Best,
Bo
Bo | Retired Staff Member
hi there, you say at the end :
"Now that you have made this change to the code itself you can go ahead and select that template for your product."
¿how can i select that template after doing all of this?
thanks
Hey there, @bancuverperu
Once an alternate template exists, a new drop-down menu will appear in the relevant template option in the Shopify admin. This will allow you to select which template you would like applied to the collection, page, or product. Shopify will use the base template by default so you won’t need to change every existing item—just the ones you wish to be rendered with the new alternate template.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
Bo | Retired Staff Member
Hi Bo!
We are currently using the Pipeline theme for our store.
We don't that many lines under our product.liquid section.
Can you please advise on how to proceed with removing the quantity option from one specific product page in our theme?
Thanks!
Hey there, @MaisieR
As Pipeline is not a Shopify Supported theme I would not have the relevant tools or knowledge to help you with this. I would have to recommend that you reach out to the developers of Prestige. This theme is designed and supported by Groupthought. You can contact their support team here.
All the Best,
Bo
Bo | Retired Staff Member
Hello,
I have a promotional products website where I'm trying to do fixed quantity pricing using varients option as quantity, but the default one is still there and it's confusing for customers.
So please tell how can I remove the quantity selector that comes in theme by default in debut theme just for one particular collection of products?
The link is below for your reference.
Thank you,
Himanshu
https://www.kleanhut.com/products/french-press-selkirk-set?_pos=1&_psq=french%20p&_ss=e&_v=1.0
Hello Bo,
i have the same problem, I would like to remove the quantity selector from all my pages in Shopify. Unfortunately the instructions provided there did not work for me... Could you please help me?
Thanks you very much!
Hey there, @WOEA
If you could please provide me with a link to your store (and the password for your password page if it is still enabled) and the name of your theme I would be more than happy to look into this for you.
All the Best,
Bo
Bo | Retired Staff Member
Hey there, @WOEA !
Shopify Support is only able to provide support for Shopify Supported themes. As this is a third-party theme you will need to reach out to Pixel Union directly.
All the Best,
Bo
Bo | Retired Staff Member
Hey, Blanca!
Apologies for the miscommunication. Shopify only provides support for themes made by Shopify i.e. the free themes. We are unable to provide support for third-party themes.
All the Best,
Bo
Bo | Retired Staff Member
Hi Bo,
What if i use the venture template and want to remove the quantity box in a product template, because for some services i use an external booking system for courses etc.
Please respond ASAP.
Thanks!
Best Jacob
Hello,
So tested the solution, using Debut theme as well.
But did not work for me.
On product page I had 2 buttons showing (capture here).
And I had an error when clicking on one of them.
What I'm trying to achieve is removing quantity from product, so when clicking on "buy now" button it redirects to cart without adding a quantity (if there's already 1 product in cart, if 0 than it adds 1, if 1 than adds 0).
User | RANK |
---|---|
72 | |
63 | |
53 | |
52 | |
42 |
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023