How to Move the Add to Cart Icon Below Thumbnails

By default, SmugMug places the add to cart icon in the corner of photo thumbnails. Moving it below the thumbnails can make it more visible and easier to click, especially on touch devices.

CSS code

/* Move add to cart icon below the thumbnail */
.sm-tile-content {
    overflow: visible;
}

.sm-button.sm-gallery-selection-button {
    top: auto;
    bottom: -50px;
}

How it works

• overflow: visible — Allows the button to appear outside the thumbnail's boundary
• top: auto — Removes the default top positioning
• bottom: -50px — Places the button 50 pixels below the thumbnail

Before you start

If you're using a gallery style with minimal spacing between photos, you'll need to add padding around your thumbnails to make room for the button.

To adjust thumbnail spacing:

1. Click Customize on your gallery
2. Select the gallery content block
3. Increase the Gutter or Padding values

Customization options

Adjust the button position

Change the bottom value to fine-tune placement:

bottom: -40px; /* Closer to thumbnail */
bottom: -60px; /* Further from thumbnail */

Center the button

Add horizontal centering for a balanced look:

.sm-button.sm-gallery-selection-button {
    top: auto;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

Style the button

Make the button more prominent:

.sm-button.sm-gallery-selection-button {
    top: auto;
    bottom: -50px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    padding: 8px 16px;
}

Where to add the code

Add a CSS content block to the Entire Site section or All Galleries section depending on where you want the change to apply.