d
Topic
Posts:
20
May 04, 2007

Changing the full checkout look? This post is outdated

I see at first test that the look and feel of the checkout stage(s) seems hardcoded by Shopify. Is there no way to change the styling of these pages?
i
Replies
Posts:
2056
May 05, 2007

No there isn’t. This is a good thing however. As the shopify veterans will be able to tell you we work on the checkout procedure constantly. Recently we eliminated an entire step from the process and added discount codes.

We will move the checkout system into the themeable domain but not just yet. Once it is released as editable though we will not be able to change the checkout in any meaningful way.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
Posts:
20
May 05, 2007

Thanks Tobi.

Just seemed to me that it would be easy to allow at least setting colors and font faces for main DIVs.

Posts:
8
May 05, 2007

I’m with others in that I’d like atleast some control over the look of the checkout pages. The current process of the checkout is absolutely fantastic and I have no desire to change that. But what I would like to change is the look of it to atleast have the same color scheme or some resemblance to my site.

It’d be interesting to see how many people bail during the purchase process because of the complete change in appearance.

Posts:
20
May 05, 2007

That is my main concern, Shpigford. It’s very unnerving for a customer in this world of phishing and identity theft. If I was a customer of my site, as soon as the look and feel changed, my reaction would be, “Whoa whoa whoa… what the hell just happened here. Where am I now?”

Really not good.

I feel like I need to put a completely unprofessional disclaimer on the cart page stating: “If you see the look and feel of the site change during the checkout process, please do not panic. The store is hosted with a company that doesn’t allow customization of the checkout process styling, so it won’t look like the rest of the store. We apologize.”

Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
May 05, 2007

I know it’s been mentioned before, but I would like to put in my vote for having some sort of control over the checkout page as well. I agree with jblaine that a lot of potential customers are unnerved by the complete change once arriving at the checkout and this may very well lead to abandoned carts.

This issue was actually one of the breaking points that caused my client to debate whether he wanted to use Shopify or not.

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
Cliff Shopify Partner cliff.io
Posts:
258
May 05, 2007

I feel like I need to put a completely unprofessional disclaimer on the cart page stating: “If you see the look and feel of the site change during the checkout process, please do not panic. The store is hosted with a company that doesn’t allow customization of the checkout process styling, so it won’t look like the rest of the store. We apologize.

Quicksecurecheckout thumb
Cliff Spence
Tyler Member
Posts:
72
May 25, 2007

Hey Cliff,

Do you mind posting the necessary coding for that optional message you posted above? Seeing as I’m using your Minify theme it should fit in nicely.

Even if we were allowed to at least have our own custom header image or banner, it would be a million times better. But I can fully understand what Tobi is saying.

Tyler Member
Posts:
72
May 29, 2007

Bump… hoping Cliff sees this.

Cliff Shopify Partner cliff.io
Posts:
258
May 29, 2007

Hi Tyler, sorry, I wish there were a better way to keep track of threads I’ve posted on. :)

This is what I used for the screenshot above with inline CSS:

<p style="background-color:#ffc;border-top:1px solid #ff9;border-bottom:1px solid #ff9;padding:5px;margin:10px 0;font-size:85%;text-align:right;">Click the button below to continue to our quick and secure checkout process...</p>

I placed it above the checkout button div in my example. You might want to move the styles into your stylesheet, but it’s up to you.

Cliff Spence
Tyler Member
Posts:
72
May 29, 2007

Fantastic Cliff! Thank you very much!

P.S. – I agree, or a PM function, either would be fantastic!

Posts:
1133
June 19, 2007

Another suggestion would be to have the checkout pages appear in a lightbox. Once the checkout is done the lightbox would close and take you back to the home page, potentially showing a message saying thanks for your order…

Take a look at our Apps: www.bookthatapp.com ♥ www.searchifyapp.com ♥ www.productsassistant.com
Cliff Shopify Partner cliff.io
Posts:
258
June 19, 2007

The problem is that it would be very difficult to secure properly. It would be disconcerting for a customer and too easy for them to accidentally exit out of. There’s also the issue of space and extra vertical scroll.

Lightboxes are great for things like help content, images, sign-in forms, or even a contact form. But I’d imagine that conversions would really suffer if you asked for money through a modal box.

Cliff Spence
Posts:
1133
June 19, 2007

The advantage of using a (suitably sized) lightbox effect would be that you would be able to see your shop behind it, so at least it doesn’t look like a completely different site (i.e. less of a visual disconnect). I don’t think it would impact conversions any more adversely than the way it is currently being done. You could argue that it would actually be more consistent with the behaviour of the rest of the site from a user’s point of view because they may have seen the effect if they clicked an image. Having said that, this is my first Shopify shop so I am still learning the in’s and out’s.

Ultimately though, I want to be able to customize the checkout look and feel, so this suggestion was just an idea until that feature becomes a reality.

Take a look at our Apps: www.bookthatapp.com ♥ www.searchifyapp.com ♥ www.productsassistant.com
Posts:
3
July 27, 2007

A consistent look and feel between the store and the checkout process should be a high priority… you can’t trust and assume users will be able to trust the checkout process simply by telling them, especially since the domain changes.

If the entire look and feel can’t change, then at least allow shop owners to change the colors and perhaps a background image to help integrate the two, not necessarily allow them to add images and change the header and footer?

Posts:
407
July 28, 2007

We’re waiting until the checkout flow is perfected before we are going to allow any customization. We have several changes in store for the checkout flow, which would be impossible once we allow customization of the process.

Cody Fauser Shopify – CTO
Posts:
3
August 21, 2007

Cody, if it’s easier to allow store owners to just choose a few colors and perhaps a background image via CSS… not modify the actual template, that may help alleviate some issues store owners (and their consumers) have with the checkout process—simple things to help tie the store and the checkout process together.

I know you don’t want to put any timelines out there for when you’re going to push those changes out to the checkout process, but realistically, “waiting until the checkout flow is perfected” could take quite a while.

I’m sure if you explore the possible short-term solution I provided, you may find that that is quickly feasible while we wait on those other changes?

Johannes Member
Posts:
1
Last edited August 27, 2007

there are also legal problems according to the checkout procedure.. in austria for example shopowners have to make sure, that their customers have already agreed to the terms and conditions before paying. therefore the best way to fulfil this duty is to integrate the option to write a sentence like “I agree to the terms…” on the last page of the checkout procedure. it would be great to add the option that customers even have to mark a box with a cross (~a confirmation that they agree to the terms) before paying
i’m not sure, but it might be that the legal situation in other countries of the eu is similar

lis Member
Posts:
22
Last edited August 28, 2007

Hi there,

I’m wondering if there is an approximate when for customization of the final checkout? I’d love to know if it will be possible soon to change the colors and typefaces—a few weeks? Months?

Or, might it be possible to simply make the whole look of it less stylized at your end? Simply by changing that fleshy tone to white? I think a lot of shops might be compatible with grey / black / red / white?

Thanks so much,
Lis

philoye Shopify Partner
Posts:
1
Last edited August 31, 2007

I want to pile on about customizing checkout. This is the number one barrier to me using Shopify.

I’ve been looking around at other ecommerce packages (which are all terrible), and I desperately want to use Shopify, but a checkout that has a different look is a non-starter, in opinion.

As a few have mentioned above, some very lightweight customization while still having the URL change would be a fine stopgap until “checkout is released into Liquid”. If people could link their own stylesheet and/or add a header image, choose a background color, I would be happy enough.

