|
The Shift4Shop Buy Button makes it easy to sell your products on any website that 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 hand 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 hand 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.
Note:
You'll typically be able to place and use the script on any site that you control, which will allow you to add your own HTML and Javascript coding to it.
It is important to note that the widget will use special scripting to perform some of its actions, and this may limit the sites you are able to paste the script into. For example, certain social media sites may not allow the functionality needed to embed the widget on a social post.
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.
|