Integrating Store Widgets with WordPress Websites & Blogs

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 e-commerce 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.

Step By Step Instructions

To add Store Widgets to a WordPress website or blog, the seller will need a basic understanding of HTML and access to the WordPress dashboard (and possibly to the header.php file, depending on the theme being used). *Note – Store Widgets are not designed for WordPress.com hosted websites/blogs because access to the header.php file is prohibited for security reasons. For questions on WordPress integration, contact our Content Guru™ Support Team at 865-686-5713 or submit a Support Ticket Request.

Option 1 – Direct Page/Post Integration

This option is only valid for themes that allow JavaScript to be permitted within a page or post of the blog. Most themes allow this; however, if not, choose Option 2 below.

Step 1 – Open the page or post where you want to add the Store Widget. Next, find the “Text Tab” at the top right of the screen. Upon opening the Text View of the page, find the exact location within the page where you want the button to reside and paste the button code from the Content Shelf Button Wizard.

Adding Store Widget Code to a WordPress Page or Post

Step 2 – You can now preview the page prior to pushing it live. If adjustments need to be made, go ahead and make the changes until the page looks exactly how you want it. *Note – It may be required to clear the browser cache to view the updated version/page.  Consult the browser help section for clearing cache instructions. When the page or post is ready to go live, publish it.  At this point, the Store Widget buttons will appear live on your site as seen below:

WordPress Page or Post showing Store Widget Code Output

Option 2 – Alternate WordPress Integration

This option is valid for any theme, but requires a bit more knowledge than Option 1 above. With this option, the store owner/website manager will be splitting up the Store Widget Code.

Step 1 – Find access to the header.php file. Access can be found within the dashboard and is most likely located under Appearance > Theme Options > Scripts (as shown below). Once you find this page within the WordPress dashboard, copy and paste the Store Widget JavaScript Only Code. The JavaScript Only of the Store Widget Code should be recognizable.

Adding Store Widget Code to a WordPress Theme Option (part 1)

Step 2 – Return to the page/post and find the “Text Tab” at the top right of the screen. Upon opening the Text View of the page, find the location in the page where you want the button to reside and paste the Store Widget Button Only code.

Adding Store Widget Code to a WordPress Theme Option (part 2)

Step 3 – You can now preview the page prior to pushing it live. If adjustments need to be made, go ahead and make them until the page looks exactly how you want it. *Note – It may be required to clear the browser cache to view the updated version/page.  Consult the browser help section for clearing cache instructions. When the page or post is ready go live, publish it.  At this point, the Store Widget buttons will appear live on your site.