How to Change Buy Button Labels on SmugMug

SmugMug's default button labels like "Buy Photos" and "Buy Photo Package" don't always match your business model. If you sell exclusively digital downloads or want more branded language, you can replace these labels with custom text using CSS.

Change the "Buy Photos" button

The "Buy Photos" button appears at the top of galleries. Here's how to replace it with custom text like "Shop Now":

/* Change the BUY PHOTOS button label */
.sm-gallery-cover-buy-button:after {
    content: 'Shop Now';
}

.sm-gallery-cover-buy-button .sm-button-label {
    display: none;
}

Change the "Buy Photo Package" button

The "Buy Photo Package" button appears in the lightbox when viewing individual photos. To replace it:

/* Change the BUY PHOTO PACKAGE button label */
.sm-com-lb-packages-button span {
    font-size: 0;
}

.sm-com-lb-packages-button span::before {
    content: "BUY DIGITAL PACKAGE";
    font-size: 14px;
}

How the CSS technique works

Both snippets use the same approach:

1. Hide the original text — Either set display: none or font-size: 0 to make the original label invisible
2. Add custom text — Use the ::before or ::after pseudo-element with content to insert your new label
3. Restore visibility — Set the font size back to a readable value for the new text

Where to add the code

Add a CSS content block to the Entire Site section of your website:

1. Click Customize on your SmugMug site
2. Select Entire Site in the right panel
3. Add a CSS content block
4. Paste the code and publish your changes

Customization options

Change the label text

Replace the text inside the quotes:

content: 'Your Custom Label';

Adjust the font size

Modify the font-size value to match your theme:

font-size: 16px; /* Larger text */
font-size: 12px; /* Smaller text */