As it stands, the ONLY indication of what store you’re on is one little bit of text. This is insufficient.

jena Member
Posts:
31
September 10, 2007

I can’t believe I’m going to lose a client over this!

It never occurred to me that you wouldn’t be able to customize the CSS of the checkout screens, and granted, I should have checked before I spent a week selling my client on the virtues of Shopify, and customizing my theme, but wow.

I’d just gotten them over the inflexiblity of the multiple attribute situation and now this.

I would totally expect this from the old way of paying for shopify (3%) but to pay real money every month for a hosted storefront and not be able to change the colors of the checkout screens and add a logo is just a real bummer.

I would urge the JP people, who have a brilliant thing on their hands in Shopify, to address this issue as soon as humanly possible. It’s a major deal breaker for clients who have chosen Shopify BECAUSE it’s so easy to customize the look and feel of their shops without all the visual clutter of Zen Cart or god forbid, Miva.

If they could give us some sort of time estimate on when this feature would be available, that’d be great.

I understand that there are limitations to doing this, but it’s VITAL that this feature be built into the system somehow.

I can’t stress this enough.

I love Shopify and don’t want to have to scrap it for some horrid old-school solution!

Posts:
339
Last edited September 11, 2007

+1 for the checkout.css halfway house

The user-uploaded images are already being pulled with ‘https’ addresses for the checkout screens. Would it be viable to similarly link a shop-owner generated ‘checkout.css’ file (if one existed) from the shop’s assets folder and load it after the other JP standard files.

sort of…
https://staticX.jadedpixel.com/n/files/1/XXXX/XXXX/checkout.css

That way you’d only need to tweak what you needed to.

Some way of specifying a secure/checkout logo or header file would be even better, but if nothing else keeping the colour scheme and typography consistent would be a big step forward.

Would it work?

Thanks
M

Mike www.anothervision.co.uk
Posts:
150
September 10, 2007

That would get my vote as well.

Matt Beck, CouldBe Studios | Portland, OR | http://www.couldbestudios.com : http://deals.couldbestudios.com
Posts:
26
September 11, 2007

Please Jaded Pixel, come to the rescue on this one. Anything to help (i.e. just a background color change for now atleast). The website I am building has a dark crimson background. To go from that to a light gray/white page on checkout is about as much a visual shock to a customer as it can get.

Ultimately, a short term fix to allow some limited flexibility would benefit Jaded Pixel with more clients as well as increase revenue based on greater sales.

help please!!

Posts:
2056
Last edited September 11, 2007

Hey guys.

Thanks for the suggestions. I went ahead and implemented the checkout.css idea as a halfway house solution until full liquidation (heh) of the checkout comes around.

You can see the effect at www.snowdevil.ca demo store.

Here is a demo css which should serve well as a starting point since it undoes much of the current css:


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

/* 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 separatly) */
#logo { 
  height: 65px;
  background: url(logo.gif) center no-repeat;
}

/* center the title */
#header > h1{
  text-align:center;
}

To use the feature just upload a checkout.css file to your assets folder.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
September 12, 2007

Amen! This is a GIANT step in the right direction. Not being able to customize the checkout process has been my major beef with Shopify since the beginning. It seems like a small thing, but changes the user experience tremendously.

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
iammikec Member
Posts:
58
Last edited September 12, 2007

This is obviously a step in the right direction, until you use Internet Explorer and it displays the

‘This page contains both secure and nonsecure items’

‘Do you want to display the nonsecure items’

At which point the customer either runs for the hills, or selects no and undoes any customisation – I know which option I would select!!

Is there any way of doing what Lorem Ipsum suggested – pulling the shop owner generated css file through a secure server?

Mike http://www.vanilla-rose.co.uk http://www.welovemomiji.co.uk
Posts:
2056
September 12, 2007

Its being pulled through the secure server now. Thanks for letting me know.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
iammikec Member
Posts:
58
September 12, 2007

grand job – now works a treat

Many Thanks

Mike http://www.vanilla-rose.co.uk http://www.welovemomiji.co.uk
rob. Member
Posts:
184
September 12, 2007

Thanks for this.

Any way of making the logo have a link back to your homepage instead of having to click the “return to store” link at the very bottom?

Posts:
2056
September 13, 2007

i don’t think you can do that with css.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
Posts:
150
September 13, 2007

Tobi,

If you could put a ‘return to store’ link at the top of the page with an ID, we can easily use image replacement techniques on it to make it a logo.

Matt Beck, CouldBe Studios | Portland, OR | http://www.couldbestudios.com : http://deals.couldbestudios.com
Posts:
2056
September 13, 2007

We can put an onclick event on the logo div once we fix that returning to the store kills the content of the cart. I think this would be too annoying right now.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
Posts:
339
September 13, 2007

Yay!

This change is going to help SOOOOOO much! Thanks : )

@Matt… (well and Tobi actually) wouldn’t you need whatever image you drop in with CSS to come from the https? (or surely you’ll get the ‘secure and non-secure’ warning)

Unless of course Tobi could specify another name-specific item to be pulled from the secure server, say checkout-logo.png (or jpg or whatever) then we could spec that as the css bg of the return to store ID? Would that work?

M

Mike www.anothervision.co.uk
Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
September 14, 2007

Wanted to mention that the checkout page is highly customizable now. Have a look at the source code and make note of the ids and classes used. If you know your way around CSS you can pretty much customize the appearance of everything. I actually have the checkout page almost perfectly matching the rest of the store I’m working on!

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
Posts:
2056
Last edited September 14, 2007

lorem: You can include any picture you like from the CSS such as the logo.gif in the example by using a relative link ( background: url('logo.gif'); ) and then it will be pulled over the same HTTPS pipe the css came from.

meashman: Great to hear! We always recommend firebug for such tasks, it lets you find CSS descriptors very quickly with the inspect tool. Can you post here or in the launched forum when your customizations are done? We would like to compile a few examples of customized checkouts.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
Last edited September 14, 2007

Sure Tobi, I’ll make sure I do that.

I did speak a little too soon though…the successful order completion page is different from all the rest and breaks most of the formatting I set up. Is there a way to change this?

For example why is the slim class introduced here and why can’t I seem to overwrite it? Also, my changes to the header aren’t appearing on this page like they do elsewhere.

EDIT: So I’m getting it to work, but I’m needing to specify #container.slim and then the id again of each element in order for it to take effect.

i.e.

#container.slim #header

when just #header works on the other checkout pages

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
Posts:
339
September 14, 2007

Tobi

That’s great! I’m gonna have to have a play with this when I get a chance.

Thank you so much for sorting this out. I think it’ll keep a lot of people happy and hope it’ll take the pressure off you guys from all those requests for a liquid based checkout.

M

Mike www.anothervision.co.uk
Posts:
251
Last edited September 14, 2007

For overwriting the styles defined under .slim you can alternatively also define the styles with an !important. That will overwrite everything that is defined under #container.slim ....

Example:

#header {
  background-color: #000 !important;
}

Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
Last edited September 14, 2007

Thanks for letting us know about that Daniel. Doesn’t that potentially mean you have to add the !important tag to every style used?

IE:

#header { background: #ccc !important; width: 780px !important; color: #000 !important; }
Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
Posts:
251
September 14, 2007

