Drop Shop

Drop Shop provides a slick, visual way for WP e-Commerce users to add items to their cart. Products can be dragged and dropped into the cart, and regardless of how they’re added, cart contents are displayed at all times for easy editing. Admins choose where to display the cart (sidebar or footer) and can customize the look to match their existing site.

Table of Content

Installing Drop Shop

Purchasing

Drop Shop 2.0 can be purchased from the WP e-Commerce store.  Once you’ve purchased Drop Shop, you’ll receive an email with a download link. Download the plugin to your hard drive.

Uploading

Now we’ll need to upload Drop Shop to your WordPress installation. Remember, Drop Shop requires that you have WP e-Commerce (free) and Gold Cart for WP e-Commerce (purchased here) installed as well.

Go to your Plugins menu from the dashboard. Choose “Add New”.

Now select “Upload”. Click on the “Choose File” button and find dropshop. Once you’ve found it, click “install now”.

Activating Drop Shop

Now, when prompted, click “activate plugin”.

Once you’ve done so, Drop Shop will appear in your plugin directory.

Setting Up Drop Shop

Accessing Drop Shop Settings

You’ll control Drop Shop from the widgets menu, under Appearance:

You’ll notice that you now have a Drop Shop widget that you can use.

Locating Drop Shop

Now, you must decide if you’d like to place Drop Shop in a sidebar, or in your footer. In the sidebar, it will appear as a vertical column alongside your content. In the footer, it will appear below your content, horizontally.

Sidebar:

Footer:

(note:actual appearance will depend on your customization choices)

Once you’ve decided where you should place Drop Shop, drag the widget to the appropriate sidebar. What sidebars are available to you will depend on your theme, not WP e-Commerce. In this example, using the default theme twenty-ten, we have sidebars and footers available. For more on sidebars, visit the WordPress Codex.

Adding the Widget

Just use your mouse to drag and drop the widget to the sidebar of your choosing. As long as that sidebar is open, the widget will drop right in.

Now, open up the widget by clicking on the downward arrow next to the word “WP e-Commerce Drop Shop”.

This is what you’ll see:

It’s important to note that at this point, Drop Shop is visible on the front end of your website, and since we haven’t customized it, its using the default appearance. Its fully functional and requires no further customization, unless you’d like to change how it looks.

Customizing Drop Shop

Widget Title

The widget title appears at the top of the widget, regardless of where its located. By default it is “Shopping Cart”. You may change it to anything you’d like, or leave it unnamed. You will only see a widget title in the vertical orientation.

  Default                                     “Your Products”                  Title left empty                   A really long title

Drop Shop Orientation

You can choose to display Drop Shop horizontally or vertically. If you’ve placed Drop Shop in a sidebar, choose vertical. If you’ve chosen to put it in a footer, choose horizontal. Of course, it will work either way, but may look out of place. If you choose horizontal and to place it in a footer, understand that dropshop will expand to the size of the footer.

Vertical:

Horizontal:

Notice that in the horizontal layout, you don’t see a Widget title.

Now that you understand the difference between horizontal and vertical layouts, and since there are so many variables that you need only for one configuration or the other, lets proceed based on which you’re trying to achieve.

Configuring Vertical Layouts

Drop Shop Positioning

If you can see your Drop Shop while shopping, you can always drag and drop items into it, but what if you’ve scrolled far enough down that its no longer visible? We offer you the option of making Drop Shop always visible via dynamic positioning. If you choose “fixed” positioning, Drop Shop will always stay where you put it. If you scroll out of view, you’ll need to scroll up to drag and drop items into the cart or view what’s in it.

If you choose “dynamic” then Drop Shop is always available. Simply click on any product in your store, and Drop Shop will magically appear.

Fixed Positioning:

(drop shop isn’t viewable from where we’ve scrolled)

Dynamic Positioning:

(Now, if we click on a product to drag and drop it, Drop Shop appears alongside conveniently.)

Show how many products?

How many products should Drop Shop show at any one time? It will technically hold all your products, but you may need to scroll to see them.

In this example, I have four products in the cart. Here is how you’ll see the cart, based on how many items I’ve chosen to display. You may display as many as five, and remember, how many you show at any time determines the height of the widget.

Default (show 3, scrolls)               Show 1 (scrolls)                       Show 4 (no scroll needed)

Arrow clicks scroll by how many products?

When you have more products in your cart than the cart is configured to display, the widget will display arrows so the user can scroll amongst his products. You can decide how many products will scroll by when a user clicks on an arrow.

For this example, we’re displaying three products, but have many in the cart. Here is the original cart:

Original Cart                Scroll by 1                   Scroll by 2                  Scroll by 3

