WP eStore and NextGen Gallery Integration to Create Digital Photo Store (Method 1)

WordPress eStore and WordPress Paypal Shopping Cart Plugins can be integrated with the NextGen Gallery Plugin to create a Digital photo store similar to the screenshot shown below (please see the integration steps below to find out the full details):

The images were resized to 800×600 resolution using the NextGen Gallery resize utility. An watermark was also applied to the image using the NextGen Gallery ‘Effect’ option to prevent stealing. Once the purchase is complete the encrypted download link for the original image stored in a separate location (1920×1200 resolution and no watermark) is emailed to the buyer.

Just to clarify… You don’t necessarily have to sell digital photos to use the gallery. You could be selling anything and still use the Gallery as a means of displaying the products where each thumbnail is the icon of the product you are selling.

How to Integrate NextGen Gallery and WordPress eStore Plugins

There are two ways to integrate NextGen Gallery with the WP eStore plugin:

Method 1: Create/Configure every product separately
Method 2: Configure one product then use that as a template

This page explains the first integration method. Please see the following link for the 2nd integration method:

• NextGen Gallery Alternative Integration Method (Method 2)

What Plugins do You Need for This Integration?

You will need the following 3 plugins for this:

• WordPress eStore plugin
• NextGen Gallary Plugin
• eStore NextGen Gallery Addon Plugin

This guide assumes that you have used NextGen Gallery Plugin and know how to use it. If you don’t know how to use NextGen Gallery then I suggest you read the ‘Readme.txt’ file that comes with the NexGen Gallery plugin or try the NextGen Gallery forum.

The Integration Steps

Step1. Install the eStore NextGen Gallery Addon

How to download and install the Free eStore NextGen Gallery Addon is explained here.

Step 2. Displaying the Gallery

Use the following shortcode to display the NextGen Gallery in a post or page:

[nggallery id=1 template=wp-eStore]

Given the nextgen gallery id is 1. You will need to change “1” to whatever your NextGen Gallery ID is.

Using the ‘template=wp-eStore’ option will show captions underneath each thumbnail image where you can display the ‘Add to Cart’ button and a little bit of other details/description of the image.

Note: The “S” in “wp-eStore” is capitalized.

Step 3. Adding the ‘Add to Cart’ Buttons below the Image Thumbnails

1) First make an eStore product for the NextGen Gallery image in question (if you haven’t done so already). You will need to make a product for each of your gallery images.

2) Go to ‘Manage Gallery‘ from the NextGen Gallery settings menu and choose the Gallery that you want to turn into a shop.

3) Now in the ‘Alt & Title Text / Description‘ field of every image, enter the Image details (name, price etc) and the shortcode for the Add to Cart button of that image.

[wp_eStore_add_to_cart id=4]

It should look similar to the following example:

In the above example the eStore Product id of the Photo is 4 (the product ID can be found in the “Manage Products” menu of eStore). I have configured this product in WP eStore already. "<br />" is an HTML code to insert a line break so the name, price and the buy button doesn’t appear all on the same line.

4) Do the same for all the images in the gallery.

5) Save the Changes to the Gallery and Now your Gallery will look similar to the demo shown at the start of this Page.

Frequently Asked Questions:

Question 1: Can I use an eStore fancy display inside a NextGen gallery display?

No, the NextGen gallery itself is a way of displaying your products. So you cannot insert a pre-configured eStore’s fancy display inside a NextGen gallery display (they are two different display methods).

The WordPress eStore Plugin can be found in the WordPress eStore Plugin Page. All WP eStore related documentation can be found on the WP eStore Documentation Site.