for #header, #main and #footer yes, and only for the styles that are defined as .slim, so namely

width
padding
background

So it’s not that bad.

Posts:
339
Last edited September 15, 2007

...and not forgetting IE<=6’s tendency to ignore !important declarations where the same property is redefined later in a stylesheet which might come in handy if you need a little IE hackery

Mike www.anothervision.co.uk
Posts:
79
September 18, 2007

Could someone who better understands CSS tell me how I can make the following not print in the display in my cart? I have a checkout.css created but it still shows the text from this code built into the checkout page:

<h1 id="tagline"><span class="title">Present By Design</span> <span class="subtitle">Create your order.</span></h1>

I don’t really need the title or subtitle displayed since I have my logo working. Making this text not print, transparent, not display, etc. would be fine but I don’t know what to add to my own checkout.css to override this title and subtitle code built into the checkout process.

Thanks in advance.

Gifts for Life’s Celebrations http://www.presentbydesign.com/
Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
September 18, 2007

Hi Julene,

There’s no way to remove the text since we don’t have access to the html, but you can specify your css to hide it like so:

#tagline { display: none; }

or

#header h1 { display: none; }

etc.

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
lis Member
Posts:
22
September 19, 2007

This is awesome! I’ve changed the whole checkout look and now have one tiny thing left that I can’t seem to change: The flesh-toned text that reads “1 x $$” under the product thumbs, and the “including $$ tax” on the following page. Can someone clue me into the piece of CSS I should be looking for?

Thank you!

Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
Last edited September 19, 2007

Hi Lis,

It seems that bit of code is found in an unnamed div, not sure why that is! But you should be able to target it with:

#thumbs span { color: #fff; }

and

#tax_span { color: #fff; }
on the second page
Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
lis Member
Posts:
22
September 19, 2007

Hey Meashman,
Thank you! The thumbs span is working fine, the tax_span (and any number of similar combos) isn’t—
I suspect I’m being a bit nitpicky now so I’ll just leave it—but if you think of an alternative I’d be happy to try it!
Lis

Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
September 19, 2007

Glad I could be of help!

Hmmm, maybe:

#tax_span.hint
or
#wallet #tax_span.hint
Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
lis Member
Posts:
22
Last edited September 19, 2007

That worked! The first one:

#tax_span.hint

Thank you!

jena Member
Posts:
31
Last edited September 21, 2007

Hi there.

I’m so happy this is working!

Would anybody mind posting a fully customized checkout.css file so that people who are new to CSS can see how the whole thing fits together? That’d be fabulous!

Posts:
62
September 21, 2007

I second that! It is easier to modify a complete one than to build one ourselves for us non-techies…and if anyone wanted to do it so that I can have a PayPal and Google logo at the same time I would be eternally grateful.

Rachel.

www.babyreflux.co.uk
rob. Member
Posts:
184
September 21, 2007

I don’t promote the copying of code or anything, but you can view the source, and then the .css, and take a look at what they do. That way, you can see the different variables you can use. I know meashman posted a great example of a customized checkout, but unfortunately it goes straight to google checkout. Maybe he can post the different variables he used?

Also, I use PayPal standard and no button or image shows up in the checkout. Why is that?

I am thinking that because I use the PayPal standard no image will be displayed. I don’t use any other credit card authorization.

Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
Last edited September 21, 2007

Hi there…I don’t mind posting the variables I used. You may or may not need to use the same ones, depending on how much customization of your checkout you’re undertaking.

body
#main
#container
#footer
#container.slim
#container.slim #header
#tagline span 
#overview
#container.slim #main
#products
#main #overview > *
#main #thumbs div
#logo
#header > h1
#header > h1 span.title
#header > h1 span.subtitle
#info-bar
#cost
#content
#content input
#email
#addresses
.group
#addresses h3
#payment h3
.group h3
#shipping-same
.address-notification 
#buttons
#commit-button
#complete-purchase
.field-with-errors
.field-with-errors span
#container.slim #footer

Btw, anyone know how to customize the price spinner? When anything is updated it blinks white, which is fine if your background is white but looks funny on any other color.

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
lis Member
Posts:
22
September 21, 2007

I’d love to know the price spinner variable too—mine is sort of yellow and then (as always!) flesh-y.

jena Member
Posts:
31
September 23, 2007

Nice! That looks much more like it!

Since the DP folks posted a sample stylesheet in the first place, and it’s not all that complete, I thought it would be good to see a more robust example, especially for those who don’t know much CSS and are just trying to make their checkout screens look like the rest of their theme.

Posts:
62
September 25, 2007

Is it possible to have an indication when the checkout process will be modifiable by non-programmers? 2007/2008/2009?

For those without CSS/programming expertise there is no way to even add your own logo…

Thanks,
Rachel.

www.babyreflux.co.uk
rob. Member
Posts:
184
September 25, 2007

Hey Rachel, have you tried it yet? It’s fairly easy to add a touch of customization. Just add your logo and change the white bg to the blue you have. I could probably even do for you, send you the .css file, and you just upload it.

Posts:
339
Last edited September 27, 2007

Here’s a simple checkout mod. But boy does it help keeping it in line with the look of the shop. Thanks Tobi!

Checkout thumb
Mike www.anothervision.co.uk
Posts:
734
September 27, 2007

here’s mine; lower part; with additional shipping address option at the bottom.

same pb as ryan (meashman): my background’s dark, so the light highlight looks weird.

plus still a few other wrinkles, but it’s GREAT to be able to do this!!

thanks from here too.

Checkout thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 27, 2007

while i’m at it, might as well show you the top (with the highlight problem – javascript-defined style, hard to change)

for html reasons, haven’t manage to stick my little red logo in there either yet, so it’s pretty bare, but functional.

Checkout2 thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 28, 2007

in answer to jena and rachel, here’s the stylesheet for that, but caveat emptor – it’s a quick & rough attempt, partly a mashup from some other stylesheets i have, so there are loose bits here and there; and stuff that doesn’t belong, but you’re welcome to try and figure it out.

/*defaults
----------------------------------------------------------------------------------*/
html                    {min-height:100%;margin-bottom:1px;} 
body,div,table,
th,td,tr,ul,ol,
li,dl,dd,dt,h1,
h2,h3,h4,h5,h6,
p,a,form                {margin:0;padding:0;}
ul                    {list-style-type:none;}
li                    {display:block;}
a                    {text-decoration:none;}    
img                    {border:none;}

