This is the second article in a series for Power Users and Web Site Designers on one of Quick Shopping Cart's newest features: Advanced CSS. Using the Advanced CSS feature, you can override and extend almost any style in your chosen template, ensuring that your storefront truly reflects your desires and the needs of your customers.
A question we frequently receive is, "How can I change my site header to the same image as my other website?" In this article, we show you how to customize your header background image, header font styles, and more. If you haven't read the first article in this series, you can review the information about using the Advanced CSS feature.

Customizing Your Header

You may have another site with a custom header that you or your designer have created, and now you'd like to use that header image with your storefront. Let's look at how to make this simple change.
Here is the before/after sample:

The top example is the header image that comes with the theme we've selected (in this case, Retro Sign - A). The bottom example shows how we want the header to look. We've tweaked the main text and replaced the background image with one of our own making.
Here's the CSS code:

#header-content {
     background-image: url(sample_header.png);
     height: 118px;

}

.titles h1.company-name {
font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
}

The first block sets the header’s background image to our new sample_header image, and then adjusts the height to accommodate the new design.
The second block targets the company name text in the header and changes it to a serif font family, setting it apart from the original design.

Disappearing Act

So far, we've focused on how to change the appearance of certain features in Quick Shopping Cart. You can also completely remove a component from your site. You can accomplish this action by selectively hiding parts of the storefront using CSS. However, using this feature is confusing if you forget that you've hidden part of the site.
The basic technique to hide a component is to add a CSS “display:none;” style line for the component you'd like to hide. For example, here is the CSS to hide the breadcrumbs:

#breadcrumbs {
      display: none;

}

With this style line, customers don’t see the breadcrumbs when navigating through the site - there won't even be an empty space where they used to be. It's like they never existed. Here's another example:

.category-list {
      display: none;

}

This line hides the list of categories in your sidebar.

We’ve provided a few examples of storefront components that can be customized using the new Advanced CSS features in Quick Shopping Cart, but the possibilities for customization are countless To dive deeper into what can be done with CSS, you need to look at the storefront code to see what’s going on Fortunately, there are tools to help you look at the storefront code.

X-Ray Vision

The Firefox Web browser supports a wide range of extensions to make designing and developing your Web site easier. One example is Firebug, an extension that lets you see the HTML, CSS, and Javascript that make up the page.

As an example, here’s the Product Details page with the product name highlighted as seen with Firebug (click to enlarge view).

The left pane shows the HTML structure with the selected element highlighted. The right panel shows the CSS code for that element, allowing you to see how the element is styled. You can even experiment with the look by editing the styles in Firebug in real time. The sample site we used for this and the previous article was built using this process. We highlighted an element to customize, experimented with the styles, and then wrote it into our Advanced CSS.

Learn more:

• Firefox
• Firebug
• Firebug screencast
• W3Schools on HTML
• W3Schools on CSS

Want More?

In parts 1 and 2 of this series, we introduced some powerful tools to help you dig into your storefront. We looked at techniques to customize different parts of your storefront, including background images, custom buttons, custom header, and hiding parts of the page.

Want more? Add a comment letting us know what other parts of your storefront you’d like to polish up, and we’ll see about addressing the request in a future article.

The latest release of Quick Shopping Cart brought with it a new level of customization for Power Users and Web Site Designers: Advanced CSS. Using the Advanced CSS feature, you can override and extend almost any style in your chosen template, ensuring that your storefront truly reflects your desires and the needs of your customers.
In this, the first of two articles on the new Advanced CSS feature, we look at a couple specific techniques that you can use to customize your storefront appearance beyond the designs QSC currently provides. For this article, we assume that you have a basic understanding of both HTML and CSS, and of how they work together to style a site.

To start writing your custom CSS, select the Storefront menu, then Advanced CSS. Enter any CSS style you'd like to override the site's default style, select the Active checkbox, and then click Save. At any time you can de-select the Active checkbox, and your site will revert to its default state without losing your custom CSS.

Background Images

First, let’s address adding background images to your site. Background images can be used to highlight information on a page or just add that extra bit of "flair" to the design. For example, you can add an attractive gradient fade to the product name on the Product Detail page.
You can see the applied style in this before/after view of the product title on the Product Detail Page:


This is the gradient image:


Here is the CSS code that adds the image to the headerstyles the header on the right (background image code is in bold):

