One page checkout now supports custom CSS

Follow

Comments

10 comments

  • Avatar
    csbsewsdollclothes

    Tomas, I want to be sure I understand what we need to do.  I have a template I purchased through Highwire, designed by DesignMyCart.  I have a checkout CSS file.   If I add the following to my Checkout CSS file (at the top) /* Checkout Version: 2.0 | DO NOT REMOVE */, I will have a one-page checkout page that looks like the rest of my site.

    Please confirm.

     

  • Avatar
    csbsewsdollclothes

    Well, obviously that didn't work.   Can you please give step-by-step instructions as to how I can change my custom css (http://d2ah7fc8nhyh86.cloudfront.net/41002/theme_assets/checkout.css) file so that it reflects the css for my site, and not the generic checkout.  Or, let me know if it is really, really involved.  

  • Avatar
    Tomas

    Any custom CSS with the prior version will not work with the new one page checkout. The two are not compatible and do not share the same ID's or classes. You will need to use a modified version of the CSS provided above.

  • Avatar
    csbsewsdollclothes

    Ok, so the bottom line is I either pay someone to modify my current CSS or I cannot take advantage of the upgrade to the one page checkout.   It is too bad you couldn't highlight the areas of the above referenced CSS that need to be added to my CSS file or highlight the areas of my CSS file that need to be changed.

    I have had some knowledge of HTML and have been able to successfully tweak and modify my template, but I do not have the knowledge (as I am sure many here don't) to take on the css for my checkout file.   That is the one page I don't want to mess with.   

    Oh well, I now understand that my options are (1) leave my site with the one-page generic checkout; (2) go back to the multi-page checkout, or (3) pay someone to upgrade my css.  I'm sure I'm not the only one faced with this choice.   I'm sure I'll choose to just leave it generic.

     

  • Avatar
    Tomas

    We will soon be eliminating the 2 page checkout entirely. We will have an announcement with an official date. If you don't have a custom design by the cut off, we'll just use the standard design.

  • Avatar
    bisidesigns

    Thanks Tomas! I am sure this will be a great asset to stores!

    ♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥~*~♥

    Jennifer
    Bisi Designs - Professional Website Design
    www.bisidesigns.com

  • Avatar
    girlshorseclothes

    That would be nice, Caroline ... perhaps an image of the 1-page css with arrows and stuff using 'english' to show where various pieces are, to make it easier to find where to change things.

    I dont think you have to worry about messing up the WORKING of the checkout--- css files only include the STYLE information.    We cannot get at the actual HTML that is creating the form, etc.

    I cannot follow the css all that well, but I see a few spots that seem to be where you would want to change the colors to match the rest of your store....  probably back-ground color under body, and color under body (which I think will be the text color)

    Much farther down is "checkout content" which also calls for a background color.

    I realize this may well be nothing at all close to what you currently have set up, but, it's a step towards it.

  • Avatar
    girlshorseclothes

    BETTER would be an interface where we could just enter the HTML number of the background color desired, form color desired, and text color desired.      I see that lots of places, such as Blogspot, for example.

  • Avatar
    girlshorseclothes

    Oops, background color number or url of an image to repeat the full legnth and width of the page.

  • Avatar
    Holly Pawlowski

    Can't seem to get this to work. Can anyone else?

    I started my checkout.css file with /* Checkout Version: 2.0 | DO NOT REMOVE */ as instructed, but this file is not being loaded by the browser. Firebug shows that  <link href="/assets/checkout_css.ashx?s=2183&version=2"> is being loaded, but no sign of the file with my custom styling.

Please sign in to leave a comment.

Powered by Zendesk