/*link colours*/
a:link,a:visited     {color:#FF975F;}
a:hover, a:active    {color:#FF6E1F;}

/*-------------typography-----------------*/
body {font:small Verdana, sans-serif; line-height:1.6em;}

h1    {font:3.2em 'Trebuchet MS',Helvetica, sans-serif;letter-spacing:0.0825em;text-transform:lowercase;}
#overview h2    {font:2.1em 'Lucida Console', Monaco5, monospace; letter-spacing:0.0825em;color:#ff3f8f;text-transform:lowercase;}
#overview h3    {font:1.4em 'Trebuchet MS',Helvetica, sans-serif;letter-spacing:0.0825em;text-transform:lowercase;color:#ff3f8f;/*#a2ef68;*/}

em, th{font-weight:normal;}
h4,h5,h6            {padding:0 0 10px 0;}
p{padding:0 0 20px 0;}
p.price                {font-size:2em;font-family:Georgia,serif;padding:20px 0;text-align:center;}

/*layout
-----------------------------------------------------------------------------------*/

body                            {position:relative;text-align:center;background:#3A3A39;color:#8FB6BF;}

    #info-bar{z-index:800;}
    #container                {position:relative;width:1000px;margin:0 auto;text-align:left;}

        #header                {position:relative;height:198px;width:1000px;margin:0;padding:0;}
        #header                {background:url(top9.jpg) top left no-repeat;}

            h1                {padding:0;position:absolute;top:68px;left:90px;width:94px;height:69px;z-index:300;}
            h1                  {background:url(divalove.jpg) top left no-repeat;}

            /*this part is quick, rough & messy - do something else*/
            h1 span.subtitle    {display:none;position:absolute;top:17px;left:30px;width:58px;height:51px;z-index:400;}
            h2#logo a        {display:block;width:100%;height:100%;}
            h1 span.title,
            h2#logo a span    {display:none;}
            h2#logo             {background:url(logo.jpg) 0 -186px no-repeat;}
            h1 span.subtitle{background:url(logo.jpg) top center no-repeat;}
            h2#logo a:hover     {background-position:0 -186px;}

        #main                {float:left;width:1000px;padding:0;}
        #main                {background:url(wmid3_2.jpg) top left repeat-y;}

            #overview        {float:left;width:1000px;padding:24px 0 0 0;margin:0;border:none;}
            #overview        {background:url(wtop3_2.jpg) top left no-repeat;}
            #overview         {border-width:0;}
                #products    {float:left;width:399px;margin:20px 0 0 216px;display:inline;border-right:1px solid #5F5F41;}
                    #thumbs td{width:100px;}
                    #thumbs div{margin-bottom:16px;border:none;background:url(prod_tiny_dark.jpg) top left no-repeat;}
                    #thumbs span{color:#a2ef68;padding:10px 0;font-size:1em;}
                #wallet        {background:transparent;float:left;width:190px;padding:0;margin:66px 0 0 0px;display:inline;text-align:center;}
                    #cost{color:#a2ef68;}
                    #tax-span{font-size:3em;}/*not working*/

            #content        {float:left;background:transparent;width:590px;margin:0 0 0 216px;padding:0;display:inline;}
                form            {background:transparent;}
                    #email    {background:transparent;width:570px;margin:10px auto;padding:10px 0;border-style:solid;border-color:#5F5F41;border-width:1px 0;}
                    #email input{width:200px;margin:20px 195px;}
                    #email label{width:200px;margin:20px 195px 0;text-align:center;}
                    #addresses,#buttons{width:570px;height:auto;margin:10px auto;background:transparent;border:none;}
                        .group{padding:0;width:570px;margin:10px auto;}
                        .gleft{width:570px;float:left;margin:0;border-bottom:1px solid #5F5F41;padding:20px 0;}
                        .gright{width:570px;clear:left;float:left;margin:10px 0;padding:20px 0;border-bottom:1px solid #5F5F41;}
                        .gleft h3, .gright h3{text-align:center;border:none;color:#8FB6BF;}
                        .address-notification{border:1px solid #5F5F41;}
        #footer                {float:left;width:1000px;height:56px;padding:0;margin:0;}
        #footer                {background:url(wbot3_2.jpg) bottom left no-repeat;}

            #footer p{margin-top:10px;}

operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
jena Member
Posts:
31
September 28, 2007

Thanks Christina!

I’ll post my final one when I’ve got it sorted.

Posts:
339
Last edited September 28, 2007

@Christina: For your logo… Could you not hijack one of the text ‘span’ elements in the header, ‘display:block’ , add a minus text-indent , specify a transparent png as the background then position it absolutely?

M

Mike www.anothervision.co.uk
Posts:
734
September 28, 2007

hi, Mike -

thanks for your suggestion – this was a first stab, didn’t take much time with it. The header image is actually 3 different ones, I’d really need one more html element, but I’ll try to figure something out later. I.E drives me nuts with pngs.

operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
339
September 28, 2007

Yes tricky if you want to please the <7 crowd>

: |

Mike www.anothervision.co.uk
Ryan Meashaw Shopify Expert keenpixel.com
Posts:
329
September 28, 2007

IE drives me nuts period!

It’s good to see some other custom checkouts! Keep ‘em coming…

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
Posts:
734
September 29, 2007

@ lis & ryan, re: the price spinner and also the highlight background: both defined via javascript in inline style, so there’s nothing we can change about that.

I work with the Firefox Developer’s toolbar, if you have that, you can click on “generated source”, which will show you the source code created with the javascript-generated injections.

Gen source thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

(...continued).

So you see this line:

<div style="background-image: none; background-color: rgb(255, 251, 229);" id="wallet">

where in the original source (before the javascript goings-on), it’s just

<div id="wallet">
Gen source2 thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

Then see the original css:

Gen source3 thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

and you see this:

Gen source4 thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

which means that if you want to change the color, the font-style or the font-size then you have to specify it in your css as

#overview .hint,

otherwise it won’t override.

operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

(suggestion for the forum: putting uploaded images before the signature; it’s a bit messy this way)

operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

correction: I got rid of the spinner altogether by specifying this:
#cost img{display:none;}

but still can’t do anything about the js background colour.

operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

ya. well. i am so out of my depth now:

that highlight seems to be defined in the response to the post method (?) in the prototype.js

ahem.
not totally customizable, as it were…

Gen source thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

ok.
some people think it’s a bad thing that I’m so hard-headed.
also that I go off on monologues.

but: I did nix that highlight, ha!

simple: #wallet{background-color:transparent !important;}

now, a pinhole-size matter: that excess period at the end of “including taxes”. to the jaded pixels: can we get rid of that please?

That period thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
Posts:
734
September 29, 2007

Last words (for now):

@ mike (lorem ipsum) – Thanks!!
Did exactly what you said for my logo (except that it’s a jpg instead of a png), & it works! It’s the negative text-indent that did it – I wouldn’t have thought of that.

To Daniel, Tobi et al: Many thanks again for making this possible; I take back what I said earlier, it’s actually fantastically customizable!

And last screenshot:

Checkout3 thumb
operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
jena Member
Posts:
31
September 30, 2007

Sorry. I’m still confused.

Can I just extract the checkout.css from my the first checkout screen of my live cart, save it, customize it and upload it as “checkout.css”?

Or will I run into problems doing it this way?

Also, if I screw it up, and upload a “checkout.css” that ruins my life, can I just delete this asset and go back to the original or will my upload overwrite the original css forever?

I’m so close to being done I don’t want to kill my store now!

Thanks!

Posts:
734
September 30, 2007

1) Extract the original checkout.css for reference

2) Make your own checkout.css from scratch and upload it. That one will get appended to the original one. So you don’t need to reiterate everything that’s in the original one – that one is part of the general assets and will remain on the shopify server. You make your own checkout.css just to change the bits you want done differently from the original.

3) If you screw up, delete your checkout.css and start over. Things will just go back to default and your life won’t be ruined. :)

operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
jena Member
Posts:
31
September 30, 2007

Thanks Christina! I love it when my life can’t be ruined by one little file!

Posts:
339
Last edited October 01, 2007

@Christina: You’re very welcome. And thanks for the

#cost img{display:none;}

tip. I was just going to live with the occasional appearance of a yellow panel, but now don’t have to : )

Mike www.anothervision.co.uk
Posts:
62
October 02, 2007

OK…here is my non-techie CSS hack in all of its splendour (no laughing at the back please…)

If only I could get the customer to choose whether they wanted to use PayPal or Google Checkout – now that would be cool…

Rachel.

Css hack thumb
www.babyreflux.co.uk
Posts:
649
October 18, 2007

Oh my, I feel so out of my league.

Don’t get me wrong, this is a great step in the right direction, but oy, I don’t have the time or energy to de-code the css and then change what I want right now.

I have not looked, but any chance there is a wiki of this yet?

John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
Posts:
339
Last edited October 19, 2007

Hi John

As a starter you could try Tobi’s base-level unstyling of the page (as posted above )

Then fiddle with it a bit, for example at the top you might put:

body, #main, #container, #footer {
  background: #FDF5E6;
}
#header{
  background-image:url('banner2.jpg') 0 0 no-repeat #6E2E15;
  height: 225px;
}

