NextGen Gallery – Stacking More Product Boxes Side by Side

In the sell-photos-from-wordpress-site tutorial you learned how to sell your photos using NextGen Gallery and Simple PayPal Shopping Cart. In this tutorial I will show you how you can stack more product boxes side by side.

The following screenshot displays the products with the Add to Cart button in a NextGen gallery. In this example it created a two columns layout. But you may want to have three or more columns (depending on your design needs).

Setup Steps

Step 1: Create Your Custom Code

The plugin has the following class “ngg-gallery-thumbnail-box” that allows you to customize the displayed thumbnail box. In the following example 30% was added to the width tag so 3 product boxes can stack side by side.

Note: You may have to adjust this value to fit your width.

Custom Style Code:

.ngg-gallery-thumbnail-box {
float: left;
margin-right: 5px;
width: 30%;
}

Step 2: Add Your Custom Code

NextGen plugin has an area that allows you to add custom CSS code.

Go to Gallery -> Other Options -> Styles click on (Show Customize Options) link.

Make sure you save your changes.

The following screenshot displays three images aligned next to each other in the gallery.

In the above example only three columns were created. You can have more columns if you want, just change the width percentage to a smaller number.