Design

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.

Thanks Tobi.

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

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.

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.”

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.

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.

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.

Bump… hoping Cliff sees this.

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.

Fantastic Cliff! Thank you very much!

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

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…

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.

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.

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?

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, 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?

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

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

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.

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!

+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

That would get my vote as well.

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!!

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.

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.

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?

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

grand job – now works a treat

Many Thanks

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?

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

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.

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.

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

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!

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.

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

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

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;
}

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; }

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

So it’s not that bad.

...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

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.

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.

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!

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; }

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

Glad I could be of help!

Hmmm, maybe:

#tax_span.hint

#wallet #tax_span.hint

That worked! The first one:

#tax_span.hint

Thank you!

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!

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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;}

Thanks Christina!

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

@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

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.

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

: |

IE drives me nuts period!

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

@ 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.

(...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">

Then see the original css:

and you see this:

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

otherwise it won’t override.

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

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.

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…

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?

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:

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!

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. :)

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

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

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

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.

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?

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

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.

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?

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

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

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.

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

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

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.

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 :-)

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.

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!

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!

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

body, #main, #container, #header, #footer {
background:#66B3BB none repeat scroll 0 0;
}

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

Well… sorry. It works for me in Firebug.

ok, Thanks for taking the time Caroline

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

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.

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.

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.

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

That would be #info-bar span.

HTH!

Perfect!

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!

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.

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.

Error... Sorry

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

Hi Vayu,

Answer is here: http://forums.shopify.com/categories/1/posts/29121#comment-29260

~ Caroline

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

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