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

Store Design
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!

2

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…

{{ 'products.product.quantity' | t }}
  {{ 'products.product.add_to_cart' | t }} {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}
3

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.

Hope this helps! :slight_smile:

Best regards,
Arthur

4

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?

5

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.

6

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.

7

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.

8

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

9

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!

10

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

11

Thanks! That did the trick for me.

12

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

13

This helped me so quick & easy, thanks!

14

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

15

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.

16

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 !

17

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

18

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.