How to sell your products or services
The first thing to decide is how you'll sell your products. Envato Sites has two integrations to help you with this PayPal "Buy Now" buttons and Gumroad's payment buttons.
You can have both PayPal and Gumroad buttons on one website.
We'll show you how to add the payment buttons later in this guide.
Adding a block to showcase Products or Services
Once you know which type of buttons you want to add to your website, you can set up a Products/Services section. To do this, you'll add a new block to your site or utilise a block that came with your template.
Some website building blocks have been specifically designed to display products or services but there are also a number of general purpose blocks that can work well.
Showcasing a Featured Item/Service
Add the IMAGE OR VIDEO WITH TEXT block to showcase a featured product or service.
Many templates come with this block already. By default it looks like this:
But by adding your own content, adjusting the layout and editing the colours you could have this:
Creating a Services showcase
The TEXT WITH ICONS block allows you to fine tune the size of the featured media. It's great for icons but you can also upload photos or other images of any size or shape.
When you add the block to your site it will look something like this:
It's easy to customize the TEXT WITH ICONS block to give it a brand new look and feel. Here's an example:
Showcasing Products/Services in a gallery (with buttons)
When first added to your site the IMAGES OR VIDEOS WITH TEXT block first looks like this:
You can completely change the look by selecting your own colours, background images, text alignment and image sizes. It could look like this:
Customizing a Products or Services block
In this example, I'll start off with the default IMAGES OR VIDEO WITH TEXT block and turn it into a products showcase for my bike shop:
(Click here to identify the type of website building blocks that appear on your template.)
First, hover over the block and select Edit. A blue highlight will appear around the block and a toolbar will open to the right:
Add a new heading, subheading and body (if required):
Next, scroll down the toolbar to location the section called "Gallery items". Click Edit to update any of the default images here, or click Add new image to add more images to the block.
Click Choose a new image:
We recommend replacing the demonstration images with your own files or photos sourced from Unsplash.
When the upload is complete, click the blue back arrow at the top of the toolbar:
Add some Image alt text, a heading, subheading and body (description) to the Gallery Item:
If required, you can add buttons to each item which will allow visitors to make a purchase. Click the +Add new button hyperlink at the bottom of this toolbar section:
Click Edit to modify the new button:
Repeat these instructions for all the products or services you'd like to add to the block.
To add more than three items to the gallery click +Add new image
Next, jump to the Settings toolbar to change the styling of the Gallery block:
The first thing I want to do is make all the images appear the same size. This can be done by selecting an option from the drop down menu under "Image shape:
Select different colors for the block background or text background:
Or select "Image" as the Background type to choose a photo as the block background:
Click Edit image to upload a new file:
Once the upload is complete, click Back to return to the main Settings menu. Here you can add a color overlay to the background image to help make your heading stand out:
Once the content and design of the block is complete you're able to reposition it on the page by using the arrows in the top left corner:
Click Preview in the main menu to see what the block will look like to site visitors: