Found what you have been looking for?

Search
Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

Adding a label to the BUY icon overlaying image thumbnail in a gallery

In this tutorial I am going to show you how to add a text label to the buy icon, which appears at the bottom of thumbnails – if your gallery is set to:

  • collage landscape;
  • collage portrait;
  • thumbnail;

CSS Code

Open one of your galleries and add a CSS content block anywhere on your gallery page → add this code to it:

/*Adding text label which will appear after the BUY icon */
.sm-user-ui .sm-fonticon-CartAdd:after {
    content: " BUY ME"; /*You can change the label to anything that you like*/
    font-size: 14px; /*You can change the text size here*/
}
/*This will add required space for your text label*/
.sm-user-ui .sm-fonticon-CartAdd {
    width: auto;
}

TIP!

You can add the CSS content block with the above code to the ENTIRE SITE section of your site, to add the label to all galleries and pages on your site.

buy, label, thumbnails


Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.