.product-detail-header h2 {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-weight: normal;
     font-size: 2.5em;
     background-image: url(rem_store_grad.png);
     background-repeat: repeat-x;
     background-position: bottom left;
     padding-bottom: 10px;
     border-bottom: 2px solid #552906;

}

You can host your background image anywhere that is accessible from the public web, such as a WebSite Tonight account, an Online Photo Filer gallery, or any public Web host. To get the address (URL) for your image, view the image in your Web browser, right-click, and select either "Properties" (Internet Explorer) or "Copy Image Location" (Firefox). In Explorer, select and copy the URL for the image, then close the properties window.
You can now use that address as the value for the "url" in the sample code above.

Buttons

We’re frequently asked, "How can I customize my storefront ‘Add To Cart’ buttons? I don't like the browser buttons." Well, here is a technique for creating a fast-loading, image-based button that includes a mouse-over highlight in modern browsers.
First, a useful before/after:

On the left, you can see the default look of the Add To Cart buttons (in Firefox on Windows). On the right, the new look with normal and hover (mouse-over) states side-by-side.
Here is the image we use for our new buttons:

That's one image, and it has both versions of the button. We'll use a CSS technique to change which part of the image is shown when the customer moves the mouse over the button, although this is dependent on the Web browser used to view it.

This is the CSS code that renders the new buttons:

/*
      input.content-product-button is the add-to-cart button on product listings
      .product-options-table input.btn is the add-to-cart button on the product detail page
      .featured-item-button is the add-to-cart button on the featured product

*/

input.content-product-button,

.product-options-table input.btn,

.featured-item-button {
     height: 25px;
     width: 107px;
     background-color: transparent;

    background-image: url(sample_add_cart.gif);

    background-repeat: no-repeat;

    background-position: 0 0;
     font-size: 0px;
     border: none;

}



/*
      The mouse-over feature works in IE7/Windows, Safari/Mac, and Firefox, but not IE6

*/

input.content-product-button:hover,

.product-options-table .btn:hover,

.featured-item-button:hover {
     background-position: 0 -25px; 

}

The tricky part of this code is that last style line. By setting the background-position to -25px, we move the image up to show the darker hover state when the customer hovers over the button. With this style, the browser only needs to load a single image, which can help speed page loads. Also, we set the width and height of the button to the size of the button image, and set the font-size to 0 (to hide the default text in the button).
In our next article, we look at overriding fonts and colors for specific elements, and see how to use your custom CSS to move elements on the page.

With the latest releases of Quick Shopping Cart® (QSC), we've been including templates and themes that match templates in our WebSite Tonight® (WST) product. By applying the same template to both applications, you can maintain a custom Web site in WebSite Tonight and run a matching eCommerce site with Quick Shopping Cart, giving your customers a more seamless and enjoyable shopping experience.
We've also released a feature of our navigation editor that allows you more customization control to closely tie your different site accounts together. We take a look at this feature in this article.

Select Your WST Site Template

Start with your WebSite Tonight site. In WST, from the Design menu, select Template and Color to select a template. It may take a few minutes to find a template that is available for both WST and QSC. Here I've chosen "Global" in WST; its counterpart in QSC is "Global 2 – A,"



Customize the navigation
After selecting a template for your WST site, you can customize your navigation to allow customers to more easily move back and forth between the two sites.



From the Design menu, select Page Designer and then double-click the menubar to open the Edit Navigation window. Click Add New Button. Under Type, select URL. Enter the URL of your published Quick Shopping Cart site, and then enter a label. I’ve used "Store" for this example. Click OK to save your changes. Publish your WST site.



 
Select your QSC site template

Now, let’s customize your Quick Shopping Cart. In QSC, from the Storefront menu, click Templates. In category menu, select New. Locate the template you used for your WST site. In this example, I used "Global 2 –A," which is the corollary to WST's "Global" theme. Once you've selected the template, click Save.




Customize the QSC menu

After selecting the template for your QSC site, you can customize QSC's menubar to link to your WST site.
From the Storefront menu, select Menu Customization. In the Main Menu, click Add to open the Menu Item editor. In the Page menu, select WebSite Tonight. Because you should enter a label that matches your WST site, which defaults to "Home Page," it is best to enter “Home” or "Home Page" in the label field. Then, in the WST Account menu, select the WST account that you're linking to. In the Target menu, specify which window or frame in which you want the page to open.



