How do I Create the Buy Now Button/Widget?

Create the Buy Now Button/Widget

The Shift4Shop Buy Button makes it easy to sell your products on any website which allows you to edit HTML and add JavaScript. Powered by the new Shift4Shop frontend API, with just a few clicks, you can quickly embed products on any website you control. Best of all, customers can quickly checkout using Shift4Shop’s fast, secure checkout process, for a truly powerful and convenient complete shopping experience.

Log into your Shift4Shop Online Store Manager.
Using the left navigation menu, go to Products > Product List.
Locate the product that you'd like to create a button widget for and click on its Action Wheel (located at the far right of the product listing).
Select Create Buy Button to begin creating the widget.

A pop-up window will appear with various settings that allow you to customize the look and feel of the widget. On the right side of the popup, you will see a real-time view of the widget that will update as you change settings.

Your available widget settings are:

Visible Elements
- Product Name
  Mark this checkbox to display the product name on the widget
- Thumbnail
  Mark this checkbox to display the product thumbnail image on the widget
- Price
  Mark this checkbox to display the product price on the widget
- In Stock Message
  If/When the product is in stock, the widget will display the text entered in this field
- Out of Stock Message
  If/When the product is out of stock, the widget will display the text entered in this field
Display
- Button Color
  Use this drop-down selector to choose the color of the Action Item (buy now) button
- Button Text Color
  Use this drop-down selector to choose the color of the Action Item (buy now) font
- Background Color
  Use this drop-down selector to choose the color of the widget's background.
- Text Color
  Use this drop-down selector to choose the color of the overall widget's font.
Button
- Button Action
  Specify what you'd like the button action to do. Your choices are either view cart or go straight to checkout.
- Button Text
  Enter what you'd like the button to say.

When you complete setting up your widget, click on the Generate Code Snippet button at the top right to view and copy the widget coding. This is the coding that you'll paste into the HTML of whatever site you'd like to have the widget appear on.

You will also need to add the following reference to your HTML page to ensure that the proper jquery scripting is loaded along with your buy now button:

<script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write("<script type=\"text/javascript\" src=\"http://[your-store-url]/assets/templates/common-html5/js/jquery.min.js\"></" + "script>"); } </script>

Just be sure to replace [your-store-url] with your Shift4Shop store's URL information and place the above script somewhere after the opening <head> tag of your page's HTML.

Troubleshooting

If the buy now widget does not appear as expected, it may be due to the following:

jQuery script is not present
As mentioned above, the widget requires a specific jquery reference that needs to be added to the page where you are adding the widget. In other words, when the buy now widget is being placed on an external site (i.e., an affiliate's site, your separate site apart from the Shift4Shop store, etc.), the page where you add the widget code also must have the jquery reference mentioned above.
Product is out of stock
The product that the widget is linking to must be in stock for the widget to work properly.
Third-Party Code is conflicting
Since the widget code itself is being placed on an external site, be aware that some sites may have their own scripting that may conflict with the widget code itself. In cases such as this, the only remedy would be to try alternate page locations for the widget.