Customized Brownie Cart

[knucklehead]

We only use the cart of shopsite; meaning we use order anywhere buttons on static HTML pages.

We are trying to get the Cart pages (SC, Checkout, and Thank You) pages to have the look of the rest of our site.

Right now - it looks awful.

We want it to look like this:

http://tinyurl.com/mo4s8bb

That's a photoshopped image of the brownie theme with modifications that we would like to achieve.

Can someone walk me through this process?

[ShopSite Lauren]

What I would probably suggest would be to create a custom template by using your design for the outside of the template, and the Full/Brownie code for the main body of the template (and the CSS from the full.css for the cart). I haven't tested the code I am going to give you below, but this should give you a good start. Use this example as a guide as well: http://www.shopsite.com/templates/cookbook/tips-notemplatecart.shtml

1. Go to Merchandising > Custom Templates > Shopping Cart > Copy A ShopSite Template, and make a copy of the sc_default template. You can name it whatever you want, such as EU-Cart.sst.

2. In the same area, Merchandising > Custom Template > Shopping Cart > Copy A ShopSite Template, and make a copy of the Full-Cart.sst template.

3. Now you want to mesh the 2 of these templates. In the Full-Cart.sst template, in each section (ie, DEFINE_SHOPPING_CART, DEFINE_SHIPPING, DEFINE_CONFIRMATION, DEFINE_THANK_YOU), you will want to copy everything WITHIN the <article></article> tags, then paste all of that information/code inside the [-- ShoppingCartHeader --] and [-- ShoppingCartFooter --] tags (note, for each section, those tags will be slightly different, for example the next section is [-- ShippingHeader --] and [-- ShippingFooter --].

4. In the code you just copied and just pasted, remove the [-- ShoppingCartHeader --] and [-- ShoppingCart Footer --] tags, so that you don't have duplicates.

5. Next, under Merchandising > Custom Templates > Includes > New Include File, and name it cart.css. The code below SHOULD be all that you need, but I didn't test this, so you might need to make a few tweaks.
cart.css

Code: Select all

form {clear: none;} div.left {text-align: left;} div.right {text-align: right;}
p, div {margin-top: 0px; margin-bottom: 0px;} div {margin-top: 0px; margin-bottom: 0px;} p.center, td.center {text-align: center;}
a {color: #[-- STORE.LinkColor --]; text-decoration: none; outline: 0px;}
a:hover {color: #[-- STORE.VisitedLinkColor --]; text-decoration: underline; outline: 0px;}
img {border: 0px; outline: 0px;} .prodnme img, div#leftimage2 img, div#lefttextb img, div#image2 img, div#textb img, div#imageone img, div#securityimage img, div#paymentlogos img, div#logo-cell img, div#header-center img, div#bodyheaderimg img, div#headerimg img, div#pageimg img, div.item a img, .linkimg img, .prodimg img, div.text img, div.prod_img img, div.wishlist-product-image img, .linkimg img, .linkimgwrap img {width: auto; max-width: 100%;}
.table {display: table;} .table-row {display: table-row;} .table-cell {display: table-cell;}
input[type="text"], input[type=text], input[type="submit"], input[type=submit], input[type="url"], input[type="password"], input[type=password] {outline: 0px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 6px 8px; -webkit-appearance: none; border-radius: 0;}
input[type="text"], input[type=text], input[type="password"], input[type=password], input[type="url"], textarea, select, td.payment_value input {border: 1px solid #[-- STORE.Color1 --]; width: 100%; max-width: 300px; font-family: [-- STORE.Font --];}
select {border-radius: 0; padding: 5px 5px 5px 4px; appearance: menu; -moz-appearance: menu; -webkit-appearance: menu;}
input[type="checkbox"], input[type=checkbox], input[type="radio"], input[type=radio] {appearance: menu; -moz-appearance: menu; -webkit-appearance: menu;}
textarea {font-size: 100%; padding: 5px;}
hr {border: 0; height: 1px; padding: 0px; margin: 14px 0px; background-image: -webkit-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF); background-image: -moz-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF); background-image: -ms-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF); background-image: -o-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF);}
.clear {clear: both;} .nowrap {white-space: nowrap;} .hidden, .hideit, a#homeicon {display: none;} .bold, .Bold {font-weight: bold;} .small, .Small, span#showbasket, td.addr_foot, div#emaillist {font-size: 80%;} .large, .big, .Big {font-size: 120%;} .italic {font-style: italic;}
h1, h3, h5 {margin: 0px; padding: 10px 0px; font-weight: normal;}
h2, h4, h6 {margin: 0px; padding: 10px 0px; font-weight: bold;}
article div.alignCentered {text-align: center;}
article div.alignCentered div#pageimg {float: none; clear: both; width: 100%; text-align: center;}
######### Shopping Cart ###################
div#your-shopping-cart-live, div#your-shopping-cart {width: 49%; float: left; clear: none; border: 1px solid #[-- STORE.Color1 --]; text-align: center;}
div#your-shopping-cart-live h1, div#your-shopping-cart h1, div#shipping-paymenttype h1, div#checkoutscreen h1 {background-color: #[-- STORE.BackgroundColor --]; opacity: 0.9; filter: opacity(90); font-size: 120%; border-bottom: 1px solid #[-- STORE.Color1 --]; margin: 0px; padding: 20px 5%; text-align: left; color: #[-- STORE.TextColor --];}
div#total-coupcert {margin: 0px; border-top: 1px solid #[-- STORE.Color1 --]; padding: 20px 5%; text-align: right;}
input.button6, input.button68 {float: left; clear: none;}
div#total-coupcert input.button7 {margin-top: 10px;}
span#coupon {display: block; font-size: 90%; text-align: right;}
span#coupon input[type="text"] {max-width: 60px;}
span#giftcert {display: block; font-size: 90%; text-align: right;}
span#giftcert input[type="text"] {max-width: 100px; clear: right;}
span#giftcert input[type="text"]:nth-child(2) {max-width: 40px;}
.padtop {padding-top: 20px;}
table.cart {width: 90%; margin: 20px 5%; padding: 0px; border-collapse: collapse; border-spacing: 0px; clear: both;}
table.cart td {background: #[-- STORE.SC_ShadeColor --]; width: 1%; padding: 3px 8px; text-align: right; font-size: 90%;}
table.cart .cart_empty {padding: 16px 0px; text-align: center; font-size: 120%;}
table.cart th {font-size: 84%; font-weight: normal; padding: 5px 5px 3px 5px;}
table.cart .cart_image {vertical-align: middle; text-align: center;}
table.cart .cart_name {text-align: left; width: 90%;}
table.cart .cart_price, table.cart .cart_total {text-align: right;}
table.cart .cart_image, table.cart .cart_quantity, table.cart .cart_delete {text-align: center;}
table.cart .cart_quantity input {max-width: 20px;}
.cart td.cart_image, .cart td.cart_name, .cart td.cart_delete, .cart td.cart_sku, .cart td.cart_price, .cart td.cart_total, .cart td.cart_quantity {border-top: 1px solid #FFFFFF;}
table.cart td.cart_op, table.cart td.opt_cart {text-align: left; font-size: 90%;} table.cart textarea {max-width: 200px;} table.table.cart table.opt_cart, table.cart td.opt_cart {padding: 0px; margin: 0px;}
td.totals_saved_txt, td.totals_saved {font-size: 110%; font-weight: bold; color: green;}
table.totals {margin: 0px 2% 0px auto;}
div#checkoutscreen div#totals {display: none; padding: 16px 0px; margin: 0px auto; clear: both; text-align: center;}
div#checkoutscreen div#totals table {margin: 0px auto;}
div#checkoutscreen div#totals table.totals td.totals, div#checkoutscreen table.totals td.totals_txt {display: none;}
div#your-shopping-cart table.cart .cart_sku, div#your-shopping-cart table.cart .cart_price, div#your-shopping-cart table.cart td.cart_op2 {display: none;}
span#coupcertlink {color: #[-- STORE.LinkColor --]; font-size: 90%; display: block; padding: 14px 0px; cursor: pointer;}
span#vieworderlink {display: none; color: #[-- STORE.LinkColor --]; font-size: 90%; padding: 14px 0px; cursor: pointer;}
span#commentslink table {margin: 0px 5%; width: 90%;}
span#commentslink table td {color: #[-- STORE.LinkColor --]; font-size: 90%; padding: 14px 0px; cursor: pointer; text-align: right;}
span#coupcertlink:hover, span#commentslink:hover, span#vieworderlink:hover {color: #[-- STORE.VisitedLinkColor --]; text-decoration: underline;}
span#commentslink table td.comm {display: none;}
table.totals td {padding-top: 3px; padding-bottom: 3px; font-size: 90%; text-align: right;}
table.totals tr td:first-child {padding-right: 15px;}
table.totals td.totals_all_txt, table.totals td.totals_all {font-size: 140%;}
div#orderinginstructions table.instruct {width: 90%; margin: 0px 5%; border-collapse: collapse; border-spacing: 0px;}
div#orderinginstructions table.instruct td {padding: 0px; text-align: left; font-size: 90%; font-weight: bold;}
div#orderinginstructions textarea.instruct {width: 100%; min-width: 100%; margin: 0px 0px 20px 0px;}
div#second-cart-side {width: 49%; float: right; clear: none; padding: 0px;}
div#second-cart-side h5 {background-color: #[-- STORE.TextColor --]; opacity: 0.9; filter: opacity(90); font-size: 120%; margin: 10px 0px 0px 0px; padding: 20px 5%; text-align: left; color: #FFFFFF;}
div#second-cart-side h5.pastsection {margin: 0px 0px 10px 0px;}
div#shipping-paymenttype {border: 1px solid #[-- STORE.Color1 --];}
div#shipoptions {font-size: 90%; border-bottom: 1px solid #[-- STORE.Color1 --]; padding: 20px 5% 50px 5%; text-align: left;}
div#shipoptions td {font-size: 100%;}
div#shipoptions input.button7 {float: right; clear: none;}
div#select-payment {font-size: 90%; padding: 40px 5%; text-align: left;}
div#select-payment input.button8[type="submit"] {width: 100%; max-width: 300px; margin: 20px auto 10px auto; line-height: 30px; height: 32px;}
span#ss_payment, span#showbasket {display: block; text-align: center;}
div#checkoutscreen {border: 1px solid #[-- STORE.Color1 --];}
div#checkoutscreen div.custom1, div#checkoutscreen div.custom2, div#checkoutscreen div.custom3, div#checkoutscreen div.custom4, div#checkoutscreen div.custom5 {padding: 10px 5%;}
table.sql_addr {margin: 20px 0px 10px 25px;}
table.sql_addr td {display: table-row;}
.cr table.addr_name {width: 50px;}
td.addr_foot {padding-bottom: 30px;}
table.sql_addr td.sql_addr_select input {position: relative; top: 25px; left: -25px;}
table.pay_holder {margin: 10px auto; padding: 0px;}
table.pay_holder td {text-align: left;}
td.ship_check, span.email_list {font-size: 90%; line-height: 40px;}
div#comments {padding: 0px 5% 10px 5%; margin: 0px; clear: both; text-align: center; font-size: 90%;} div#comments table.comm {margin: 0px auto; width: 100%;}
div#comments table td.comm_hdr {display: none;}
div#comments textarea {width: 100%; min-width: 100%; margin: 0px 0px 20px 0px;}
div#checkoutscreen table.comm {margin: 20px auto; padding: 0px;}
span.showbasket {display: block; text-align: center; font-size: 90%; line-height: 40px;}
.shipping-screen div#commentsarea {max-width: 100%; overflow: hidden;}
table.addr, table.payment {width: 90%; margin: 0px 5%; padding: 0px; border-collapse: collapse; border-spacing: 0px;}
table.bill_addr, table.ship_addr {border-collapse: collapse; border-spacing: 0px; width: 100%; margin: 10px 0px 0px 0px;}
table.bill_addr td.bill_addr_hdr, table.ship_addr td.ship_addr_hdr, table.payment td.payment_hdr {font-size: 100%; text-align: left; font-weight: bold;}
table.payment td.payment {width: 30%; padding-left: 10px; white-space: nowrap; font-size: 100%;}
table.payment td.payment_value select#selPaytype {max-width: 200px;}
table.payment td.payment_value select.payment {max-width: 90px;}
div#secureimage {margin: 0px; padding: 20px 0px; text-align: center;}
div#secureimage table {margin: 0px auto; padding: 0px;}
table.bill_addr td.addr, table.ship_addr td.addr, table.payment td.payment {width: 30%; padding: 3px 5px 3px 0px; font-size: 90%; white-space: nowrap; text-align: right; font-size: 90%;}
table.bill_addr td.addr_val input, table.ship_addr td.addr_val input, table.payment td.payment_value input, table.bill_addr td.addr_val select, table.ship_addr td.addr_val select, table.payment_value td.payment select {width: 90%;}
table.bill_addr td.addr_val, table.ship_addr td.addr_val, table.payment td.payment_value {padding: 3px 0px; text-indent: 5px; width: 70%; font-size: 90%; text-align: left;}
div#checkoutscreen input.button67[type="submit"] {width: 100%; max-width: 300px; margin: 20px auto 10px auto; line-height: 30px; height: 32px;}
body div.thankyoupage table.payment td.payment_hdr {padding-top: 10px;}
table.ship_logos {margin: 0px; float: left;}
table.ship_logos td.ship_img {text-align: center; vertical-align: middle; width: 25%;}
table.ship_logos td {font-size: 80%; width: 200px; vertical-align: top;}
######### Error Messages ##################
table.checkout_err, table.ups_error, table.inv_err {margin: 10px auto; padding: 0px; border-collapse: collapse; border: 14px solid #[-- STORE.FieldWarnShadeColor --]; border-spacing: 0px; background: #[-- STORE.FieldWarnShadeColor --];}
table.checkout_err td, table.ups_error td, table.inv_err td {vertical-align: middle; text-align: left; padding: 0px; background: #[-- STORE.FieldWarnShadeColor --]; border: 0px; color: #[-- STORE.FieldWarnHighlightColor --];}
table.checkout_err img, table.ups_error img, table.inv_err img {display: none;}
.notice {display: block; width: 80%; text-align: center; padding: 20px 0px; margin: 0px auto; border: 14px solid #[-- STORE.FieldWarnShadeColor --]; background: #[-- STORE.FieldWarnShadeColor --]; color: #[-- STORE.FieldWarnHighlightColor --];}
span.field_warn {color: red; font-weight: bold;} input.field_warn, select.field_warn {border: 1px solid #[-- STORE.FieldWarnHighlightColor --]; background: #[-- STORE.FieldWarnShadeColor --];}
######### Full Width Submit Buttons #######
input[type="submit"].button166, input[type="submit"].button8, input[type="submit"].button162 {display: block; text-align: center; min-width: 150px; width: 90%; max-width: 220px; margin: 10px auto; color: #FFFFFF; font-size: 110%;}
######### Full Width non-Submit Buttons ###
input[type="submit"].button168, input[type="submit"].button169, input[type="submit"].button170, input[type="submit"].button171, input[type="submit"].button172, input[type="submit"].button524 {display: block; text-align: center; width: 90%; max-width: 220px; margin: 10px auto; color: #FFFFFF; font-size: 110%;}
td.view_edit a {display: block; text-align: center; width: 90%; max-width: 220px; margin: 10px auto; color: #FFFFFF; font-size: 110%; padding: 0px;}
######### Small Buttons ###################
input[type="submit"].button164, input[type="submit"].button165, input[type="submit"].button173, input[type="submit"].button185, input[type="submit"].button186, input[type="submit"].button187, input[type="submit"].button188, input[type="submit"].button189, input[type="submit"].button473 {display: inline-block; text-align: center; width: 60px; max-width: 60px; margin: 5px auto; color: #FFFFFF;}
######### Other Buttons ###################
input[type="submit"], input.button183, input.button184 {display: inline-block; text-align: center; max-width: 150px; margin: 5px auto; color: #FFFFFF;}
######### Links To Look Like Buttons ######
body a.printbutton, body .buttonlookalike a {display: inline-block; text-align: center; margin: 5px auto; color: #FFFFFF; font-size: 90%; line-height: 28px; padding: 0px 10px 0px 10px;}
span.ss_wl_Label:hover, a.printbutton:hover, .buttonlookalike a:hover {text-decoration: none;}
body span.ss_wl_Label {display: inline-block; text-align: center; margin: 0px auto; color: #FFFFFF; font-size: 86%; padding: 0px 10px; width: 90px; letter-spacing: 0.4px; position: relative; top: -1px; line-height: 28px;}
######### Plain Text Buttons ##############
.basic-text-link a, .basic-text-link-small a {font-weight: bold; font-size: 90%; color: #[-- STORE.VisitedLinkColor --];}
.basic-text-link-small a {font-size: 90%; font-weight: normal;}
######### UnUsed Text Buttons #############
.unused-text-button {display: block; text-align: right; clear: both; padding: 60px 20px 10px 0px;}
.unused-text-button a, .unused-text-button input, .unused-text-button input.button9 {border: 0px; background: transparent; font-size: 80%; text-decoration: underline; font-weight: bold; color: #[-- STORE.LinkColor --];}
######### Global Button Settings ##########
span.ss_wl_Label::-moz-focus-inner, input[type="submit"].button166::-moz-focus-inner, input[type="submit"].button8::-moz-focus-inner, input[type="submit"].button162::-moz-focus-inner, input[type="submit"].button168::-moz-focus-inner, input[type="submit"].button169::-moz-focus-inner, input[type="submit"].button170::-moz-focus-inner, input[type="submit"].button171::-moz-focus-inner, input[type="submit"].button172::-moz-focus-inner, input[type="submit"].button524::-moz-focus-inner, td.view_edit a::-moz-focus-inner, input[type="submit"].button164::-moz-focus-inner, input[type="submit"].button165::-moz-focus-inner, input[type="submit"].button173::-moz-focus-inner, input[type="submit"].button185::-moz-focus-inner, input[type="submit"].button186::-moz-focus-inner, input[type="submit"].button187::-moz-focus-inner, input[type="submit"].button188::-moz-focus-inner, input[type="submit"].button189::-moz-focus-inner, input[type="submit"].button473::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input.button183::-moz-focus-inner, input.button184::-moz-focus-inner, a.printbutton::-moz-focus-inner, .buttonlookalike a::-moz-focus-inner {border-width: 1px 0; border-style: solid none; border-color: transparent; padding: 0;}
span.ss_wl_Label, input[type="submit"].button166, input[type="submit"].button8, input[type="submit"].button162, input[type="submit"].button168, input[type="submit"].button169, input[type="submit"].button170, input[type="submit"].button171, input[type="submit"].button172, input[type="submit"].button524, td.view_edit a, input[type="submit"].button164, input[type="submit"].button165, input[type="submit"].button173, input[type="submit"].button185, input[type="submit"].button186, input[type="submit"].button187, input[type="submit"].button188, input[type="submit"].button189, input[type="submit"].button473, input[type="submit"], input.button183, input.button184, a.printbutton, .buttonlookalike a {cursor: pointer; padding: 0px 10px 2px; line-height: 24px; height: 26px; background: #[-- STORE.VisitedLinkColor --]; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 0px;}

div#article {margin-top: 20px; padding: 20px; background: #FFFFFF; box-shadow: 1px 1px 10px #111111; -moz-box-shadow: 1px 1px 10px #111111; -webkit-box-shadow: 1px 1px 10px #111111;}
div#your-shopping-cart-live h1, div#your-shopping-cart h1, div#shipping-paymenttype h1, div#checkoutscreen h1 {background: #[-- STORE.SC_ShadeColor --];}
table.ship_logos {margin: 30px auto 0px auto; float: none;}

6. Last, in all sections in your EU-Cart.sst template file, before the </head> paste the following tags.
<style type="text/css">[-- INCLUDE cart.css PROCESS --]</style>


That should get you a good start, but you will likely need to make a few tweaks to the code once you get it to this point.