Frequently Asked Questions

Help Center Search

Walkthrough: Designing Your Store in Quick Shopping Cart

Print this Article
Comment on this Article
Last Updated: August 3, 2009 3:57 PM

This article is part of our Quick Shopping Cart Walkthroughs series, designed to guide you through creating an online storefront using Quick Shopping Cart. Designing Your Store is article one in the series. Click here to go to the beginning.

Time to Complete: 1 hour.

Your customers' first impressions often come from the design of your storefront. Quick Shopping Cart can help you create a positive impact with a well-designed store. While Quick Shopping Cart offers many options for customizing your site's appearance, these tools create the basis of your storefront:

  • The Template.
  • Background Images.
  • Your Storefront Information.
  • The Category and Product Page Styles.

In this walkthrough, we are going to set up a shirt company's storefront. We want something bright and eye-catching to attract our customer's attention.

Changing Your Store's Template

  1. Log in to your Account Manager.
  2. In the My Products section, click Quick Shopping Cart.
  3. On the Quick Shopping Cart page, click Open next to the Quick Shopping Cart account you want to modify.
  4. Select the Templates tab.
  5. thumbnail

  6. In the Template Options area, you can do one of the following, and then click a template thumbnail to select it:
    • Scroll through the templates available in the Category you previously selected during setup.
    • Click See More Templates and complete the following for a more advanced search:
      Category
      Select a category that best describes the type of site you want to build.
      Templates that work with
      Click the icon(s) that represent the product(s) for which you want to use the template, and then click Update. For example, if you want your Web site to match your shopping cart, select both Site and Store so only templates that work with both display.
  7. Optional: In the Template Options area, change the color scheme of your template by clicking one of the color swatches next to the thumbnail of the template.
  8. Click Apply to My Store.

NOTE: You must publish your storefront for the changes to take effect.

After looking through the templates, we like Digital Music from the Hobbies category. However, the existing header looks like this:

thumbnail

The man listening to music doesn't fit the shirt company's Web site theme, so we want to change the image to something more appropriate. Continue to Changing Your Store’s Background Images to learn how.

Changing Your Store's Background Images

All of Quick Shopping Cart’s templates come with a set of default images, known as Background Images. If those images don’t fit the look and feel of your store, they can be changed. Like the other media-based options, your Background Images use the Media Gallery. For more information, see Using the Media Gallery in Quick Shopping Cart.

Rather than using the default Background Image of the dancing man, we can use our own image of hanging shirts.

thumbnail

  1. Log in to your Account Manager.
  2. In the My Products section, click Quick Shopping Cart.
  3. In the Quick Shopping Cart Account list, click Manage Account for the account you want to modify.
  4. From the Set Up menu, in the Design section, select Background Images.

    For our t-shirt company's storefront, we want to replace the dancing man, which is Image 2.
  5. thumbnail

  6. Select the image you want to change, and then click Change Image.
  7. To upload an image, go to the Add Images tab and click Browse. Locate and select the image, and then click Upload.

    NOTE: If you have already uploaded the image you want to use, select the thumbnail in the Gallery.

  8. From the My Images tab, select the image you want to add to your template.
  9. Click OK.
  10. To change the way the image displays, from the Select Format list, select one of the following:

    TIP: The available space displays below the thumbnail. Use this information when selecting a formatting option.

    Original
    Retains the original size and formatting of the image.
    Scale to Fit
    Sizes the image so it's equal to or less than the original image's dimensions while preserving the aspect ratio.
    Stretch to Fit
    Sizes image to the same dimensions as the original image while ignoring aspect ratio.
    Tile Image
    Tiles the image horizontally and vertically within the allotted space.
    Tile Horizontally
    Tiles one row of the image horizontally. The vertical alignment depends on the template.
    Tile Vertically
    Tiles one column of the image vertically. The horizontal alignment depends on the template.
    Scale and Crop
    Maintains the aspect ratio while scaling the image larger or smaller, depending on the available space for that image in the template. Once one dimension matches and the other dimension either matches or exceeds the available space, the image is cropped from the center to equal the dimensions of the available space.
  11. To use the default template image, click Revert to Original.
  12. To display no image, click Delete Image.
  13. Click OK to save your changes.

    thumbnail

    In our example of the shirt store, our store will now have a picture of hanging shirts instead of the man listening to music.
  14. Click Preview to see how your site will look once you publish.

Any changes you make do not display on your site until you publish.

Configuring Your Storefront Information

Once you've chosen a template, you need to provide information about your business to your customers. The information you provide will display on your storefront.

  1. Log in to your Account Manager.
  2. In the My Products section, click Quick Shopping Cart.
  3. In the Quick Shopping Cart list, click Open next to the Quick Shopping Cart account you want to modify.
  4. From the Set Up menu, in the Business Information section, click Name, Logo, Contact info.
  5. Complete the fields with your company's information.

Here’s the information for our t-shirt company, as an example. You would fill these fields with your own company's information:

Company Name
So Many Shirts!

Slogan
We Sell a Lot of Shirts!

Address
123 Test St.
Phoenix, AZ 85001

Primary Phone
480.789.4567

Alternate Phone
480.987.6543

Email Address
johnsmith@secureserver.net

Copyright Year
2009

Favicon
A favicon displays next to a site's URL in a Web browser. When visitor's bookmark your site, the icon displays next to the link.

thumbnail

Logo
thumbnail

Welcome Image
thumbnail

Invoice Image 1 and 2
The invoice images show on our customer’s receipts. We use our logo here, but you could choose something different for your personal store.

Here is what the t-shirt storefront looks like after completing this information.
thumbnail

Selecting Category and Product Page Styles

Selecting the display style of your products and categories pages is the last step in designing the basis of your storefront.

Category Page Style
The Category Page Style defines how the products and categories display on your site.

Product Page Style
The Product Page Style defines the product’s display when a customer clicks on a product for more information.

If you don't have time to add images to each of your products and categories, you can add a placeholder image that will display for all of your products and categories until you have time to add individual product images. You can access them from the Set Up menu, under the Design option, by clicking Default Product Images.

  1. Log in to your Account Manager.
  2. In the My Products section, click Quick Shopping Cart.
  3. In the Quick Shopping Cart list, click Open next to the Quick Shopping Cart account you want to use.
  4. From the Set Up menu, in the Design section, select Category Page Style or Product Page Style.
  5. In the Select Product Page Style section, select a layout style. Use either the page menu or the yellow next arrow to view additional layout styles.
  6. Click Save.

NOTE: To preview a particular product page style, click the style thumbnail. The current layout style is shown in the Current Selection menu.

For the t-shirt example, we selected the Category Page Style "3 Column No Border".

thumbnail

Since each shirt will have multiple ordering options, we selected "Style 2" for the Product Page Style.
thumbnail

Now that the storefront is set up, it needs products.

Continue to article two: Setting Up Products.