Shopify themes, liquid, logos, and UX
I've been trying to remove the "Express Checkout" section from the Dawn theme's checkout page. I used this code:
{% if additional_checkout_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
and
.additional_checkout_buttons{
display:none !important;
}
Which worked at removing the Express Checkout from the checkout page, but it brought back the Dynamic Checkout buttons below the "Proceed to Checkout" button in my cart.
I'd like to know how to remove both the "Express Checkout" section from the cart page while keeping the Dynamic Checkout buttons invisible as well.
Website: https://kittie-treats.com
Solved! Go to the solution
This is an accepted solution.
Oh, I figured out that I was supposed to put the
.additional_checkout_buttons{
display:none !important;
}
code in the component-cart-notification.css instead of the base.css.
And I put this code:
{% if additional_checkout_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
in the main-cart-footer.liquid after this part:
<div><button type="submit" style="width: 100%" id="checkout" class="cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
{{ 'sections.cart.checkout' | t }}
</button>
Now it works!
This is an accepted solution.
Oh, I figured out that I was supposed to put the
.additional_checkout_buttons{
display:none !important;
}
code in the component-cart-notification.css instead of the base.css.
And I put this code:
{% if additional_checkout_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
in the main-cart-footer.liquid after this part:
<div><button type="submit" style="width: 100%" id="checkout" class="cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
{{ 'sections.cart.checkout' | t }}
</button>
Now it works!
Well done kudos to you 😄
Hi Melimiya,
Unfortunately for me this didn't work. Would you mind sharing a screenshot of your code or something? I followed exactly your steps, but no result 😞
could you please rephrase this one more time.this didnt work on my end.
I was looking at your store but i still see the express checkout buttons in the first step of the checkout?
This does not work. Shopify disabled this "solution" sometime since this was posted.
Alas the community forum is still full of false solutions.
hi
i am using focal theme , please help to remove these checkouts from checkout page , theme 2.0 focal
Hi Melimiya and all,
It seems like since mid of 2022, the liquid / CSS code to hide the checkout button does not work anymore. To hide the express checkout payment method, you will need an app that utilize Shopify Functions. (a way for an app to communicate with Shopify to remove certain payment methods)
I have made an app to hide the Paypal Express (and other express checkout method like Apple Pay, Google Pay etc) on the top part of checkout page, and customer can still select Paypal method at the payment step.
The app is made using native Shopify Functions, thus it does not affect your store existing layout or functionality at all. You don't need to be on Shopify Plus plan to use the app, your store can be on any Shopify Plan.
The app name is Yagi Express Payment Hider (https://apps.shopify.com/yagi-express-payment-hider)
The app also have a workaround which you can hide the express checkout buttons for returning customers with saved address, but you will need to create a placeholder shipping rate for it to work, this will also work with one-page checkout.
Hope this can help!
Regards,
Axel Kee
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024Note: Customizing your CSS requires some familiarity with CSS and HTML. Before you cust...
By JasonH Aug 12, 2024