Note: 

If you purchased your WST site in a different Go Daddy account than the account with which you purchased your QSC site, your WST site will not display in the WST Account menu. To remedy this issue, in the Page menu, select Custom, and enter the URL that points to your published WST site. Click Save, and then publish your QSC site.

Your WST and QSC accounts now display the same template and are linked. If your users click Store on your Web site, they are taken to your QSC storefront; and if they click Home Page on the storefront, they are returned to your Web site. This same technique could also be used, for example, to link from the WST site to your QSC Contact page.

Our Sample Sites, Together

Quick Shopping Cart now supports favicons: the cool little images that display in the address bar and browser tabs when you go to a Web site. For example, Google’s favicon is a "G" icon that displays in the address bar. Also, these icons show up when saved to favorites and can show up in Internet Explorer (IE) if you save them to your desktop.

Now that this feature exists, you can create and upload an image that represents your site. Since IE only supports icon ".ico" types, we recommend you create an icon file that's  16x16 in size.

Using an existing icon

If you already have an icon, you can simply upload that image to QSC and publish. If you have a WebSite Tonight site, you may already have a usable icon. Just go to your site's root and append "/favicon.ico" (for example: www.coolexample.com/favicon.ico). If the browser displays an image, right-click that image, and save it to your file system.

Creating a new icon

Follow these suggestions to help ensure success when creating a favicon:

Create with an icon editor.

• You can find many professional and free utilities by simply running a Web search for "Icon Editor" using your favorite search engine. For development and testing purposes, we created test icons using the free image creation utility:  http://www.gimp.org/

Create a clean 16x16 .ico file.

• Favicon images display best when saved as a 16x16 pixel size. Most editors can scale existing images to this size, so you could use an existing image as a starter.
• While we support many file types, an .ico file is the most widely supported (the only type supported by Internet Explorer) and is most easily viewable by your customers.

Use Transparent Background

• The ,ico format allows for transparent background and therefore displays the most cleanly, regardless of the color scheme settings of the browser displaying it.

Publish icon files infrequently.

• Remember, your customers’ browsers cache your old icon and probably never know it has changed. These customers only see the change after their browsers’ cache has been cleared or after the site information has expired. New customers have no problems seeing up the newer icon.

Upload instructions.

Greetings. I want to take a moment to introduce two new features available in Quick Shopping Cart® 2.3: Advanced CSS and Saved Skins. The goal of these two features is to allow you greater control and flexibility over the look and feel of your site.

The Advanced cascading style sheets (CSS) feature provides you with a new level of customization for your cart. With it, you can add your own CSS styling throughout your site. This advanced feature goes beyond the level of customization allowed by the “Customize Colors and Fonts” feature. However, to use it, you must be familiar with CSS. You can start learning about CSS at www.w3schools.com/css/default.asp 

One great way to get started in the use of advanced CSS is to customize your background with an image. Instead of a simple solid background color, you can have any image accessible via a URL as the background for your site. The basic syntax for this is:

body
{
background-image: url(image location);
}

There are many other options to style the background image, as well. For example, to make the image repeat, add the background-repeat option To lock the background in place relevant to the actual content on your pages, use the background-attachment option. You can also combine styles. For example, to have a site with a background image that repeats and doesn’t scroll, you would add the following lines to your advanced CSS:

body
{
background-image: url(image location);
background-repeat: repeat;
background-attachment: fixed;
}

Be aware that if you have SSL enabled and choose to customize your background in this way, your customers may see a security message stating that the page contains secure and insecure items when they go to check out. This behavior is browser specific and cannot be controlled by Quick Shopping Cart®. One possible solution to this situation is to ensure that the image URL is secure by verifying its URL begins with https instead of http. This is just one example of the many customizations you’ll be able to achieve using the advanced CSS feature.

Another new QSC feature is My Saved Skins, which allows you to save snapshots of your site's graphical layout. When you create a new skin, your site's template, color theme, category page style, product page style, custom fonts and colors, and advanced CSS are backed up. Creating skins gives you the ability to confidently try new look and feel options, since you can always reload a previously saved skin. Moreover, you can save up to 50 skins, so you can build different skins for specific occasions. Using the My Saved Skins manager, you can create new skins, apply a skin, update an existing skin, rename a skin, and delete a skin.

