Sell services on your SmugMug website

In this tutorial I will show you how to create a very simple widget, which will allow you to sell your services or even non-SmugMug products on your SmugMug website. This tutorial uses PayPal payment gateway to pay for your services/goods – currently there is not possible to use a different payment gateway. However, if you find something better than PayPal – that will work on SmugMug – let me know. Once a customer clicks on the BUY NOW button – they will be redirected to PayPal to pay for the chosen service.

Test the end result here

Generating PayPal buttons

First, you will need to generate all of the PayPal buttons that you would like to display on your page. Open this link and choose the second option:

Generate PayPal buttons code

This will open a new page, where you will be able to modify the button – I have set up mine like this:

Click the CREATE BUTTON button and copy the code that has been generated for you – you can paste it into a text editor so you can use it once we have moved to building the widget. My code looks like this:

HTML

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Bronze Photo Session">
<input type="hidden" name="amount" value="560.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

HTML

Let me explain which parts of the code mean what.

The <h3 class="h3">Silver Photo Session</h3> is the TITLE that will appear at the top of each of the blurbs – change it to anything you like.

The <h2 class="price">$ 760</h2> is the PRICE that will appear below the TITLE. Change it to the same value that you have entered when you generated your PayPal button.

The <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. </p> This is the paragraph that appears below the price. You can use it to describe what you are selling.

The <! -- Remove this line and replace it with your PayPal code - item 2 --> this is a HTML comment which you will need to delete { the whole line } and replace it with the button code that you generated on PayPal.

To give you an example – this is how my code looks with the PayPal button added for the first blurb:

HTML

You need to edit the rest of the HTML code for the remaining 2 blurbs – just follow the exact steps from the first part.

CSS Code

This is the code that will make your blurb appear the way you want. The CSS code needs to be pasted to the CSS tab of the HTML content block that you have added to your SmugMug page.

CSS

/*This part controlls the grid - I recommend to not make changes to this unless you know what you are doing*/
.container {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

/*This part controlls the three blurbs within the main container*/
.pricing-container-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: none;
  margin: 10px;
  padding: 10%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 10px;
  border: 1px solid #191919; /*You can change the border colour that surrounds each blurb*/
  background-color: #0c0c0c; /*You can change the background colour of your blurbs*/
  -o-object-fit: fill;
  object-fit: fill;
}

/*This controlls how the blurb title looks like*/
.h3 {
  margin-bottom: 0px;
  color: #fff;
  text-align: center;
  font-weight: 700;
}

/*This controlls how the price text looks like*/
.price {
  margin-top: 30px;
  margin-bottom: 30px;
  color: orange;
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 700;
  text-align: center;
}

/*This controlls how the item description looks like*/
.paragraph {
  margin-bottom: 28px;
  color: #b9b9b9;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

/*This code is making the PayPal button appear in the center of the blurb*/
.html-embed {
  text-align: center;
}

/*The remaining text is to make all three blurbs behave nicely on mobile.*/
@media screen and (max-width: 991px) {
  .container {
    margin-right: 10px;
    margin-left: 10px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .container {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

CSS

The CSS code has comments, which will help you understand the code and edit it to your needs.

EXTRA! White version

I have also made a ready to use CSS code for all of you who have white websites. This code will make all blurbs white with dark text.

CSS

/*This part controlls the grid - I recommend to not make changes to this unless you know what you are doing*/
.container {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

/*This part controlls the three blurbs within the main container*/
.pricing-container-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: none;
  margin: 10px;
  padding: 10%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 10px;
  border: 1px solid #dfdfdf; /*You can change the border colour that surrounds each blurb*/
  background-color: #ececec; /*You can change the background colour of your blurbs*/
  -o-object-fit: fill;
  object-fit: fill;
}

/*This controlls how the blurb title looks like*/
.h3 {
  margin-bottom: 0px;
  color: rgb(5, 5, 5);
  text-align: center;
  font-weight: 700;
}

/*This controlls how the price text looks like*/
.price {
  margin-top: 30px;
  margin-bottom: 30px;
  color: orange;
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 700;
  text-align: center;
}

/*This controlls how the item description looks like*/
.paragraph {
  margin-bottom: 28px;
  color: #141414;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

/*This code is making the PayPal button appear in the center of the blurb*/
.html-embed {
  text-align: center;
}

/*The remaining text is to make all three blurbs behave nicely on mobile.*/
@media screen and (max-width: 991px) {
  .container {
    margin-right: 10px;
    margin-left: 10px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .container {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

CSS

Enjoy!

Full-screen custom slideshow for SmugMug, with a preloader
A while ago I have added a custom slideshow to my homepage – www.photom.me and many of …
Read more

Comments (4)

Charles “Duck” Unitas
19th September 2021 at 20:10
Reply
Thanks for sharing this. I love the convenience of Smugmug for image handling but their website features are grossly lacking functionality. Knowing how to modify page content with custom code is so beneficial. I use custom paypal buttons on my site but your look nicer. Time to upgrade my look 🙂
- Tomasz Nowicki
  19th September 2021 at 20:11
  Reply
  I’m glad I could help 😉
Liz Baker
26th October 2021 at 21:53
Reply
Excellent piece of customisation! Any ideas on how to integrate this with the new PayPal Checkout smart buttons?
- Tomasz Nowicki
  27th October 2021 at 09:50
  Reply
  This will not work with PayPal’s Smart Buttons – they require JavaScript, which is not supported on SmugMug.

Support me

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.

Buy me a coffee

Are you still looking for something?

Sell services on your SmugMug website

Generating PayPal buttons

CSS Code

EXTRA! White version

Related articles

Full-screen custom slideshow for SmugMug, with a preloader

Comments (4)

Leave a Reply Cancel reply

Support me

Categories