Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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. */
@benjaminsehl

This comment has been minimized.

Copy link
Owner Author

benjaminsehl commented Oct 22, 2019

If you've run into this issue, and are waiting on Shopify to fix — you can use the following to override:


:root:root:root {

  .shopify-cleanslate > div > div {
    display: flex !important;
    margin: 0 -0.25rem !important; /* -4px */
    flex-wrap: wrap !important;
    width: calc(100% + 0.5rem) !important; /* 100% + 8px */
  }
  
  @media (min-width: 35em) {  /* 560px */
    .shopify-cleanslate > div > div {
      flex-wrap: nowrap !important;
    }
  }
  
  /* data-testid="grid-cell" */
  .shopify-cleanslate > div > div > div {
    width: 100% !important;
    flex-basis: 7.5rem !important; /* 120px */
    flex-grow: 1 !important;
    padding: 0.25rem !important; /* 4px */
    margin: 0 !important;
    height: auto !important;
    max-height: 3.875rem !important; /* 62px */
  }
  
  .paypalLight {
    width: 100% !important;
  }
  
  .shopify-cleanslate iframe {
    border: 0;
    border-radius: 0.25rem !important; /* 4px */
    overflow: hidden !important;
    float: left !important;
  }
}

You may need to fiddle with the above, based on your theme — but at least provides you some options.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.