Integrating Content Shelf Store Widgets with Regular HTML Websites

Tiffany WhiteNo CommentsSelling Online

Widget… the word is used more and more here lately, but what exactly is a widget?

By definition, a widget is an application, or a component of an interface, that enables a user to perform a function or access a service.

So, why would it be important for Content Shelf, ecommerce software that strives to make selling digital products easier for the average user, to implement widgets as a feature?

Content Shelf Store Widgets are simple interfaces that enable ecommerce functionality on a website or blog. In other words, by adding a Store Widget to a website or blog, sellers of digital content will be creating an online storefront where visitors can purchase directly from them.

Content Shelf Store Widgets include: “Add to Cart,” “View Cart,” and/or “View a Sample” buttons.

Content Shelf Store Widgets are easy to use.  By simply copying and pasting a snippet of code onto a seller’s website, page, or blog transforms the site into a complete ecommerce solution, allowing site visitors to purchase and pay the seller directly.

We have already shared how our Store Widgets work with WordPress and Weebly Websites…

Today, we want to talk about integrating our Content Shelf Store Widgets with regular HTML websites. 

Step By Step Instructions

To add Store Widgets to a website, users will need a basic understanding of HTML and an HTML Editor. Choices for an HTML Editor include:

  • File Manger/Page Editor, included with most popular web hosting accounts
  • Popular 3rd Party Software (Edit Plus, Text Pad, Adobe Dreamweaver)
  • Content Shelf Content Guru Integration Services

For questions on HTML Integration, contact our Contact Guru™ Support Team at 865-686-5713 or through a Support Ticket Request.

Step 1 – Open the page where you want to add the Store Widgets and locate the exact location within the page where you want the button to reside.  Copy the button code from the Content Shelf Button Wizard and paste it to the website page.

The HTML page will look similar to this:

Example HTML with Store Widget Code

Step 2 – Most HTML Editors have a feature that enables users to preview the page prior to saving it to a live environment. You’ll want to do this in order to make sure the button is in the correct place.

Step 3 – Once you have previewed and approved the page, simply publish it (at which point you’ll see the Store Widget button live on the site like below).

Note – The code above is the output seen below.

Sample HTML Output