Changing the full checkout look?

jblaine — Fri, 04 May 2007 22:07:33 +0000

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?

tobi commented

tobi — Sat, 05 May 2007 02:51:01 +0000

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.

jblaine commented

jblaine — Sat, 05 May 2007 03:12:51 +0000

Thanks Tobi.

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

Shpigford commented

Shpigford — Sat, 05 May 2007 03:33:41 +0000

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.

jblaine commented

jblaine — Sat, 05 May 2007 12:37:48 +0000

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

meashman commented

meashman — Sat, 05 May 2007 14:09:18 +0000

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.

Cliff commented

Cliff — Sat, 05 May 2007 20:16:44 +0000

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.â€?

Yeah, I wouldn’t word anything quite like that. It would shine a stronger light on your limitations as a merchant versus Shopify’s, and would probably make things worse.

Something as simple as ”Click the button below to continue to our quick and secure checkout process.” may help ease the visual disconnect; a user might suddenly expect something a bit different, without you spelling it out for them.

I do agree that this visual disconnection between the store and checkout is a serious issue. Users generally expect known payment options like PayPal and Google Checkout to look completely different, but that’s about it.

The ability to include the checkout into the store flow can’t come soon enough, though it’s good to hear that it will be available someday.

Tyler commented

Tyler — Fri, 25 May 2007 06:54:29 +0000

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 commented

Tyler — Tue, 29 May 2007 21:30:33 +0000

Bump… hoping Cliff sees this.

Cliff commented

Cliff — Tue, 29 May 2007 22:26:24 +0000

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.

Tyler commented

Tyler — Tue, 29 May 2007 23:12:04 +0000

Fantastic Cliff! Thank you very much!

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

BBG commented

BBG — Tue, 19 Jun 2007 01:45:46 +0000

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…

Cliff commented

Cliff — Tue, 19 Jun 2007 06:10:58 +0000

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.

BBG commented

BBG — Tue, 19 Jun 2007 12:44:26 +0000

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.

Chris Fullman commented

Chris Fullman — Fri, 27 Jul 2007 15:26:11 +0000

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?

cody commented

cody — Sat, 28 Jul 2007 01:28:25 +0000

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.

Chris Fullman commented

Chris Fullman — Tue, 21 Aug 2007 14:59:02 +0000

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 commented

Johannes — Mon, 27 Aug 2007 17:22:25 +0000

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 commented

lis — Tue, 28 Aug 2007 17:10:02 +0000

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 commented

philoye — Fri, 31 Aug 2007 01:25:05 +0000

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 commented

jena — Mon, 10 Sep 2007 15:02:55 +0000

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!

lorem ipsum commented

lorem ipsum — Mon, 10 Sep 2007 16:28:48 +0000

+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

Matt Beck commented

Matt Beck — Mon, 10 Sep 2007 16:53:15 +0000

That would get my vote as well.

Housh commented

Housh — Tue, 11 Sep 2007 06:15:11 +0000

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

tobi commented

tobi — Tue, 11 Sep 2007 17:31:56 +0000

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.

meashman commented

meashman — Wed, 12 Sep 2007 01:01:02 +0000

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.

iammikec commented

iammikec — Wed, 12 Sep 2007 11:55:14 +0000

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?

tobi commented

tobi — Wed, 12 Sep 2007 18:32:04 +0000

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

iammikec commented

iammikec — Wed, 12 Sep 2007 21:29:40 +0000

grand job – now works a treat

Many Thanks

rob. commented

rob. — Wed, 12 Sep 2007 22:29:22 +0000

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?

tobi commented

tobi — Thu, 13 Sep 2007 03:56:21 +0000

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

Matt Beck commented

Matt Beck — Thu, 13 Sep 2007 16:34:05 +0000

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.

tobi commented

tobi — Thu, 13 Sep 2007 20:52:06 +0000

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.

lorem ipsum commented

lorem ipsum — Thu, 13 Sep 2007 20:55:11 +0000

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?

meashman commented

meashman — Fri, 14 Sep 2007 02:45:28 +0000

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!

tobi commented

tobi — Fri, 14 Sep 2007 03:09:27 +0000

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.

meashman commented

meashman — Fri, 14 Sep 2007 03:30:40 +0000

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

lorem ipsum commented

lorem ipsum — Fri, 14 Sep 2007 08:08:32 +0000

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.

daniel commented

daniel — Fri, 14 Sep 2007 16:29:25 +0000

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

meashman commented

meashman — Fri, 14 Sep 2007 16:39:01 +0000

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

daniel commented

daniel — Fri, 14 Sep 2007 20:31:38 +0000

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.

lorem ipsum commented