...and so on

If you know what the elements are called on your page that you want to emulate (colours/borders and so on) it’s just a case of modifying wherever you need to.

The standard JP css file still loads, but since the custom one loads after it any declarations you redefine are overwritten with your instructions.

Hope that helps
M

Mike www.anothervision.co.uk
Posts:
649
October 19, 2007

lorem ipsum,

THANK YOU. Those were the keys I needed. Have a look. Not flashy, but it now integrates with the rest of the site.

Although, the header I could not get to work. Instead used the #logo tobi had listed.

John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
Posts:
649
October 21, 2007

OK, I have a wrinkle. Has anyone actually checked out the 3rd page of the check out screen? Your confirmation screen? I never even considered that.

The first two pages look just great, but the last page seems to be using the class=”slim” for the header and everything and does not look good.

I have it halfway working, but my Firebug is not fully functional on the computer I am on. Mike (lorem), can you suggest what css changes I need to make to get it centered and all the same width?

John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
Posts:
339
Last edited October 22, 2007

Without going through your checkout process, I’d suggest you need to include the more specific ‘slim’ versions. Possibly including:

#container.slim
#container.slim #header
or
#container.slim #main

If you have developer toolbar installed on FF you can track the ancestors of any element on the page.

You can apply the same css rules in both places like this as a comma separated list:

#container, #container.slim{
  ... your css ...
}
#container #header, #container.slim #header{
   ... your css ...
}

Which is interpreted as:
“apply these rules to the element with the ID ‘container’ AS WELL AS the ID ‘container’ and the class ‘slim’

and then:
apply these rules to the element with the ID ‘header’ as long as it is inside the element with the ID ‘container’ AND ALSO to the element with the ID ‘header’ inside an element with the ID ‘container’ and class ‘slim’.”

The standard CSS must have some more specific ‘slim’ rules, so your css is being overruled (Meashman mentions this earlier in the thread).

Hope that makes sense
Mike

Mike www.anothervision.co.uk
enrique750 Member
Posts:
7
March 21, 2008

does anyone know how to make the product image bigger, on the THANK YOU PAGE?

Chelsea Shopify Merchant www.sleepysheep.ca
Posts:
104
August 20, 2008

further to Lorem Ipsum’s last post, I would suggest that you will also need to start your checkout.css by canceling out the ‘slim’ elements that you wish to edit; here is the beginning of our checkout.css that we have uploaded into our assets:

/* Undo background and gradiant */
body, #main, #container, #header, #footer, #wallet, #products, #overview, #container.slim #header, #container.slim #main, #container.slim #footer{
background:transparent none repeat scroll 0 0;
}

/* Undo overview background and borders */
#main #overview {
border:none;
}

#main #overview > * {
border: none;
}

#main {
border:medium none;
}

I was not able to apply styles to the ‘slim’ elements until I did this.

Chelsea My Shopify Sites ~ http://www.SleepySheep.ca * http://www.SleepySheepBedding.com ~ Sites we have coded (but not designed) http://www.ecocessories.ca http://www.drinktoque.com Other Shopify Integrations ~ http://www.ecocessories.ca * http://www.drinktoque.com *
Posts:
26
November 25, 2008

Hi Everyone,

I have read through this whole forum and I am lost.

Can someone throw up a new code of what Tobi posted way above combined with these “slim” improvements?

Kinds of a summary of what has been learned for css dummies like me?

Thanks so much guys. This posting have been a years work and I’m glad that you all have figured out some sort of way to at least customize the logo and such.

Leah
http://paintlessdesign.com

Posts:
26
November 27, 2008

Oh man, So I have taken Tobi and also tried Christinas code and each time my cart just looks the same no matter how many numbers I fudge with.

Everything is the same but I have my logo at the top which is always cut off length wise (only a slim portion of the middle shows).

I am ok with fiddling with code when I have guidelines but apparently I am in over my head. This seems like it is really simple but I’m missing something.

Can someone figure out why my logo is doing this and give a girl a hand?

Thanks so much!

http://paintlessdesign.com

Posts:
5840
Last edited November 27, 2008

Paintless, first of all congratulation on your website, it looks good :-) Second of all, looks like your forgot to upload your own tailored checkout.css file to your Assets folder. I am not sure what stylesheet you are editing but I can see on the checkout pages that only the global checkout.css stylesheet is used, and not your own at all. That totally explains what you are experiencing of course: whatever rule you are applying just ain’t seen at all. Enough to drive anyone to climb the walls.

PS: I am not seeing your logo at all.

PS2: This thread is about styling the checkout pages.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
26
Last edited November 28, 2008

Thanks for the reply Caroline

Because the logo looked so bad I took off my own checkout.css file and went back to the default one until I figured out why that was happening.

I have tried loading a few different checkout.css files by copying and pasting the couple of codes that were listed here as I would like to at least get my logo on the checkout page but it would also be great to get the background boarder in my teal blue as well. I used the code that tobi first put up and then the longer one that Christina put up but both left my logo looking really bad.

I thought I would ask before loading another checkout.css folder again because i would rather leave the checkout blank then have my logo cut up.

Oh, and sorry, I referred to it as the logo on my cart but I meant the logo on my checkout.

I will upload my checkout.css file with tobi’s code so you can see if I’m crazy or stupid. could be a bit of both :-)

Posts:
5840
Last edited November 28, 2008

It is super easy to help out if you can tolerate the awkwardness of having that chopped logo online for a little while.

Here is what you need, edit line 19 of your checkout.css to…

#logo {
background:transparent url(logo.gif) no-repeat scroll center center;
height:82px;  /* The correction is here */
}

You are only a little crazy in a fun kind of way ;-)

As far as your other wishes, I must step out now, I will look at them later on.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
26
Last edited November 30, 2008

Thanks so much for your quick response.

I replaced the text in the checkout.css as noted above but it is still weird looking.

Darn it!

Update
Ok, so I reduced the pixel size and it seemed to work out. Now I just have to figure out how to change my background color and I’m set for now. I will try a few things out and let you know how it goes.

Thanks for the help everyone!

Posts:
26
December 02, 2008

Hi again,

So I finally found some time and sat down to try and change the color of the outside of my checkout page but can’t seem to get anything adjusted right.

I usually dont have this much trouble with editing the little things on my site but .css is really stumping me.

