Buy Button and Product Widget

If you have a premium plan with e-commerce, you can add a Buy button or Product widget to any of your Pagecloud pages. You may want to use these to create a custom product page, listing of products, or even add a product or two to your social link page.

Buy button, a buy button is a button connected to a product or service in your store. You may want to use this button when making a custom product or service listing on your site. When a visitor clicks on the button it will add the item to their cart.

Product widget, a product widget is a full product card connected to a product or service in your store. You can use this widget on any page, in fact you could have multiples on a page. When a visitor clicks on the add to cart button it will add the item to their cart.

Adding a Buy button or Product widget

In the editor, open the page you would like to add the widget too. 

• Click on the E-commerce menu located in the left sidebar.
• Look for the section called Store widgets
• Here you can drag and drop the Buy button and Product widget onto your page.

Great, the widget should now be on your page. Onto the next step.

Associate a product with the widget

Now that you've added the widget you need to associate it with your product. 

• Select the widget on the page
• Select the E-commerce tab in the Editing menu
• You will notice that we have already connected your first product to your widget. Click Change product to search for the product you would like to associate.
• Here you can search for the product name or SKU should you know that number. Go ahead and do that now.
• Select the product you would like to associate.
• You can change the associated product at any time.

Let's move onto configuring your widget.

Configuring your widget

With your Buy button or Product widget selected you can configure the layout and details you would like to display.

Layout

You have two choices with Layout, you can opt to show a Product card or just the Buy button. Each selection will enable and disable product details.

Product details

There are a variety of Product details that you can enable, disable and sort to fit your needs. They are as follows:

• Product image
• Product name
• Product options. This will display product options if available.
• Add to Bag button options
  • Display the product price. Displays the price in the buy now button
  • Display product quantity will display a numeric quantity filed above the button so customers can add more than one item to their cart.
• Price

Styling your widget

Now that you have the right information displayed in your widget you can style and size your widget to your liking.

To style your widget:

• First select the widget on your page
• Select the Style tab in the Editing menu
• You know have the option to style the following:
  • Product card, this is the container that your button and product information is contained within. It can have a background, outline, padding and more just like Auto groups.
  • Primary button, this is the Buy button and can be styled just like other buttons on your site.
• You can now use the style controls you are already familiar with.