lorem ipsum — Sat, 15 Sep 2007 08:54:17 +0000

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

Julene commented

Julene — Tue, 18 Sep 2007 03:44:32 +0000

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.

meashman commented

meashman — Tue, 18 Sep 2007 03:52:50 +0000

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

#header h1 { display: none; }

etc.

lis commented

lis — Wed, 19 Sep 2007 00:13:42 +0000

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!

meashman commented

meashman — Wed, 19 Sep 2007 00:48:02 +0000

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

lis commented

lis — Wed, 19 Sep 2007 01:40:35 +0000

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

meashman commented

meashman — Wed, 19 Sep 2007 03:21:55 +0000

Glad I could be of help!

Hmmm, maybe:

#tax_span.hint or #wallet #tax_span.hint

lis commented

lis — Wed, 19 Sep 2007 13:23:07 +0000

That worked! The first one:

#tax_span.hint

Thank you!

jena commented

jena — Fri, 21 Sep 2007 12:59:50 +0000

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!

Rachel commented

Rachel — Fri, 21 Sep 2007 16:06:21 +0000

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.

rob. commented

rob. — Fri, 21 Sep 2007 17:29:34 +0000

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.

meashman commented

meashman — Fri, 21 Sep 2007 18:29:53 +0000

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.

lis commented

lis — Fri, 21 Sep 2007 21:04:54 +0000

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

jena commented

jena — Sun, 23 Sep 2007 03:29:11 +0000

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.

Rachel commented

Rachel — Tue, 25 Sep 2007 15:15:11 +0000

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.

rob. commented

rob. — Tue, 25 Sep 2007 17:16:52 +0000

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.

lorem ipsum commented

lorem ipsum — Thu, 27 Sep 2007 14:38:10 +0000

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

Christina commented

Christina — Thu, 27 Sep 2007 23:53:08 +0000

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.

Christina commented

Christina — Thu, 27 Sep 2007 23:56:49 +0000

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.

Christina commented

Christina — Fri, 28 Sep 2007 00:14:27 +0000

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

jena commented

jena — Fri, 28 Sep 2007 01:11:00 +0000

Thanks Christina!

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

lorem ipsum commented

lorem ipsum — Fri, 28 Sep 2007 12:36:06 +0000

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

Christina commented

Christina — Fri, 28 Sep 2007 14:42:01 +0000

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.

lorem ipsum commented

lorem ipsum — Fri, 28 Sep 2007 15:37:07 +0000

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

: |

meashman commented

meashman — Fri, 28 Sep 2007 19:12:33 +0000

IE drives me nuts period!

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

Christina commented

Christina — Sat, 29 Sep 2007 21:26:48 +0000

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

Christina commented

Christina — Sat, 29 Sep 2007 21:29:14 +0000

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

Christina commented

Christina — Sat, 29 Sep 2007 21:31:12 +0000

Then see the original css:

Christina commented

Christina — Sat, 29 Sep 2007 21:31:46 +0000

and you see this:

Christina commented

Christina — Sat, 29 Sep 2007 21:34:07 +0000

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.

Christina commented

Christina — Sat, 29 Sep 2007 21:36:51 +0000

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

Christina commented

Christina — Sat, 29 Sep 2007 21:46:40 +0000

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.

Christina commented

Christina — Sat, 29 Sep 2007 22:09:42 +0000

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…

Christina commented

Christina — Sat, 29 Sep 2007 22:30:52 +0000

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?

Christina commented

Christina — Sat, 29 Sep 2007 22:52:29 +0000

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:

jena commented

jena — Sun, 30 Sep 2007 15:51:16 +0000

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!

Christina commented

Christina — Sun, 30 Sep 2007 16:53:08 +0000

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

jena commented

jena — Sun, 30 Sep 2007 16:56:39 +0000

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

lorem ipsum commented

lorem ipsum — Mon, 01 Oct 2007 08:47:18 +0000

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

Rachel commented

Rachel — Tue, 02 Oct 2007 08:54:29 +0000

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.

Alchemist John commented

Alchemist John — Thu, 18 Oct 2007 23:25:27 +0000

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?

lorem ipsum commented

lorem ipsum — Fri, 19 Oct 2007 20:28:37 +0000

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

Alchemist John commented

Alchemist John — Fri, 19 Oct 2007 23:03:20 +0000

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.

Alchemist John commented

Alchemist John — Sun, 21 Oct 2007 17:30:40 +0000

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?

lorem ipsum commented

lorem ipsum — Mon, 22 Oct 2007 10:48:59 +0000

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

enrique750 commented

enrique750 — Fri, 21 Mar 2008 23:37:21 +0000

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