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

New Member
15 0 0

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!

0 Likes
New Member
15 0 0

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>

0 Likes

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

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
1 Like
New Member
15 0 0

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? 

0 Likes
Astronaut
761 78 151

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 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 :D
0 Likes
New Member
15 0 0

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. 

0 Likes
Astronaut
761 78 151

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 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 :D
0 Likes
New Member
15 0 0

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 :) 

0 Likes
New Member
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!

0 Likes
Highlighted
New Member
5 0 0
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
0 Likes