In these instances, we only clicked the down arrow once, what changed was how many products scrolled with each click.

Scroll Speed

When you click on an arrow to scroll, an animation takes place as the items scroll past. You determine the speed of that animation. By default, it is set to 400. 1000 is equal to 1 second, so 400 is less than a second. You can slow it down or speed it up so that its instantaneous.

Preset Theme:

Remember, you can completely customize the look of Drop Shop, but if you’d just like something out of the box, we offer two themes: light and dark.

Light :

Dark :

Configuring Horiztonal Layouts

Drop Shop Positioning

If you can see your Drop Shop in the footer while shopping, you can always drag and drop items into it, but what if you’ve scrolled far enough up that its no longer visible? We offer you the option of making Drop Shop always visible via dynamic positioning. If you choose “fixed” positioning, Drop Shop will always stay where you put it in the footer. If you scroll out of view, you’ll need to scroll down to drag and drop items into the cart or view what’s in it.

If you choose “dynamic” then Drop Shop is always available, docked at the base of the page, regardless of where you are on your site. Click on the Shopping Cart tab to minimize it or bring it back up.

Fixed Positioning:

(drop shop remains in the footer)

Dynamic Positioning:

(Drop Shop is docked to the bottom of the pane, always accessible, regardless of where we are on the site)

(Drop Shop minimized in dynamic view, by clicking on the shopping cart tab)

Show how many products?

How many products should Drop Shop show at any one time? It will technically hold all your products, but you may need to scroll to see them.

In this example, I have four products in the cart. Here is how you’ll see the cart, based on how many items I’ve chosen to display. You may display as many as five.

Default (show 3, scrolls) :

Show 1 (scrolls) :

Show 5 (no scroll needed) :

Arrow clicks scroll by how many products?

When you have more products in your cart than the cart is configured to display, the widget will display arrows so the user can scroll amongst his products. You can decide how many products will scroll by when a user clicks on an arrow.

For this example, we’re displaying three products, but have many in the cart. Here is the original cart:

Original Cart  :

Scroll by 1 :

Scroll by 2 :

In these instances, we only clicked the down arrow once, what changed was how many products scrolled with each click.

Scroll Speed

When you click on an arrow to scroll, an animation takes place as the items scroll past. You determine the speed of that animation. By default, it is set to 400. 1000 is equal to 1 second, so 400 is less than a second. You can slow it down or speed it up so that its instantaneous.

Preset Theme:

Remember, you can completely customize the look of Drop Shop, but if you’d just like something out of the box, we offer two themes: light and dark.

Light:

Dark:

Dark

Customizing Drop Shop

Although Drop Shop has default themes, you can customize it as much as you’d like. If you tick “enable custom styles” these options will appear.

Background Color

Choosing colors in Drop Shop can be done two ways: either by entering a color value or using the color selector. To use the color selector, click on the colored box and the selector will appear. You can choose any webbased, RGB or HSB color.

Choosing a background color will affect the color of the entire cart widget.

Here are some examples:

Button Background Color

Choosing colors in Drop Shop can be done two ways: either by entering a color value or using the color selector. To use the color selector, click on the colored box and the selector will appear. You can choose any webbased, RGB or HSB color. Choosing a button background color will affect the “Checkout” button background.

Here are some examples:

Button Background Hover Color

Choosing colors in Drop Shop can be done two ways: either by entering a color value or using the color selector. To use the color selector, click on the colored box and the selector will appear. You can choose any webbased, RGB or HSB color. Choosing a button background hover color will affect the “Checkout” button background when you hover on the button. This color is ONLY viewable when you hover or mouse onto the button.

Checkout Button Text Color

Choosing colors in Drop Shop can be done two ways: either by entering a color value or using the color selector. To use the color selector, click on the colored box and the selector will appear. You can choose any webbased, RGB or HSB color. Choosing the checkout button text color will affect the color of the text on the Checkout button.

Here are some examples:

Font Style

Choosing a font style that matches your website will help the widget integrate into your design better. Choose serif or sans serif to match your default fonts.

A sans serif will better match Arial and Helvetica, Verdana, etc. Serifs will match Tahoma and Times New Roman.  Here are examples:

Sans Serif            Serif

DropShop Text Color

Choosing colors in Drop Shop can be done two ways: either by entering a color value or using the color selector. To use the color selector, click on the colored box and the selector will appear. You can choose any webbased, RGB or HSB color. Choosing the text color will affect the color of the widget title and the price text..

here are some examples:

Prev/Next Arrow Color

If you have more arrows in your cart than your cart can display, arrows will help the user navigate the cart.

Choose between light, neutral or dark arrows.

Here are some examples:

Light arrows            Dark arrows        Neutral Arrows