Go Daddy Jobs
Syndicate
Created With Quick Blogcast
Introducing Background Image Replacement!
Using this feature is simple. Select Background Images from the Storefront menu, and you’re presented with all the images in your template. To change an image, simply select it, and click “Change Image.” After you select an image and click “Ok,” you can choose how you want the new image to be formatted. Your options are:
- Original – Use the image you selected in its original size and format.
- Scale to Fit – Size the image so it's equal to or less than the original image's dimensions while preserving the aspect ratio. This option will prevent the image from becoming distorted, but it may not take up the full area that the template image took up. The template image’s original dimensions are listed as the “Available Space” below the image.
- Stretch to Fit – Make the selected image the exact same size as the original template image. This option will not respect aspect ratio and can distort your image.
- Tile – Keep the selected image in its original size, but force it to repeat vertically and horizontally.
- Tile Horizontally - Keep the selected image in its original size, but force it to repeat horizontally.
- Tile Vertically - Keep the selected image in its original size, but force it to repeat vertically.
The feature also gives you the ability to completely clear out a template image so that no image is displayed. You can accomplish this by selecting the image and clicking “Delete Image.” Finally, you can easily undo any customization you make by selecting an image and clicking “Revert to Original.”
We have also added pre-defined custom header images for certain templates, which you can select from the Templates tab. If a template has pre-defined custom images, the header image displays as an attribute on the template and you can click it to change it. If you select an image from the Templates tab, the change is reflected on the Background Images page. Note that changing your template wipes out any background image customizations you have made, but changing the color scheme of your template does not wipe them out.
This feature has also been integrated with the “My Saved Skins” feature. So, every time you save a skin, your current background images are saved as well. Consequently, if you load a skin, any custom background images you had when you saved that skin are reloaded. And don’t forget that every time you change your template, we automatically save a skin for you.
This Background Image Replacement feature is a great way for you to customize your site, so check it out and see how you can personalize your site’s appearance.
Introducing Affiliate Marketing!
The basic concept:
Affiliate marketing companies help you find sites willing to advertise your store. These advertisers, or affiliates as they’re called, post a link to your store on their site. In return, the affiliate receives a commission if a shopper follows the link and ultimately places an order.
Getting started is easy:
We take care of all the technical aspects; You just need to sign up with one of the affiliate marketing companies, set your commission rates, and upload your marketing links (links to your products, etc). Once you’ve completed the setup process, the affiliate marketing company helps you find affiliates that are a good match for your store.
We take care of the rest:
We recognize when a customer comes to your store from one of your affiliates. If that customer completes an order, we send a commission notification to the affiliate marketing company and they initiate the commission process.
Check out your affiliate marketing results:
In Quick Shopping Cart, we mark orders placed by customers who came to your site through an affiliate so you can track how many orders your affiliate marketing campaign is generating. The order’s source code is set to LinkShare or ShareASale, depending on which company you’ve selected. You can view all your orders, broken down by source code, using the “Total Sales By Source Code” report.
Affiliate marketing is a great way to reach new customers. And, because you get to choose the affiliates that link to your store, you know they will be a good match. This means you can generate specific, well-targeted advertising for a relatively low cost. More importantly, you only pay your affiliates when a shopper comes from their site and actually completes an order. So, you’re only paying for real results.
This new feature will really help you generate more sales. To get started, select Affiliate Marketing from the Promotions menu.
International Shipping!
International Shipping!
International shipping has arrived. You requested it... we delivered. There are many considerations which you should be aware of when shipping overseas. This article will describe how you can enable your Quick Shopping Cart to ship internationally.
International Checklist
The following is a checklist to consider when configuring International Shipping:
Configure which countries you will support (Merchant Supported Countries).
This is the fundamental step that drives others.- Exclude products that will not or cannot ship to foreign countries.
- Configure a Shipping provider capable of shipping internationally.
- Review any "Free Shipping" coupons to see if they apply to other countries.
- Preview and Publish
Each of these items is described below.
Merchant Supported Countries
You (the Merchant) have the power to pick and choose which countries you want to sell to. To pick your countries, select Preferences from the Storefront menu and go to the "International Shipping" section.
The countries in the Available list are available for your site to support. The countries in the Selected list are the countries that your site currently supports. The Selected countries appear in the Country drop-down control on the Billing/Shipping Addresses page in your storefront's checkout process.
Add Countries by selecting one or more countries in the Available list and click [>>] to push these into the Selected pane. To remove countries, select one or more countries in the Selected pane and click the [<<] button. To select more than one country at a time, hold down the Control (Ctrl) key on your keyboard while you click on countries in the list.
Click the Save button at the bottom of the page to save the countries you have selected. You have now configured the countries to which your site can ship.
You can always test your settings before you publish by opening the Preview window. This allows you to see what these new settings will look like before you publish. After publishing, your site can ship to the new countries.
Excluding Countries for Products
Depending on what you sell, you may not want to ship, or are prohibited from shipping, some of your products to certain countries. Quick Shopping Cart provides the ability for you to prevent products from being shipped to certain countries.
Select Products from the Catalog menu and then click the product name that you want to edit. Go to the International Shipping section and click the Modify selected countries link to display the list of countries that your site supports.
After clicking this link, you can select countries where this product should not be allowed to ship. After publishing your selections, your storefront prevents customers from shipping this product to the excluded countries.
Remember to press the Save button to store your settings.
Shipping Options
In order to actually get the products to the international customers, you will need to configure a shipping carrier that is capable of delivering your product to the customer. Currently, there are two shipping options that support international shipping: UPS and Custom. To modify your shipping options, select Shipping from the Processing menu and then select Edit or Enable next to the option you want to modify.
UPS
In addition to completing the normal UPS configuration, you must select one or more of the following International UPS Services:
- UPS Worldwide Express
- UPS Worldwide Expedited
- UPS Worldwide Express Plus
- UPS Saver
- UPS Standard
Custom
In addition to completing the normal Custom Shipping configuration, you can apply surcharges for specific countries or regions to provide a more granular level of control over shipping charges. The following picture shows how you can add surcharges to specific countries or regions to cover more expensive destinations than those in the continental US.
Coupon Configuration (Custom Shipping only)
If you have "Custom" Shipping enabled, some Free Shipping coupons can be very costly if you ship from the US and are shipping to another country. These coupons by default will not apply to other countries unless you enable them.
Quick Shopping Cart allows you to apply Free Shipping coupons to non-US countries. After ensuring you have Custom shipping enabled, select Coupons from the Promotions menu and then click the Add New Coupon link.
Storefront
After all of your settings have been saved and published, your International Shipping configuration is complete. There are some changes to the checkout process to be aware of.
Address Pages
When the shopper selects a different Country in the address page, the following changes automatically occur:
- Shopper is presented with an updated State/Province list relevant to the country;
- Shopper gets Postal Code and Phone Number hints (that will pass validation);
- After submitting, validation errors will occur if either the postal code or phone number does not match the style that the country requires.
Exclusions
If you excluded any products from shipping to certain countries, these countries are identified on the product's detail page:
As a reminder to the shopper, these same countries are identified in the customer's Shopping Cart:
If the customer attempts to ship a product to a country that you created an exclusion for on the Products page, a validation error will appear at the top of the page and will not allow the customer to proceed with the purchase until the items are removed.
Review and Publish
As with all other Quick Shopping Cart functions, you are encouraged to preview the changes frequently before publishing. You can preview your work by either clicking the [Preview] button in the upper right corner or refreshing (F5 Key) the preview window if it is already open. When you feel comfortable with the configuration, publish.
Country Additions
Quick Shopping Cart will periodically add countries to its list of Available countries in the "International Shipping" section on the Storefront > Preferences page. If you visit this page, you may notice new countries that you can select for shipping.
Media Gallery FAQ
I use gif images to prevent my product thumbnails from being scaled down too small, can I still do this?
With the new Media Gallery, we've built in a more intuitive way to control how your images are scaled. You can now choose whether you want an image to be scaled or full-size, and you can do this with any image format, not just gifs. To determine whether to scale an image, enter the product's Media Gallery, drag an image to the thumbnail slot, and then click the arrow next to the Thumbnail title. You are presented with two display options: scale to fit and full size. To attain the same functionality that you achieved using gifs, select the full size option. You can come back to the product whenever you want and switch the option that you've chosen.
I use gif images in other parts of my site to prevent scaling, is this still necessary?
No, it's not. Now, you can use any valid image format and keep the original upload size of the image. When the image is uploaded, you are presented with the option to scale the image or keep the full size version. To keep the original size of the uploaded image, select full size. The one caveat is that the maximum image size is 1024x768. If it's any larger than that, we'll scale it down to be within those dimensions.
Why do I see three copies of each image in my Media Gallery?
We imported all of your existing images into the Media Gallery. For many products, you may have used the same image for the thumbnail, standard, and zoom images. In our system, these are three distinct images with different dimensions, so we added them all to the Media Gallery. If you have duplicates and want to get rid of them, just keep the version with the largest dimensions. Those of you who have used different images for thumbnail, standard, and zoom won't see these duplicate images.
There are a lot of images from existing products in my Media Gallery. Do I need to keep these images or can I delete them?
You can delete the images from your Media Gallery without affecting your products. We added the existing product images to your gallery so that you could reuse them. However, if you don't plan on reusing them, feel free to delete them from your Media Gallery.
When I upload images, I'm asked to add titles and tags. What are these for and how do I use them?
We added the tags and titles to help you manage your images. You can search the Media Gallery for images based on tags and title. Use tags to group images together. For example, if you sell clothing and apparel, such as shirts, shoes, and hats, you could tag all your pictures of hats with the term "hats." Then, in the Media Gallery, if you search for the word “hats,” you'll only see images that have the "hats" tag or that have the word "hats" in the title. You can assign multiple tags to an image by separating them with a comma. Titles and tags are completely optional, you don't have to add them if you don't want. When importing images from existing products to the Media Gallery, we used the title of the product for each image's title and we tagged each image with the product's part number and the term "small," "large," or "zoom."
Will changing the default product images update all products currently set to use the default product images?
Yes. The next time you publish, all products set to use the default product images will display the new images.
Is there anyway to set the default display option for thumbnails of new products?
Yes. This option is available on the Preferences page under the Storefront menu option. The option is under the Media Gallery Preferences section. This option will be used as your default option for all new products.
Customizing Your Storefront With QSC Advanced CSS, part 2
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.
Customizing Your Storefront With QSC Advanced CSS, Part 1
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.
An Updated Guide to Integrating Your WebSite Tonight and Quick Shopping Cart sites
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
QSC Favicon. Getting a hold of the little picture
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.
New Features: Advanced CSS and Saved Skins
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.