Shopify themes, liquid, logos, and UX
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!
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> </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>
Liked " I literally have no idea what I'm talking about as I do not know how to code... " Awesome. Join the crowd!
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! 🙂
Best regards,
Arthur
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!
Thanks! That did the trick for me.
This helped me so quick & easy, thanks!
How do I do this without product pages in customize , is there another way
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.
Hi How can i show buy it now button in only one collection can you please help me
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 !
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?
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.
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.
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.
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 🙂
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024