Shopify Dynamic Checkout Buttons
/* | |
Shopify Dynamic Checkout Buttons on Cart Page | |
Examples of where broken: | |
https://homesick.com/cart | |
https://ca.kotn.com/cart | |
On Safari it breaks and wraps (see screenshot), in Chrome, since there are just two active, the buttons don’t take up the full space. | |
On Safari, the height also changes from 42px in height to 54px in height — though this seems to be related to the PayPal button. | |
When the buttons wrap, as seen on the Homesick cart, the spacing between buttons is incorrect. | |
To fix all (except PayPal height in Safari) — delete all current styling from .shopify-cleanslate and all descendents (except <div role="button">) — replace with following. */ | |
/* (Grandchild of cleanslate, parent of grid-cell) */ | |
.shopify-cleanslate > div > div { | |
display: flex; | |
margin: 0 -0.25rem; /* -4px */ | |
flex-wrap: wrap; | |
width: calc(100% + 0.5rem); /* 100% + 8px */ | |
} | |
@media (min-width: 35em) { /* 560px */ | |
.shopify-cleanslate > div > div { | |
flex-wrap: nowrap; | |
} | |
} | |
/* data-testid="grid-cell" */ | |
.shopify-cleanslate > div > div > div { | |
width: 100%; | |
flex-basis: 7.5rem; /* 120px */ | |
flex-grow: 1; | |
padding: 0.25rem; /* 4px */ | |
} | |
.paypalLight { | |
width: 100%; | |
border: 0; | |
border-radius: 0.25rem; /* 4px */ | |
overflow: hidden; | |
float: left; | |
height: 54px; | |
} | |
@media (min-width: 35em) { /* 560px */ | |
.paypalLight { | |
height: 42px; | |
} | |
} | |
/* Maintain code for .paypalLight height - as inline style assigning height to be 42px on larger screens doesn't execute within iframe in Safari */ | |
/* <div role="button"> keeps existing styling, though removing border radius would be nice. */ |
This comment has been minimized.
This comment has been minimized.
@benjaminsehl Great override - thanks for posting. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
If you've run into this issue, and are waiting on Shopify to fix — you can use the following to override:
You may need to fiddle with the above, based on your theme — but at least provides you some options.