Does anyone have the snipet of code that I need to inject my choice of color just for the outside of my checkout page? (not the area where there is writing, I want that to just be white but the outside I want the same blue as the rest of my site. http://paintlessdesign.com)

Thanks all!

Posts:
5840
December 02, 2008

You will need to edit line 2 of checkout.css to this:

body, #main, #container, #header, #footer {
background:#66B3BB none repeat scroll 0 0;
}
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
26
December 04, 2008

I changed the checkout.css to the above code but nothing changed.

Posts:
5840
December 05, 2008

Well… sorry. It works for me in Firebug.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
26
December 05, 2008

ok, Thanks for taking the time Caroline

Posts:
26
December 06, 2008

awe, figured it out. Such a silly mistake. In the code you gave me Caroline there had to be a space between the : and the #.

Man I hate code. I give you guys so much credit for having the patience.

Thanks again Caroline for taking the time to help

tlynch Shopify Partner
Posts:
15
December 15, 2008

Any chance that we could also have the ability to include a checkout.js file as well? This would let us use a little DOM Manipulation and add much more flexibility.

tlynch Shopify Partner
Posts:
15
December 18, 2008

Anyone??

I would think JS on the checkout pages would be a good intermediate step. It would let you throw a custom menu on the page or re-arrange the Dom to move things or replace a button with an image.

Posts:
5840
Last edited July 17, 2009

I would think JS on the checkout pages would be a good intermediate step.

Intermediate you say?

I don’t think so. It’s carte blanche! If I was some payment gateway and learned that Shopify allowed shop-owners to run their own JavaScript on pages 1-2 of checkout I would be wary.

You can run your own JavaScript when the transaction is over, that is, on the Thank You page.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
79
August 20, 2009

Hi,

Can someone tell me what part of the shopify checkout.css defines the position of the text “You are browsing our secure server.”

I’d like to position this exactly, using my internal checkout.css – instead of it auto centering on the middle of the page.

Thanks

Gifts for Life’s Celebrations http://www.presentbydesign.com/
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
August 20, 2009

That would be #info-bar span.

HTH!

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
79
August 20, 2009

Perfect!

Gifts for Life’s Celebrations http://www.presentbydesign.com/
TD Member
Posts:
3
January 31, 2010

I'm not real great with .css and am trying to make one small change to the default checkout page.  All I want to do is un-default the "Ship items to the above billing address" button on the checkout page.

Does anyone have any quick tips to do so?

 

Thanks!

Posts:
5840
Last edited January 31, 2010

Hi TD,

All I want to do is un-default the "Ship items to the above billing address" button on the checkout page.

You can't do that CSS. You can't change a form field value with CSS. Even if you are to show the shipping address form on the right (and you can do that with CSS), and hide that checkbox (you can do that too), Shopify will still use the billing address as shipping address because the 'Ship items to the above billing address' checkbox  even if hidden  will still be checked.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
TD Member
Posts:
3
February 03, 2010

Thanks a lot Caroline.  I suppose I'll just have to wait for Shopify to add that field as a configurable value from the admin menu.

Thanks again for your help however.

Posts:
34
Last edited February 07, 2010

Error... Sorry

Posts:
2
February 15, 2010

Is there a way to modify the facebox popup window that contains the Refund policy, Privacy Policy and Terms of service text?  The text is displayed in one single line and this creates a horizontal scrolling bar in the popup window.

 

Its not very attractive.  I have tried to modify this with css, but I have a feeling that its the inline stylesheet thats doing this, which I cant modify from the checkout.css file.

 

Hope someone can help me on this. :-)

Cordially

Vayu

Posts:
5840
Last edited February 15, 2010
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
dockane Shopify Partner
Posts:
200
February 15, 2010

Awesome!  I can't wait to have my designer play around with this.  The Checkout has been driving me crazy as well.  I appreciate the attention to what looks like a decent solution for now!

Doc

Persistence alone is omnipotent. www.thebaker.com www.roscommon.com www.twitter.com/dockane
Posts:
2
February 15, 2010

Thanks a lot Caroline! :-)  That solved it.

Posts:
16
Last edited June 25, 2010

In my extremely limited knowledge of editing code, I was able to customize my checkout.css to a pretty acceptable level, where my checkout page actually looks like the rest of my site!  I'm having one problem though.  I added a couple of things to Tobi's basic css to give myself a matching header and footer graphic, but the header and footer graphics don't span all the way across my page.  I tried to edit the code to repeat but it still stays nicely centered in the middle of my page.

My site: http://shop.teaganandmack.com

/* Insert your own header (upload separately) */
#header {
  height: 170px;
  background: url(header.png) center repeat;
}

/* Insert your own logo (upload separately) */
#logo {
  height: 165px;
  background: url(logo.png) center no-repeat;
}

/* Insert your own footer (upload separately) */
#footer {
  height: 65px;
  background: url(header.png) center repeat;
}
Screen shot 2010 06 24 at 10.23.39 pm thumb
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
June 25, 2010

Hi Lisa! Those header and footer elements have a constrained width because of the #container div. You will need to over ride the container as well if you want them to stretch to 100%. Be aware this will make everything else in the content area hug the left and it will take a good bit more massaging to get this the way I think you are wanting.

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
16
June 25, 2010

Ok!  Thanks Jamie, I'll play around with that.

Posts:
16
Last edited June 25, 2010

Well, this seems to be way beyond my expertise for sure.  I tried to play around with setting the #container div to 100% in my checkout.css but it did nothing, but then again I'm guessing at the code I need so that's not surprising!! I've tried page-width, body-width....like I said, I'm guessing here!

 

#container div p { 
line-width: 100%; 
} 

 

Then I seemed to be able to get half the effect I wanted by specifying a width for my image of 1024px, and that makes the header and footer look exactly how I want it on the right side - there doesn't seem to be a constraint on that side, but the left side is still starting a 1/4 of the page over - I'm sure this is due to what James was talking about above. 

Also, on a separate note I read in this thread that if I use the #cost img{display:none;} code it will get rid of that annoying yellow flash over the price box.  That's not working either.  Here's all of my code in my checkout.css.  Any help or advice would be appreciated!!

http://shop.teaganandmack.com

 

@charset "UTF-8";
/* CSS Document */

#cost img{display:none;}

/* Undo background and gradiant */
body, #main, #container, #header, #footer {
  background: #BFCEE0;
}

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

#container div p { 
body-width: 100%; 
} 

/* Insert your own header (upload separately) */
#header {
  height: 170px;
  width: 1024px;
  background: url(header.png) center repeat;
}

/* Insert your own logo (upload separately) */
#logo {
  height: 165px;
  background: url(logo.png) center no-repeat;
}

/* center the title */
#header > h1{
  text-align:center;
}

/* Insert your own footer (upload separately) */
#footer {
  height: 65px;
  width: 1024px;
  background: url(header.png) center repeat;
}

 

Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
June 25, 2010

Hi Lisa!

This should take care of the rest:

 

/* Undo background and gradiant */
body, #main, #container, #header, #footer {
  background: #BFCEE0;width:1024px;margin:0 auto!important;
}

 

 

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
16
June 26, 2010

Oh!  That's so much better!!  Thanks Jamie.  Really appreciate it.  If I didn't want to lock it in at a certain size due to different screen widths, is there a code which tells it to repeat on and on? 

This works great, so if it's complicated don't worry about it, just thought I'd ask. :)

Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
Last edited June 26, 2010

You're welcome!

To answer your question....Not really, not easily, it would really take stripping out all the css for the checkout and re-building it from the ground up.

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
16
June 26, 2010

