Remember just recently – a while back we shared with you some interesting tricks of how to customize your gallery preview, checkout, cart, and offers pages in one of MyTemplateStorage blog posts? Then we thought it would be useful for you not just to know but see on an example how it can really be implemented in practice – for a real online store probably similar to yours where you are selling templates. So we’ve chosen of the templates from TemplateMonster’s collection (25506) for a sample store on brilliantwebdesigns.com and fully customized the visual presentation of its preview, checkout, cart, and offers pages like described in the recent tutorial.
Just to get back to the idea about the way it’s done via creation an external css file for this kind of customization – after you’ve created, customized the css file for your store, and placed it in your store route folder you then enter the route to this file on your account in Presets=>Preset settings=>Other Settings=>“Specify an URI of your CSS file for the preset (optional)” so that the new styles replace the major styles on MyTemplateStorage.com.
Now, what you’ve done is what you get – the new styles will be working for your store instead of the similar-looking ones you had before – just view how amazingly # 25506 template we’ve taken as groundwork for brilliantwebdesigns.com has changed. Here’s what the previews, checkout, cart, and offered pages looked before:
default_preview.jpg:
default_shopping_cart.jpg:
default_special_offers.jpg:
default_checkout.jpg:
And this is not #25506 template style indeed, is it? This is because of the major css styles for these pages (they can be seen in the default pages source code as “link rel=”stylesheet” href=”/css/preset/neutral/basic.css” etc.).
Once we’ve added the custom css file to “Specify an URI of your CSS file for the preset (optional)” there will appear an additional link in the custom pages style sheet – “link rel=”stylesheet” type=”text/css” href=”http://www.brilliantwebdesigns.com/css/custom_css.css” that will cover the basic template styles.
Have a look at the custom css code for the external file in the screens below – it begins with global styles for all the pages; the code area is divided by comments for each page specifying the major functional blocks. What is also important is that in the code the images are routed not via http, but simply as #preview_page, #cart_page, #offer_page, #payment_page {background:url(http://www.brilliantwebdesigns.com/images/tail.gif) repeat-x 0 0;color:#7c7c7c}:
So this code is what makes the preview, checkout, shopping cart, and special offers pages have an entirely different look and feel fitting the store style:
Now it may be worth specifying the particular classes implemented in the custom css for each page separately.
For convenience in the following screens we’ve circled out and numbered the pages blocks for which the new classes have been implemented and below the screens are the classes implemented for each block separately.
Coming first is the preview page (as having links to all other pages we’ve customized):
*numbers in the screen stand for classes:
1). #preview_page, #cart_page, #offer_page, #payment_page
2) .buy_customize_area {}
3) a.buy_buttons {}
4) .templ_type_container {}
.sub_title {}
5) .preview_area b {}
6) .screenshot {}
7) .shots_container {}
.shots_container b {}
8 ) iframe.body {}
9) img.screenshot {}
10) .info_container {}
11) .templateinfo_area {}
12) .templ_info_container {}
13) .templ_info_container b {}
.templ_info_container strong {}
14) div.price_area {}
.price_area .price_text {}
.price_area .price_sum {}
15) .buy_cart_area
16) div.info_container div.buy_cart_area td
div.info_container div.buy_cart_area a
17) .optional_area {}
18) .optional_area a {}
On clicking on the “Add to Shopping Cart” and “Shopping Cart” links on top and below the pricing we are taken to the shopping cart page that now looks like this:
*numbers in the screen stand for classes:
1). #preview_page, #cart_page, #offer_page, #payment_page
2) .cart_list th
.action_column
3) .item_column {}
4) .required_column {}
5) .price_column {}
6) .sources_column {}
7) .cart_list td a {}
8 ) .cart_list td table td {}
9) #order_total_container {}
10) #order_total_container span {}
11) #cart_buttons_container
12) #btn_empty {}
#btn_refresh {}
#btn_continue {}
#btn_checkout {}
a.buy_buttons {}
Here’s the new look for the special offers page due to the classes below its image:
*numbers in the screen stand for classes:
1). #preview_page, #cart_page, #offer_page, #payment_page
2) .sub_title {}
3) #cart_buttons_container {}
4) .cart_list {}
5) .cart_list td {}
6) .cart_list td img {}
7) .cart_list td h3 {}
8 ) .cart_list strong {}
9) .cart_list td del {}
10) .cart_list td ins {}
The “Buy the template” links on the preview will open the customized checkout page:
*numbers in the screen stand for classes:
1). #preview_page, #cart_page, #offer_page, #payment_page
2) #left_bar {}
3) input.search {}
4) select {}
5) select {}
6) #right_bar {}
7) input.search {}
8 ) .cards
#rbsworldpay
#googlecheckout1
#paypal
#wire
#robox
9) cart_list {}
10) .next {}
So – this is it (but quite enough for these three pages), and we do hope the sample on brilliantwebdesigns.com we’ve shown will really be helpful in customizing the pages if you were willing to do that but just did not know how to. Why keep pages in the store different from the store and your website – just spend some time on playing about with the code (for your gallery css code you will of course need to use your own website styles) and get the result – all the pages looking exactly the same way as your whole store.
MyTemplateStorage.com Team
