You can create product showcases on your store traffic site to showcase various products that you offer.
Deciding on products to showcase
If you have only a few products, then it might make sense to create showcases for all of them.
If you have a lot of products, then you should consider showcasing a couple of products for each category showcase on your site.
When deciding which products to showcase, I recommend using the following guidelines:
- Showcase your top selling products
- I recommend your top selling products because they have a proven track record of selling to people who find them.
- If you increase the number of people who find them, your sales will likely increase as well.
- Showcase your top viewed products
- Those which are getting the most views tend to have the most people looking for them.
- However, if you are getting a lot of views but no buyers, you might want to take a look at such items and see if there are changes to their listings which could be made in order to increase the percentage of people who buy such items.
- Showcase your most saught after products
- If you are not sure what your top sellers are or which products are being viewed the most, you can do keyword research for various products and try to find those which there are the best mix of demand and competition for.
- See my basic keyword research information.
Creating a Product Showcase Post
The instructions for creating a product showcase will typically be theme specific, though you can certainly use them to come up with ideas for creating your own showcase from scratch.
Note: The following instructions are for the Atahualpa Theme, v3.2.
These instructions will not work for newer Atahualpa versions!
Part 1: Create an images folder for your website
This step is entirely optional, but recommended as it will allow you to easily store images for your product showcases on your own server. There are plenty of other options out there, but if you do as these instructions show you will be able to enter the image name by itself to display images on your own server.
Part 1: Create an /images/products directory on your server
• Instructions for Hostgator w/ cpanel
- Log into cpanel
- Instructions for doing so are in your welcome email.
- Open the file manager
- Find the "File" section in cpanel
- Select "File Manager" from it
- If the "File Manager Directory Selection" box comes up, make sure that "show hidden files" is unchecked then select "Web Root" and "Go".
- Browse to your web sites root directory
- This should be /public_html/
- Click the folder in the left panel that is labeled "public_html"
- Create an "images" directory
- Select "New Folder" from the top menu.
- It looks like a folder with a green plus on it.
- A dialogue box will come up.
- Make sure that your root folder is displayed in "New folder will be created in"
- Type images into the Folder Name box
- Select OK to create the directory
- Browse to the newly created images directory
- Locate the new images folder under the public_html folder on the left.
- Select the images folder
- The main display where contents are shown should read "no records found" if you just created the images directory.
- Create a "products" directory in the images directory
- Select "New Folder" from the top menu
- Make sure that "New folder will be create in" displays the images directory
- It might read /public_html/images/.
- Enter "products" for the name.
- Select "OK" to create the directory.
You now have a place to upload images for your product showcases to without using the WordPress interface or relying on someone else to host images for you.
However, to make use of this you need to tell the web server not to allow wordpress to rewrite urls if they start with /images.
Part 2: Disable URL rewrites on /images
- Open your root sites .htaccess file for editing
- Log into cpanel
- Open the File Manager
- Select /public_html/ from the left menubar
- Find .htaccess in the display on the right.
- Check the box next to .htaccess
- Select "Edit" from the top menu.
- If a "Text Editor" warning box comes up, select "Edit"
- Add a rewrite rule to disable rewriting /images and its subdirectories
- If .htaccess currently contains only a section which starts with #BEGIN WordPress and ends with #END WordPress:
- Create a new line before the #BEGIN WordPress block
- Place your cursor at the start of the #BEGIN WordPress line.
- Press enter on your keyboard to move it down a line.
- Move your cursor to the beginning of the new line you created.
- Add your new rewrite rule to prevent rewriting /images
- WARNING:These are case sensitive! Enter exactly as shown.
- Type the following lines in (or copy them) one per line:
- <IfModule mod_rewrite.c>
- RewriteEngine On
- RewriteBase /
- RewriteRule ^images/.*$ – [L]
- </IfModule>
- Select "Save Changes" to save your changes
- If .htaccess contains other information:
- Look for a line which reads <IfModule mod_rewrite.c>
- This should not have #BEGIN WordPress above it!
- Look for the following two lines inside of that block:
- RewriteEngine On
- RewriteBase /
- If you find them, add the following line somewhere after them
- RewriteRule ^images/.*$ – [L]
- IMPORTANT
- The above RewriteRule line should be within <IfModule mod_rewrite.c> </IfModule> tags
- Save your changes
- Select "Save Changes" just above the file screen
- Copy the text from the box above
- Click in the box
- Select "Edit" → "Select All" from the file menu.
- Select "Edit" → "Copy" from the file menu.
- Log into WordPress
- Add the copied text to the end of your CSS Inserts
- Select "Appearance" → "Atahualpa Theme Options" from the wordpress admin menu.
- Select "HTML/CSS Inserts" from under the Atahualpa Theme Options header on the right.
- Scroll down and locate the "CSS Inserts" box.
- Place your cursor in the last line of the box.
- If needed, create a new line by placing your cursor at the end of the last line and pressing the Enter key on your keyboard.
- Select "Edit" → "Paste" from the file menu.
- Select "Save Changes" from the bottom of the page to save your changes.
- Disable the Right Sidebar on single post pages
- To do so:
- Log into WordPress.
- Select "Appearance" → "Atahualpa Theme Options".
- Select "Sidebars" under the Atahualpa Theme Options header.
- In the "Right Sidebar: Display on" section, uncheck "Single Posts"
- Save your changes
- Download the following file:
- You may need to right click them and select "Save as" or "Save Target As"
- atahualpa-product-showcase-one.zip
- Updated 2009-07-08 – fixed minor errors to home.php
- Extract product-showcase-one.zip
- See Windows Zip Extraction Instructions for help extracting this file.
- Upload these files to the atahualpa theme directory on your site
- It should be something like /public_html/wp-content/themes/atahualpa/
- See my article on how to upload files with FTP for instructions if needed.
- Opening a file in the WordPress theme editor
- Log in to wordpress
- Select "Appearance" → "Editor" from the wordpress menu
- Once it loads, locate the file you want to edit on the right side of the editor
- Select the file to load it.
- That you ship worldwide
- That you combine shipping
- Buy so much and get a discount
- Create a text file for your offer and save it as a php file.
- For example: myspecialoffer.php
- Upload the file to your atahualpa theme folder
- Normally public_html/wp-content/themes/atahualpa/
- Set the pws-Inline-Offer-One metadata value to the name of your uploaded file.
- For example: pws-Inline-Offer-One → myspecialoffer.php
- Provide special offers to your customers
- Link to related products that you offer
- Provide short pieces of valuable information to customers
- Link to relevant posts about the product you are showcasing
- Create a new post
- Select "Posts" → "Add New" from the wordpress menu
- Enter your showcases information
- Enter a name for your product showcase.
- Enter the description for your product showcase.
- Select tags and categories for your product showcase.
- Setup your metakeywords and meta description in the Platinum SEO section.
- Add the product showcase metadata pieces
- To add a new metadata item:
- Locate the "Add new custom field" box
- Select "Enter New"
- You will see the select box change to an entry box
- Enter the name for your meta data
- This should be one of the names shown in the table below.
- Enter a value for the meta data
- This should be the value noted in the table below.
- Select "Add Custom Field"
- This will add your metadata to the system.
- You must specify a pws-Item-Store-Link
- Posts without this meta data set will display as normal posts.
- Set pws-Image-Single
- If not set, no image will be displayed on the showcase.
- This can be a full URL
- If you setup /images/products and placed the image in there, this can consist of just the filename.
- Set pws-Image-Thumb
- If not set, no thumbnail will be displayed in archive pages.
- This can be a full URL or the image name (if in /images/products/ )
- Try not to make your images too large.
- If they are too wide, they will crunch up the top right box.
- If they are too tall, they will push your content below the page fold.
- If you really want a big image, consider making a custom special offer box, linking to a largish picture, and setting pws-Inline-Offer-One (or Two) to display it.
- Make sure that the following plugins are setup and configured:
- Recent Posts Plugin
- Post Plugin Library
- Configure the Recent Posts plugin to allow output in content:
- Select "Settings" → "Recent Posts"
- Select "Placement" under the Recent Posts heading
- Set "Output in content:" to yes
- Select "Save Placement Settings
- pws-Category-Name
- This will display the category name on the product showcase.
- pws-Category-Store-Link
- This will turn the category name into a link to that category on your store.
- pws-Category-Site-Link
- This will turn the category name into a link to your category showcase page if no category store link was set or an extra link next to the store link if it was set.
- Available box and inline offer metadata names:
- pws-Inline-Offer-One
- pws-Inline-Offer-Two
- pws-Left-Box-One
- pws-Left-Box-Two
- pws-Left-Box-Three
- Showing their default content.
- To show default data, enter the number 1 into the value box and save it.
- Showing built in custom boxes
- Set the value to ps-leftbox-related-products.php to display related products
- Set the value to ps-leftbox-special-offer-default.php to display the content of the default special offer if you set it up.
- Showing your own custom boxes
- Set the value to the name of the file you uploaded with your special offer.
Once you are done doing this, load your site and make sure that it still loads properly. If it does not, then undo the changes you made to .htaccess by editing it again and removing what you added.
If everything looks good, you now have a place to put images that you can reference directly with links like http://yourdomain/images/this.gif or http://yourdomain/images/products/that.gif
Part 3: Add necessary CSS styles to Atahualpa
Before creating a product showcase, it is good to add the CSS entries that it will use. This way your product showcase will display properly as soon as it is added.
The styles to be added can be copied from the box immediately below:
Part 4: Change Atahualpa Settings
I recommend doing the following if you are going to use this product showcase:
Part 5: Add Files to Your Atahualpa Theme
Below are links to the various files that are needed by this product showcase modification.
Note: These files are intended for the Atahualpa theme version 3.2.
They will need modification if used with other themes or newer versions of Atahualpa!
How this modification works
By default, Atahualpa uses only index.php to display pages.
WordPress uses a hierarchy to decide what files to use when displaying particular types of items.
Because of this, this theme simply overrides default functionality for the display of single posts and archives by adding single.php and archive.php files to your existing atahualpa theme.
Since this makes no changes to existing Atahualpa files, you can disable this functionality by simply removing the added files.
Adding the product showcase files
Once the files are uploaded, you will want to make a few edits to them before creating a product showcase post.
Part 6: Editing product showcase files
Each of the files above, with the exception of single.php and archive.php are intended to be used in creating sections of product showcases.
To make them specific to your store and site, you will need to edit at least some of them.
You can use the WordPress theme editor to edit them once they are uploaded.
Accepted Payment Types
The file ps-accepted-payments.php is used to display the accepted payments block seen in the product showcase at the top if this page.
If you offer non-standard payment methods, you might consider creating posts about them and making their names into links to your post.
If you do affiliate sales, you might also make links to any online payment methods as affiliate links.
Editing ps-accepted-payments.php
This file contains your list of accepted payments in html format.
You can add anything to it that you could add to normal html.
Update it to reflect the methods of payments you accept then save your changes.
Contact Us Link
This file contains the Contact Us link that is displayed in the line immediately underneath of the product title.
You can make it a link to wherever you want, but I recommend linking either to the contact page on your site or, if your store has one, the contact page on your store.
Editing ps-contact-link.php
Update the url in it to be that of your contact page then save your changes.
Inline Offers, Generally
Inline special offers are displayed in the top section underneath of Accepted Payments.
While they are meant to give customers small pieces of textual information or display offers to them, they can be used to do just about anything…videos, widgets, the sky is the limit. If you can do it with html and javascript, you can do it in these boxes.
To seperate lines nicely, don’t forget to use <br /> if you want them close together or <p<information</p> if you want them a bit further apart.
Inline Offer One
Editing ps-inline-offer-one.php
The contents of this file are displayed when you set the post meta data item pws-Inline-Offer-One to the value 1.
If applicable, I recommend placing the following types of information in this box:
Inline Offer Two
Editing ps-inline-offer-two.php
The contents of this file are displayed when you set the post meta data item pws-Inline-Offer-Two to the value 1.
By default, this is placed below ps-inline-offer-one.
You might use this box to link to a manual on using the offered product, display video thumbnails, or anything else you want.
Custom Inline Offers
Although each product showcase can only display two inline offers each…which can be shared between products, you can create your own special offers and display them by doing the following:
Special Offer Boxes, Generally
Special offer boxes are displayed to the left side of the content in product showcases.
You can set up to three of them per product.
These boxes are meant to:
Of course, you can use them for whatever you want…displaying testimonials, placing videos or affiliate offers, etc. If you can do it with html and javascript, you can place it in a special offers box.
Please Note: Because these are created via included files, they are shared between products which specify them. If you want custom information relevant to a particular product, check Custom Special Offers below.
Special Offer One
Editing ps-leftbox-one.php
The contents of this file are displayed when you set pws-Left-Box-One to the value 1
By default, it uses the Recent Posts plugin to display product showcases in the same category as the current product showcase.
You can change this to display whatever you want.
Special Offer Two
Editing ps-leftbox-two.php
The contents of this file are displayed when you set pws-Left-Box-Two to the value 1
By default, it is setup to display special offers.
Edit it to display some of your relevant special offers or anything else you want.
Special Offer Three
Editing ps-leftbox-three.php
The contents of this file are displayed when you set pws-Left-Box-Three to the value 1
By default, it is setup for providing information to potential customers.
Feel free to change it to anything you want.
Custom Special Offers
Like inline offers, you can create custom special offers and set products to display them.
This is very useful when you have an offer which applies only to some products (or even an individual product).
Creating custom special offers is just like creating custom inline offers, except you set the pws-Left-Box-One/Two/Three metadata to the name of your custom offr file instead of setting pws-Inline-Offer-One/Two to it.
Now that you have everything setup, it is time to create a product showcase.
Creating a Product Showcase
Your first product showcase will take a little longer to setup than future product showcases as you will be creating metadata while you do so.
| Meta Data Name | Meta Data Value |
|---|---|
| pws-Item-Store-Link | The full URL to this item in your store. |
| pws-Image-Single | The full URL to the image to show on your product showcase The name of the image if stored in /images/products/ on your server |
| pws-Image-Thumb | The full URL to the thumbnail to display on archive pages The name of the thumbnail if stored in /images/products/ on your server |
| pws-Category-Name | The name of this products main category |
| pws-Category-Store-Link | The full URL to the category that this item is in on your store |
| pws-Category-Site-Link | The full URL to your category showcase page for this product |
| pws-Inline-Offer-One | 1 |
| pws-Inline-Offer-Two | 1 |
| pws-Left-Box-One | 1 |
| pws-Left-Box-Two | 1 |
| pws-Left-Box-Three | 1 |
Once finished, remove any entries that you do not want to show for this product showcase to start with. You only entered them to get the meta data names registered with the wordpress system so that you can select them when creating future product showcases.
Absolute Requirements for Proper Display
For the system to know that something is a product showcase:
Additionally, if you want your showcase to look right:
Recommended requirements
In addition to the absolute requirements above, you really should set the following metadata for product showcases as well:
Optional items
If you want inline options or special offers displayed, be sure to specify them.