Yeah, that makes sense.  Well it looks a million times better now so I'm good!

Posts:
1
July 22, 2010

We're using a custom theme design. So the checkout.css file isn't among the assets or templates. Can I create that? Or is there one I can download and use on our site?

Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
July 22, 2010

You can just make one and upload it to your theme assets and call it in the head with your other stylesheets.

http://shopifyplus.com ::: http://twitter.com/bacchus
Dennis Theisen Shopify
Posts:
49
July 29, 2010

Important:

Shopify now supports .liquid files for any text based assets including the checkout.css, so you can use Liquid code inside that to add more dynamic content. A lot of new themes already use this functionality, so if you want to customize your Checkout please note this:

If you do not find a checkout.css in your theme assets, but a checkout.css.liquid please edit this file instead of uploading your own checkout.css!

Developer
vander Member
Posts:
2
September 22, 2010

Are there any examples or downloads of the standard checkout liquid file?

Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
September 22, 2010

 

Just move through checkout on any Shopify store and view source on page 1 to grab a copy of the Shopify canned CSS file. Edit to your hearts content.

here's the canned version:

 

body {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font: 1em/1.4em "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #000;
  background: #ddd;
}

h1, h2, h3, h4, h5, h6 {
	color: #333;
}

h1 { 
  font-size: 180%;
  color: black;
  margin-bottom: 2px;
}

h2 { 
  font-size: 175%; 
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  padding: 0 0 2px 0;
  color: #aaa;
  text-align: center;
  font-weight: normal;
}

h1 span.subtitle { 
  font-size: 50%; 
  color: #888;
}


h3 { 
  font-size: 110%;
	margin-bottom: 2px;
	margin-top: 5px;
  color: #741C1C;
  }
  
h3.divider {
  border-bottom: 1px solid #999;
}
  
img { border: 0; }


a {
  color: #000;
}

a:hover {
  color: #741C1C;
  text-decoration: underline;
}

#container {
  width: 776px;  
  margin: 20px auto 0px auto;
  text-align: left;
  font-size: 80%;
}

#container.slim {
  width: 430px;  
}

#main {
  width: 776px;  
  background-color: #fff;
  padding: 0 13px;
  background: url('../images/checkout/checkout-bg.gif') bottom left repeat-y;
}

#container.slim #main {
  width: 413px;
  padding: 0 15px;
  background: url('../images/checkout/checkout-bg-slim.gif') bottom left repeat-y;
}

#content {
  padding: 10px;
}

#header {
  width: 792px;
  padding: 8px 5px;
  background: url('../images/checkout/checkout-bg-top.gif') bottom left no-repeat;
}

#container.slim #header {
  width: 430px;  
  background: url('../images/checkout/checkout-bg-top-slim.gif') bottom left no-repeat;
}

#header h1 {
  padding-left: 10px;
}

#info-bar {
  background: #FFFBE5;
  border-bottom: 1px solid #ccc;
  color: #666;
  text-align: center;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 80%;    
  width: 100%;
}

#info-bar * { vertical-align: middle; }

#footer {
  width: 792px;
  padding: 8px 5px;
  margin: 0 auto;
  background: url('../images/checkout/checkout-bg-bottom.gif') top center no-repeat;
  text-align: center;
  color: #888;
  font-size: 80%;
}

#container.slim #footer {
  width: 430px;  
  background: url('../images/checkout/checkout-bg-bottom-slim.gif') top center no-repeat;
}

/*
 *=OVERVIEW
 */

#overview {
  background: #FFFBE5 url('../images/checkout/checkout-overview-bg.gif') top left repeat-x;
  border-bottom: 1px solid #EFEBA5;
  padding: 10px;
  margin: 0;
}

#overview h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  color: #333;
  text-align: left;
}

#overview a {
  color: #c60;
}

#products {
  float: left;
  width: 480px;
  border-right: 1px solid #FED600;
}

#done {
  float: left;
  width: 100%;
}

#wallet {
  margin-left: 481px;
  padding: 5px 10px 10px 10px;
  text-align: center;
  width: 250px;
}

div.wallet-highlight { background: #ffff99 }

#cost, #order-num {
  font: 400% Georgia, Times, "Times New Roman", serif;
  color: #6FB305;
  text-shadow: #fff 2px 2px;
  display: block;
}

#cost {
  margin-bottom: 10px;
}

#order-num {
  font-size: 120%;
}

#success {
  color: #090;
  background: #cfc;
  padding: 5px;
  margin: 20px 0;
  text-align: center;
  border: 1px solid #090;
  font-weight: bold;
}

#steps {
  margin-top: 10px;
  font: 200% Georgia, Times, "Times New Roman", serif;
  font-style: italic;
}

#thumbs {
  margin: 20px 0 0 0;
  padding: 0;
  width: 100%;
}

#thumbs div {
  width: 50px;
  height: 50px;
  padding: 1px;
  margin: 0 4px 0 0;  
  border: 1px solid #FFEB80;
  float: left;
  text-align: center;
}

#thumbs td {
  font-size: 80%;
  padding-bottom: 8px;
  line-height: 140%;
  vertical-align: middle;
  width: 50%;
}

/* overwrite for Thank You page */
.slim #thumbs td {
  width: 25%;
}

#thumbs img {
  background: transparent;
}

#thumbs h3 {
  margin: 0;
  padding: 0;
  font-size: 11px;
}

#thumbs h3 span {
  color: #c96;
  font-size: 90%;
}

#thumbs span {
  color: #c93;
  font-size: 10px;
}

#overview .hint {
  color: #c96;
  font-style: italic;
  font-size: 80%;
}

/*
 *=SELECT CHECKOUT PREF
 */

#payment-type {
  margin: 0;
  padding-top: 10px;
  list-style: none;
  text-align: center;
}

#payment-type li {
  margin: 10px;
  padding: 10px;
  border: 1px solid #fff;
}

#payment-type li:hover {
  border: 1px solid #ccc;

}

li.text-payment {
  margin: 10px !important;
  padding: 0px !important;
}

.center {
  width: 660px;
  margin: 0 auto;
}


/*
 *=EMAIL
 */

#addresses {
  background: #f7f7f7;
  height: auto;
}

#email {
  line-height: 100%;
  background: #f7f7f7;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

#email label {
  display: block;
  margin-bottom: 15px;
  font-size: 130%;
}

#email input {
  font-size: 150%;
}

#shipping-same {
}

#shipping-same label {
  display: block;
  font-size: 100%;
}

.address-notification {
  background: #ffefeb;
  border: 1px solid #f96;
  color: #000;
  text-align: center;
  padding: 5px;
}


/* PAYPAL EXPRESS */

#gateway-logos {
  text-align: center;
  padding: 8px 5px 3px 5px;
  margin: 10px auto 20px auto;
}

#gateway-logos img {
	padding: 5px 10px;
}

/*
 *=PAYMENT/CREDITCARDS
 */

#pay-with {
  text-align: center;
}

#pay-with h3 {
  font-size: 200%;
  color: #000;
  margin: 40px 0 20px 0;
}
 
#payment {
  position: relative;
}

#or {
  font: bold 200% "Lucida Grande", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 46%;
  top: 50%;
  background: #ffefeb;
  color: #000;
  padding: 10px;
  background: #ccc;
  text-align: center;
}

#payment-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

#payment-methods li { 
  padding: 6px;
  margin-bottom: 1px;
}

