How to hide 'buy it now' NOT 'add to cart' button in Jumpstart theme

Emily_Browne
Tourist
15 0 1

Hi everyone,

The Jumpstart theme has two 'buy' buttons on the product pages - one that reads 'Add to cart' and another that says 'Buy it now' 

I am struggling to hide the latter as I've searched everywhere and can't find it in the code. I used this tutorial to hide the former. 

Does anyone know how to do this? 

Thank you in advance!

Replies 17 (17)

Emily_Browne
Tourist
15 0 1

I have just deleted all of this... but of course saved the code so I can put it back in when needed. Will this cause any problems with my store? Will the code be stable? I literally have no idea what I'm talking about as I do not know how to code... 

 

            <div id="quantity-selector-{{ section.id }}" class="form__column quantity-selector">
              <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="qty-remove-defaults quantity-selector">
            </div>

            <div class="form__column{% if section.settings.enable_payment_button %} form__column--shopify-payment-btn{% endif %}">
              <label>&nbsp;</label>
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--fill btn--regular btn--color{% if section.settings.enable_payment_button %} btn--shopify-payment-btn btn--secondary-accent{% endif %}">
                <span id="AddToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
              </button>
              {% if section.settings.enable_payment_button %}
                {{ form | payment_button }}
              {% endif %}
            </div>

JayMorpheus
Visitor
1 0 0

Liked " I literally have no idea what I'm talking about as I do not know how to code... "  Awesome. Join the crowd!

Arthur_Korniyen
Shopify Expert
198 3 85

Hello Emily,

You can disable the 'buy it now' button in Customize.
From your Shopify admin, go to Online store and open Customize of the required theme. Open the Product page preview and choose the Product pages section. Turn off the 'Show dynamic checkout button' checkbox.
hide button

 

Hope this helps! 🙂

Best regards,
Arthur

Founder at GenovaWebArt | info@genovawebart.com
PuurBezorgd
Visitor
1 0 0

Hi Arthur

 

I am dealing with the same issue but in the Empire theme from Pixel Union there's no checkbox to remove the Buy it now button, it's only there for the Quick Shop option. Any idea how to remove it when using Empire theme?

 

Thanks!

EarthElements
Visitor
1 0 0

Thanks! That did the trick for me.

ShoesGal
Visitor
2 0 0

This helped me so quick & easy, thanks!

truckfarm
Visitor
2 0 0

How do I do this without product pages in customize , is there another way

St3ph3n92
Visitor
1 0 0

I managed to do this by editing the Shopify theme code. I was using 'Debut'.

 

In the "Sections" folder, there is a file called "product-template.liquid". In there, there was this block of code (line 224 of Debut):

 

{% if section.settings.enable_payment_button %}
        {{ form | payment_button }}
{% endif %}

I just commented it out by adding {% comment %} before and {% endcomment %} after it. So it looks like this: 

 

{% comment %}
           {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
           {% endif %}
{% endcomment %}

I could have also just deleted but I didn't want to get rid of it in case I broke it.

sammychris
New Member
11 0 0

Hi How can i show buy it now button in only one collection can you please help me 

 

SoulWarming
Visitor
1 0 0

This absolutely worked! The instruction were clear and I found the "show dynamic checkout Button"  This is so much easier than deleting code.

Thank you for posting !

Emily_Browne
Tourist
15 0 1

Hi Arthur,

Thank you so much for your help! Such a simple solution to a problem that has been bugging me for ages! 

After hiding those buttons, the product descriptions and social sharing buttons look as if they're a little too low down on the page. Is there an easy solution to moving them up the page? 

Ninthony
Shopify Partner
2330 350 1024

The space is probably reserved for that button, your store is password protected so I can't really look at it. If you can provide the password or disable it, I might be able to tell you what to look for.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

Emily_Browne
Tourist
15 0 1

Thank you Ninthony, very kind! My password is currently klause

I have managed to add another button on the product pages which is more relevant to my store (a 'buy now on Kickstarter' button) which makes the image and text seem less far from the top. But there is still quite a large area of white above my item description and product photo that I would prefer to reduce if possible. 

Ninthony
Shopify Partner
2330 350 1024

For the product description in your "theme.scss.liquid" file in your assets folder, there's a style for the product description:

.product-description {
    font-size: 1.14286em;
    margin-top: 45px;
}

Change that margin to however far you want the description from the the bottom of the social.

For the white space above the product itself, it uses a class that is reused on the page in multiple spots, so you can't change that without effecting all of the other spots. You'll want to ctrl + f in your product.liquid file and look for "wrapper--margins". There should be a div underneath that with 2 classes, product and grid. In the wrapper div, you'll want to add a class to it so it'll look like:

<div class="wrapper wrapper--margins less-space">

Where less-space is whatever class name you want to add. Then you'll add this to the bottom of your theme.scss file

.less-space {
    padding-top: 10px!important;
}

Where 10px is how far you want the space to be.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
bottls
Tourist
5 0 1
How do I remove the buy it now button from my store.

I changed the “add to cart” button to buy now.

So now I have two “buy now” buttons.

Please I need help on how to remove the “buy it now” button

Emily_Browne
Tourist
15 0 1

It worked! Thank you so so much Ninthony. 

And thanks again Arthur for replying to my previous question.

Delighted that I've managed to fix this with both of your help 🙂 

Shamsherkhan
Tourist
9 0 1

Everyone is talking about hiding or removing Buy Now  & Add to Cart button from product page but no body is talking about how to hide it from anywhere products are displayed. for example:  

 

Products displayed on home page: https://shamsherkhan.com/

OR 

Product displayed on Collection page: https://shamsherkhan.com/collections/courses/course

 

I have hide it from product page  and also renamed it to "Know More"  but i  don't know how to make it click to open the product page  instead of adding to the cart. 

 

Please help.