Remember, saving a skin takes a snapshot of your site's current settings. The skin’s settings do not change unless you overwrite it using the My Saved Skins manager. When you overwrite a skin, all settings for that skin are replaced with the site's current settings. So when using this new tool, back up your current settings and explore the many new templates we’ve added.

Greetings,

Quick Shopping Cart 2.3 has recently been released and contains the following features.

Improved Tax support:

We've added support for more tax rates down to the zip code level as well as creating the option to exempt certain products from tax. You can activate this feature by going to the State-based tax within the processing tab and then adding in rates for the applicable zip codes for your situation. Additionally, you can now choose whether or not shipping is taxable.

Improved Themes / Customization of CSS stylesheet.

Actually we should boast a little here. Two of the largest user requests we've received that relate to themes have been for the ability to create and use your own CSS and to save and edit different versions of your storefront. We have an in-depth post from one of our engineers, as well as six new help articles to better explain this new functionality and what it can do for you.

Favorite Icon support

Most of you have noticed the icons that often display to the right of the URL in the address bar mirroring the graphical identity of a Web site. Indeed, many of you use them within your stores’ companion Web sites. We've added the ability to use favicons in QSC. A detailed blog entry on how to make the most of this feature is located here.

Thank you all once again for you support, and please keep your feedback and suggestions coming.

Regards

John

QSC team

---

Just the other day someone on the blog asked:

“Why in the hell don't you have a forum for the QSC customers??? I have a new question everyday! I don't want to wait 2 days for a reply!”

I considered this question and after about 23 milliseconds came to the only correct answer: we do need a QSC forum. Therefore, I'd like to introduce QSC owners to their own section within Go Daddy Connections..

What this forum is.

The Quick Shopping Cart Forum is a place for QSC customers to gather and discuss the program, how they use it, challenges they've overcome, and any tips and tips they’ve picked up along the way. Running a small business requires that you take on various roles, many of which are full-time jobs in the paid world. At any given moment, you might be a graphic designer, copywriter, postal clerk, or customer service representative. Add to this list a bit of Web design, photography, and accounting, and you’ve got an average Monday. :) So, if you've solved a problem that someone else may benefit from reading about or have one that someone might be able to solve, we’d love to hear from you. The forum is lightly moderated and predominantly self-policing; the rest I leave to your good judgment.

What this forum is not.

The Quick Shopping Cart forum is not an official support venue. We have 24-7 phone and email support for all our applications. For any pressing or time-sensitive concerns, those avenues would be your best bet.

I'm starting out with a few basic topics, but we’ll open more focused areas as the need arises. Thank you very much for your feedback, and I hope you enjoy getting to know your fellow store owners.

John

QSC Team

Greetings and salutations.

Today's entry is on a workaround for tax-exempt items. We’ve received requests to accommodate a tax-exempt status with Quick Shopping Cart. While we don't have a specific category for this, there's a workaround that some of you may find useful. Those who have some untaxed items and thousands of taxed items can stop reading now. Additionally, this solution is primarily applicable for those who conduct most of their business within one state.

The Problem

Many states have items that are tax-exempt based on the nature of the item, the purchaser's intended usage, and many other local factors that would drive a developer to drink more decaffeinated beverages before trying to untangle the tax code for each city, county, and state.
 
Obviously, I'm not a tax professional, and the workaround doesn't guarantee anything, but you can use the following method to create tax-exempt sales on one or more of your products. This method is merely a suggestion and we are not responsible for the consequences of any actions taken on the basis of the information provided in this blog article

The Solution

There are several tax options within the Processing > Taxes screen. The one that we're interested in is VAT (Value Added Tax). Presently VAT is our only per product tax attribute. The remaining flat tax and state tax options are applied equally over all products.

Here's how to create an exempt item. First, switch your taxation type to VAT and save the setting. We are now at the part where people who have thousands of items should stop reading.

Go into each of your products and set the VAT percentage to your current state tax limit for all items you still want to collect tax on. For exempt items, leave the VAT at 0.

Issues: Won't this apply tax to that item regardless of the state businesses are in?

That's indeed a problem, and although it has a workaround (a coupon for the % off the purchase that equals your state’s sales tax rate ), it's not a very elegant one. However, it could work for you.

Please note these workarounds are not a substitute for us revising and extending features within future releases; we provide workarounds to give immediate assistance to our current users.

 

