Shopp Customization – How I Customized My Shopp Ecommerce Store

One of the most significant factors for deciding to purchase the Shopp Ecommerce Plugin is that it integrates seamlessly with WordPress Themes and is easy to customize. This may not be so apparent when reading the documentation or visiting the private forum so I want to outline the customizations I did to save you time when building your own ecommerce website using the Shopp Ecommerce Shopping Cart Plugin for WordPress.

How I customized my Shopp Ecommerce Store

1. WordPress Theme customization

First of all I installed the Corporate theme from Studiopress and customized it by replacing the header banner and background image. I then created a featured page for the home page to display the most popular items from my store. I also added a custom menu to easily organize and maintain my web pages.

2. Set-up Shopp Theme Templates

By default Shopp uses generic built-in templates. It automatically creates 4 pages( cart, your orders, checkout, cart) after installing and activating the plugin. If you want to modify Shopp’s pages to better integrate with your WordPress theme, set-up custom theme templates (highly recommended).

  • Create a folder named “shopp” in your theme directory (same location as all your theme files)
  • Set the permissions of this folder to be writeable
  • Upload the shopp templates to the shopp folder
  • Login to your WordPress admininistration panel
  • Go to the Shopp presentation settings: Shopp-settings-presentation
  • Click the button that says “Install Theme Templates.”
  • Save the changes

Now you have the ability to customize any of the Shopp Theme Templates by adding short codes (see number 3)

3. Add sidebar containing widgets

The default installation of Shopp creates 4 pages (shop, cart, your orders, checkout, cart) that are automatically added to your navigation menu. To help visitors find products and navigate the site I added a right sidebar to all the product pages containing a search box, a product category drop down box and a shopping cart function using the widgets provided by the dedault Shopp installation.

Short Codes

Shopp uses short codes to increase the functionality and customize your ecommerce store.

4. Display multiple products on any page or post using short codes

Insert this short code to display a list of products on your page or post.


<div id="shopp">
[product id="1"]
[product id="2"]
</div>

To find the product id of a specific product click on products in your WordPress Dashboard under Shopp. Click “edit” of any product and make a note of the id at the end of the URL. Use this id to insert in your code.

To find category ids click on “categories” under Shopp in your WordPress dashboard. Click “edit” of any category page and make a note of the id at the end of the URL. Use this id to insert in your code.

5. Prevent horizontal line from extending the full width of your page

When adding a number of products to any page (using the product code above) horizontal lines (dividing lines) are automatically created under each product which extend across the sidebar. This is not a problem if you have no sidebar.

Solution
Add “width” to your shopp.css in the theme directory (around line 71) ie


shopp ul.breadcrumb {
margin: 10px 0;
width: 625px;
}

Now all your product dividing lines will only extend part way across the page stopping just short of the right sidebar.

6. Add shopp search to your navigation bar

Because the Shopp Ecommerce Plugin bolts on to your WordPress theme the default search included with your WordPress theme won’t allow visitors to find your products when they enter the product name.

To solve this problem add a search.php file to your theme folder then add this code to it:


<?php
    shopp('catalog','search-products', 'controls=off&search='.esc_attr(strip_tags($_GET['s'])));
?>

Now the search box will index any products you place in your store.

An easier alternative is to add the Shopp Search widget to your sidebar so you’ll have a search box displayed on all product pages containing the sidebar.

7. Create drop down product navigation on main menu

The quicker your website visitors can navigate your site to find products the more sales you’ll make. To do this I added a drop down navigation under he main shop link. It will display the main categories and sub categories of your products.

To achieve this, add the URL of the category or product page to the custom links box then add the link to your custom menu.

8. Add a widget to any post or page

Sometimes your WordPress theme doesn’t have the ability to add widgets to a page or post. To remedy this situation download, install and activate the “widgets on pages” plugin.

Now you’ll be able to add a widget to any of your pages by adding this short code.


[widgets_on_pages]

Please bookmark and/or return to this page to receive more tutorials on Shopp customizations. Enter your comments below if you wish to add your own customizations.

Related Articles
Shopp – Review of Ecommerce Plugin for WordPress
How to customize the Shopp checkout.php template
Which Ecommerce Plugin Is Best To Build Your Online Store?
7 Steps For Building A Profitable Online Store
7 Ways to Generate Traffic To Your Online Store

********************************
Need to Build an Ecommerce Website?
Visit: Ecommerce Website Design Maryland

Comments

  1. Hey, great article. I’m still clueless on why when I click “cart” or “edit shopping cart” or even “proceed to checkout” it just takes me back to my homepage.

    Help?

Trackbacks

  1. […] Related Articles Shopp – Review of Ecommerce Plugin for WordPress How to customize the Shopp checkout.php template Which Ecommerce Plugin Is Best To Build Your Online Store? 7 Steps For Building A Profitable Online Store 7 Ways to Generate Traffic To Your Online Store Shopp Customization – How I Customized My Shopp Ecommerce Store […]

Leave a Reply to USPS Shipping Rates Module for Shopp: Step-by Step Set-up Cancel reply

*