Checkout CSS

From Shopify Wiki

Jump to: navigation, search

You can change the style of Shopify’s checkout system by uploading a checkout.css or checkout.css.liquid file to your theme’s asset folder. This CSS style sheet will target the checkout page so you can change visual properties like the background color and font-sizes. Remember to use the asset_url tag for your images faster CDN updates and to adds HTTPS to the image.

Image:/upload/8/84/Snowdevil - Checkout-2.png


Checkout.css

/* MAKE SURE you name your file checkout.css.liquid to use liquid filters */ Here is an example file to get you started



/* Undo background and gradient */
body, #main, #container, #header, #footer {
  background: #fff !important;
}

/* Undo overview background and borders */
#main #overview {
  background: #fff;
  border: none;
}
#main #overview > * {
  border: none;
}
#main #thumbs div {
  border: none;
}

/* Insert your own logo (upload separately) */
#logo { 
  height: 65px;
  background: url({{ 'logo-checkout.png' | asset_url | replace: 'http://','https://' }}) center no-repeat;
}

#header > h1{
  text-align:center;
}

/* Hide the name of the store because we got this nifty logo now */

#header > h1 span.title {
  display:none;
}

Mobile Themes

For mobile themes, you can overwrite the default checkout CSS by creating a file called "checkout.mobile.css" or "checkout.mobile.css.liquid".