Hello, my name is Craig. I am a software developer on the Quick Shopping Cart® team, and I’ve been with GoDaddy.com® since May 2007. Prior to joining GoDaddy.com, I helped design and develop software for federal law enforcement agencies. As a member of the Quick Shopping Cart team, I want to provide our customers with the best ecommerce solution on the market. One area of Quick Shopping Cart that I’ve been involved with is QuickBooks® Integration, and we’ve recently made some improvements that you may not be aware of.

QuickBooks Integration Improvements

Our improvements focused on making the integration more robust and reliable. For example, when updating QuickBooks, we flag and skip sales receipts that would previously have caused the update to fail. At the end of the update session, you’re notified if any invoices were skipped. This notification is displayed in the “Status” pane of the Web Connector and on the QuickBooks Integration page in Quick Shopping Cart. If you receive such a notice, contact our customer support and we can work to resolve the issue with you. Generally, this only occurs when there is a problem with the integration setup or a particular sales receipt, so most of our users won’t experience it.
We’ve also enhanced support for unattended operations and automatic updates. Unattended operations allow the Quick Shopping Cart Web Service to update your QuickBooks company file even if QuickBooks isn’t open, and the automatic updates feature refers to the “Auto-Run” option inside of the Web Connector. Now, you have the ability to indicate whether or not you want to allow unattended operations. You can change your preference in the QuickBooks Integration: Edit Configuration page. Automatic updates work hand-in-hand with unattended operations. If you want to perform automatic updates, make sure you enable unattended operations; QuickBooks may close when the updates run. Also, if you enable the Auto-Run feature, we suggest setting the service to run every couple of hours instead of every few minutes.

A special note on unattended operations: if you’ve set up multiple users for your QuickBooks company file, you probably had to indicate which user you wanted the Quick Shopping Cart Web Service to “connect as” when QuickBooks isn’t open – make sure the user you select has the privileges to access the Chart of Accounts and input sales receipts. Also, regardless of the user you selected, if QuickBooks is open, the Quick Shopping Cart Web Service will have the privileges of the user that opened it. This is QuickBooks behavior that we don’t have control over, but we are investigating the issue and will provide a help article soon on how to troubleshoot problems that may arise because of it.

Those are the major changes made to QuickBooks Integration; I hope they serve you all well. I’d also like to take this chance to encourage you to make sure your QuickBooks Web Connector program is up-to-date. Currently, the latest version is 2.0.0.107. You can see which version you are running by opening the Web Connector, clicking Help, and then clicking About QuickBooks Web Connector. If you have an older version, go to: marketplace.intuit.com/webconnector/webconnector.aspx to download and install the latest version.

Greetings and salutations,

Quick Shopping Cart Version 2.2 made it into the wild and contains several new features.

On Safari

With the addition of Safari 3.0 support to the administration section of your Quick Shopping cart, you can now use Safari with QSC.

Website Tonight link integration.

For people who use both QSC and our Web site builder, we've made it easier to create a common navigation between the two programs.

How do I get it?

To set up this relationship, log into your QSC store, select Menu Customization from the Storefront menu, and then click the Add button. Select WebSite Tonight from the Page list and enter the label for the hyperlink to your WST site. Select the WST site and specify the window or frame in which you want the site to open. We default to none, which replaces your storefront with the front page of your Web site. You can set the order in which this link displays and preview the page prior to publishing your storefront with these changes.

Instructions on how to set up the reciprocal link within WST can be found on their product blog .Note both QSC and the active WST site must be in the same shopper account.

Continue Shopping

Many of our store owners asked for an option to link back to their main site from the cart summary page,just prior to the purchase process. We’ve added the ability to “continue shopping.” You can customize the label and specify the destination URL for the hyperlink.

How do I get it?

Select Preferences fro the Storefront menu. Select Override Continue Shopping Destination and enter the URL you want to use.

Fixed items

Update Yahoo!/Overture conversion tracking to support a new ID. Read more about this in our help system ( links to article). Basically, you must change your conversion tracking information; however, your legacy Yahoo!/Overture ID will continue to work for the time being. Any other updates to this screen require you to provide us with your new Marketing ID and Yahoo!(r) Server information.

Per a user’s request, we updated new order email to include phone numbers. There are many more small changes you may notice as you navigate through your account. Until next time, keep your suggestions and comments coming.

John