Add a PayPal shopping cart to your site

This tool is an extension for Google Chrome which makes it possible to add PayPal "add to cart" or "buy now" buttons to the photos in your galleries. This way, your customers can place their order to you directly through PayPal.

How it works

This extension works by adding the HTML code for PayPal buttons into the captions of each of the photos in your gallery. This causes the PayPal buttons to appear underneath your photos in SmugMug-style galleries, and in the caption section of the lightbox. Please click an example gallery below to see what this looks like.

When your customer adds a photo to their PayPal shopping cart, the caption for the photo (if it had one) will be displayed as the name of the item they're buying, and the "item number" will show a link to the photo they selected. It's a good idea to ensure that most of your photos have captions before adding PayPal buttons, so that your customers can tell which photo is which inside their shopping cart.

Once they've placed their order, you'll receive those photo details in an email from PayPal. Each item number will become a clickable link to take you to the photo that the customer selected.

Note about gallery styles

Since this extension adds the button onto the end of your photo captions, in some gallery styles this can cause the text from the PayPal button to appear on the page instead of the button itself. Please take a look at the example galleries linked in the list below:

SmugMug-style: Recommended. PayPal button appears on the page underneath the image and in the lightbox view.
Journal: Recommended. PayPal button appears on the page underneath the image and in the lightbox view.
Thumbnails: PayPal button appears in the lightbox view. PayPal text from the button appears in the caption when you hover over a photo.
Collage landscape: PayPal button appears in the lightbox view. PayPal text from the button appears in the caption when you hover over a photo.
Collage portrait: Not recommended unless your PayPal button has no dropdown menu attached. PayPal button appears in the lightbox view. PayPal text from the button appears on the page underneath every photo.
Slideshow: Doesn't work as slideshow-style galleries don't display captions, don't use.

Notes about private information

If your photos have no captions

If your photos don't have a caption or title defined, the name of the product in the customer's shopping cart will be set to the filename of the photo, even if the source gallery has the display of filenames disabled. If this isn't acceptable for your application, please let me know and we'll work out a different option.

If your photos are collected from another gallery

If the photos you are selling have been collected from another gallery, please note that the link displayed underneath the photo in the PayPal cart will be a link to the photo in the gallery that you added the buttons to. So if you are collecting your photos from an unlisted gallery into a public one, make sure that you are viewing the public gallery when you add the PayPal buttons. If you were to add them when you were viewing the unlisted gallery, your customers would see the link to the unlisted gallery in their cart, and so would be able to see every photo in that gallery, which might reveal photos that you wanted to keep private.

Take care!

Due to the small possibility of accidentally damaging your photo captions, I recommend that you only apply this to photos that you have backup copies of the captions for (e.g. if you use Lightroom to publish your photos, Lightroom will have a local untouched copy of your captions you could use to fix any mistakes.)

If you are doing anything special with your captions, like multi-paragraph text or captions with embedded HTML code, your captions may not display properly after the PayPal button is added, so please test it out on a couple of photos before you apply it to the entire gallery.

Installation

This feature is provided by the "Unofficial SmugMug extension for Chrome". You must be using the Google Chrome web browser to use this extension to add PayPal buttons to your site (your customers don't need to install the extension). To install the extension, click the button below:

Get from the Chrome webstore

CSS

Add the following code to your theme's CSS to provide styling for the PayPal buttons (from the Customizer, go to the Theme tab, click on the little wrench icon next to your Current Theme, then on the Advanced tab, click Edit next to "Custom CSS"):

.ss-paypal-button .ss-paypal-buy-now-section, 
.ss-paypal-button .ss-paypal-add-to-cart-section, 
.ss-paypal-button .ss-paypal-view-cart-section {
	margin-top:1em;
}
.ss-paypal-button .ss-paypal-buy-now-section h4, .ss-paypal-button .ss-paypal-add-to-cart-section h4 {
	margin-bottom:0.5em;
}
.ss-paypal-button .ss-paypal-product-options li button,
.ss-paypal-button .ss-paypal-product-options li .sm-button {
	margin-left: 1em;
	margin-bottom: 3px;
	margin-top: 3px;    
}
.ss-paypal-button .ss-paypal-product-options li img {
	margin-left: 1em;
	margin-top: 1px;
	vertical-align: middle;
	margin-bottom: 4px;
}
.ss-paypal-button .ss-paypal-product-options li a {
	display: block;
}
.ss-paypal-button .ss-paypal-product-options .ss-paypal-plain-label {
	margin-bottom:0.25em;
}
.ss-paypal-button .ss-paypal-product-options .ss-paypal-plain-label:after {
	display:inline-block;
	margin-left:0.5em;
}
.ss-paypal-button .ss-paypal-add-to-cart-section .ss-paypal-product-options .ss-paypal-plain-label:after {
	content: "[Add to cart]";
}
.ss-paypal-button .ss-paypal-buy-now-section .ss-paypal-product-options .ss-paypal-plain-label:after {
	content: "[Buy now]";
}

Usage

Visit your SmugMug site and log in. Navigate to a photo gallery that you'd like to add PayPal buttons to, and click the "SM" icon on the right side of your browser's address bar. A menu will appear:

The extension will automatically add the PayPal button code to each of the photos that you've selected. If a photo already had a PayPal button on it, that button will be replaced with the new one.

"View cart" button

After generating the HTML code for a "view cart" button on PayPal, you'll need to decide where to put that button on your gallery page.

Next to the gallery title

Enter the customiser for your gallery. If you only want the "view cart" button to appear in some of your galleries, ensure that "just this gallery" is selected at the top right of the page. If it isn't, click the link to "make this gallery custom" so that your changes won't affect your other galleries.

Add an HTML block to the page, and paste the HTML code for the "view cart" button from PayPal in. Drag the HTML block until it appears on the right hand side of the breadcrumb or title for your gallery. Edit the settings for the HTML block and switch to the CSS tab. Enter this CSS code:

form {
	text-align:right;
}

Finally, hover over the HTML block and, on the toolbar which appears, click the ruler icon to enter the Dimensions settings menu. Set the container width for the HTML block to about 13% or so, so that the View Cart button doesn't steal all the room from the title:

In the gallery description

You can add the button code to the description for your gallery (in your gallery settings).

Next to the 'add to cart' button

If you prefer the "view cart" button to appear near the "add to cart" button, you can paste the HTML code for the "view cart" button immediately after the "add to cart" HTML code when you use the extension to add PayPal buttons to your gallery—the extension will then add the View Cart button to every photo's caption along with the Add to Cart buttons for you.

Advanced features

This extension can also be used to add customised links to other sites like Jot Forms that automatically include the details of the selected photo (like the photo title, photo link, etc). Please visit the advanced features section to read more.

Sherlock Photography