#payment-methods li * { 
	vertical-align: middle;
}

#payment-methods input {
  margin-right: 5px;
}

#credit-card-valid {
	vertical-align: bottom;
}

img.credit-card {
	margin-left: 3px;
}

.inactive {
	-moz-opacity: 0.25;
	opacity:.25;
	filter: alpha(opacity=25);	
}

/*
 *=ERRORS
 */

.field-with-errors {
  background-color: #FFFBE5;
  border: 1px solid #FED600;
  padding: 3px 5px;
  line-height: 140%;  
}

.field-with-errors input {
  border: 1px solid #B30905;
}

.field-with-errors .error-message {
  color: #B30905;
  font-weight: bold; 
}

.severe-error { 
  margin: 35px 5px;
}

/*
 *=GROUPED BOXES
 */

.gleft {
  float: left;
  width: 49%;
}

.gright {
  margin-left: 49%;
  padding-left: 10px;
  width: 47%;
}


/*
 *=MISC
 */

form {
 padding: 0;
 margin: 0;
}

label {
 font-weight: bold;
 font-size: 100%;
}

input[type=text], textarea {
 border: 1px solid #ccc;
 border-bottom: 1px solid #e7e7e7;
 border-right: 1px solid #e7e7e7;
 padding: 2px; 
}

textarea {
 font-family: Monaco, "Courier New", Courier, monospace;
 font-size: 1.0em;
 overflow: auto;
 width: 100%;
}

input[type="image"] {
 border: none;
}

#buttons {
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
	padding: 10px 10px;
	background: #ddd;
	margin: 0;
}

#buttons input {
 font-weight: bold;   
 padding: 2px 5px;
}


dl, dt, dd {
 border: 0;
 margin: 0;
 padding: 0;
}

dl {
 margin: 5px 0 10px 0;
}

dd {
 margin: 5px 0;
}

dt {
 margin-top: 12px;
 font-weight: bold;
}

dl .hint {
 font-size: 95%;
 color: #888;
 font-weight: normal;
}

dt.top {
 margin-top: 0;
}

.group {
 background: #f7f7f7;
 border: 1px solid #ddd;
 padding: 10px;
 margin: 20px 5px;
}

.pgroup {
 margin-bottom: 20px;
 padding: 5px;
}

.pgroup h3 {
}

.pgroup dl {
 background: #f1f1f1;
 padding: 5px;
}

input.btn {
margin: 0 0 0 8px;
}

textarea.short {
 height: 400px;

}

input.digit-2 {
 width: 25px;
}

textarea.tall {
 height: 700px;

}

.ta-success {
 padding: 5px;
	background: #fff;
	border: 1px solid #eee;
}

.big {
 font-size: 150%;
}

input.long {
 width: 350px;
}

input.short {
 width: 70px;
}

.small {
 font-size: 85%;
}

label.inline {
 font-weight: normal;
 font-size: 100%;
}

.pageform h4 {
 margin-top: 30px;
}

.soft {
 font-weight: normal;
 margin: 10px 0;
}

.soft label { font-weight: normal; font-size: 85%;}
.medium label { font-size: 85%; color: #444;}
.medium p { margin-left: 17px;}

ul.radios li {
 padding: 5px;
 margin: 5px;
}

ul.edit-options {
  list-style: none;
  padding: 10px 10px;
}

ul.cart-items {
  list-style: square;
  padding: 3px 20px;
}

ul.cart-items > li {
  padding: 8px 0;
}


ul.edit-options li label {
  font-weight: normal;
}

fieldset {
 border: 1px solid #ccc;
 padding: 5px;
 padding-left: 10px;
 padding-top: 0;
 margin: 15px 5px;
}

fieldset#switchsolo {
 border: 1px solid #ccc;
 padding: 15px 10px;
 margin: 15px 0px;
 line-height: 1.6em;
}

legend {
 font-size: 90%;
 font-weight: bold;
 padding: 0 5px;
 margin-left: 10px;
}

fieldset p {
 margin: 5px;
}

span.hint a {
  color: #888;
  font-size: 95%;
}

/* Variant form sizing */
td.label { width: 150px; vertical-align: middle; }
td.lprice, td.sprice {width: 70px;}
td.weight { width: 40px; } 
th.trash { width: 20px;}
th.sku {width: 30px;}

/* Bottom tab for more-less textareas */
a.bottab {
 background: #fff;
 border: 1px solid #eee;
 border-top: 0;
 padding: 4px 10px 4px 25px;
}

a.more { background: #fff url(../images/admin/icons/textarea-more.gif) 2% 50% no-repeat;}
a.less { background: #fff url(../images/admin/icons/textarea-less.gif) 2% 50% no-repeat;}



.clearfix:after {
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

form { line-height: normal; padding: 0; margin: 0;}
input { padding: 0; margin: 0;}

.group {
  margin: 20px 0;
}

.group h3, .pgroup h3 {
  color: #000;
  font-size: 130%;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;  
}

.form {
}

.form td {
  padding: 5px;
}

.form ul.inline {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.form ul.inline li {
  display: block;
  float: left;
  margin-right: 15px;
}

.form ul.inline li label {
  display: block;
}

.form tr td {
}

.form td.lbl {
  width: 80px;
}

.form td input {
  width: 230px;
}

.form td input.short {
  width: 160px;
}

.form td textarea {
  width: 230px;
}

table td {
  vertical-align: top;
}

.highlight {
  background: #FFFFDD;
}

 

 

http://shopifyplus.com ::: http://twitter.com/bacchus
vander Member
Posts:
2
September 24, 2010

Hi, thanks for posting this up. I have been able to edit the css already by downloading a copy of what appears as the checkout and going from there. What's above has no liquid code in it - are there any full liquid examples available so to be able to remove certain things? Obviously I don't want to toy with the forms, but just being able to place a logo properly, and remove the name of the shop that is in text which keeps overlapping a logo I have put in there.

Thanks

religiouscollectibles Shopify Partner
Posts:
8
Last edited November 21, 2010

Thanks to this formula, I have ALMOST got my checkout to where I want it.  But I still have problems.  I want to replace the Store name with a logo.  I was able to get rid of the name by putting "none" beside the color in the first h1 but obviously it is just hidden because I can't move "Create Your Order" further to the left.

Also, I am having trouble inserting a logo.  I am useing the formula:

            h1 span.subtitle {display:url(logo4.jpg);position:absolute;top:17px;left:30px;width:700px;height:158px;z-index:400;}

            h2#logo a        {display:url(logo4.jpg);width:100%;height:100%;}

            h1 span.title,

            h2#logo a span    {display:none;}

            h2#logo             {background:url(logo4.jpg) 0 -186px no-repeat;}

            h1 span.subtitle{background:url(logo4.jpg) top left no-repeat;}

            h2#logo a:hover     {background-position:0 -186px;}

However, I really don't know where to enter it.  I have tried several spots but it only messes up what I have done in terms of "background"and the Store presentation.  How do I enter a logo?

The other problem I am having is on Step Two of the checkout, the square around the "Price" is white and I want it the color of my theme.  I have experimented to no ends.

Finally, I am trying to make the "including shipping" a little larger in Step Two.  Can this be done?.

Posts:
13
June 26, 2011

I figured it out

 

#wallet {color:#333333; background: #EEEEEE !important}

 

 

you have to use the !important in your css for it to override the existing background color