When you start a Yahoo Merchant Solutions online store the cart will not match the store, unlike most other shopping cart systems the template will not pass through. this is not a flaw with the yahoo cart but a way to make it more secure and safe for you and your customer but at the same time you will not have the same look and feel of your real store. I would like to provide you some fast easy ways to change the look and feel of the yahoo store shopping cart and help reduce bounce rates from your customer.To start there are a few basic steps that you can take to change the colors and add a logo and you need to remember that any image that you add to the cart need to be https and i will go over that more in a bit.

the easy way to start is to go into the “checkout manager” and select Visual Customization from there you can change the colors and add buttons when you are in the configurable styles, change the colors to match your store. then you will need to add your header image. you can just add your logo to the logo field in Global Settings and click “checkout wrapper” then upload the logo. the issue with that is it will center the logo and not let you upload a full size header but a little lower on the page is a “top navigation” field that can take all the HTML that you would like to add and you can use a simple center tag and the image (host the image in the store lib files)  and when you are on this page add a logo for the Paypal standard page.

the part of the cart that I don’t like is that you can’t change the background color but adding some easy CSS code to the “top navigation” field will fix that. just add

<style type=”text/css”>
body {background:#YOURBACKGROUNDCOLOR none repeat scroll 0 0;}
#ys_pageBody {
background:#FFFFFF none repeat scroll 0 0;}
.ys_wrapper {
background:#YOURBACKGROUNDCOLOR none repeat scroll 0 0;}
</style>

after that has been added to your cart you will need to “turn on” top navigation for the checkout pages. so we will go to Page Configuration and for all the pages there you will see “Top Navigation Bar” choose the radio button that says to show in checkout pages and then save. go to the next page and do the same thing. save and view on the last page and check the code

******remember, as with any code, you need to test before you publish to make sure that everything ends up right!!******

No Comments

No comments yet.

RSS feed for comments on this post.

Leave a comment

You must be logged in to post a comment.