can I add dynamic checkout button without updating Minimal theme?

Trailblazer
168 1 28

I seem to be using an older version of the Minimal theme as I don't have Dynamic checkout buttons available. I have a made a lot of tweaks to my theme over the last couple years and I have at least a couple free grandfathered apps that I don't want to have to uninstall and reinstall. Updating the theme is probably a big job.

 

Is it possible to add dynamic checkout buttons without upgrading to the latest Minimal theme?

 

 

Thanks!

Leila

0 Likes
Shopify Expert
2674 65 664

Yes, it is. Here is the doc, but then you may need to style them further...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
Trailblazer
168 1 28

Thank you! Can’t wait to give it a try. 

0 Likes
Trailblazer
168 1 28

I followed the doc and added the buy it now button. It was super wide and touching the add to cart button so I added this chunk of code (below) from the new version of Minimal to the bottom of my timber.scss.liquid

 

It helped with the spacing, not the width. However the button is only partially functional. It seems to work fine on desktop but it's not working on mobile. So there must be something else I am missing. 

 

/*================ Smart Payment Buttons ================*/
.shopify-payment-button {
.shopify-payment-button__button--unbranded {
margin-top: 10px;
white-space: normal;
@extend .btn;

&:hover {
background-color: $colorBtnPrimaryHover !important;
}

&:active,
&:focus {
background-color: $colorBtnPrimaryActive !important;
}

.product-form--full & {
@extend .btn--full;
}
}

.shopify-payment-button__button--branded {
border-radius: $radius;
overflow: hidden;

.product-form--full & {
min-height: 60px;
margin-top: 15px;
}
}
}

.shopify-payment-button__button {
margin-top: 10px;

.product-form--wide & {
@extend .btn--wide;
}
}

.shopify-payment-button__more-options {
margin-top: 10px !important;
padding: 8px 0 6px 0;
font-size: em(15px) !important;
color: $colorLink;
line-height: 1;

&:hover,
&:focus {
text-decoration: none !important;
color: $colorLinkHover;
}

.product-form--wide & {
@extend .btn--wide;
}
}

0 Likes