Integrating Content Shelf Store Widgets with Weebly Websites

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.

Last week, we shared how our Store Widgets work with WordPress.

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

Step By Step Instructions

To add Store Widgets to a Weebly website, a seller/user will need a basic understanding of HTML and access to the Weebly dashboard. For questions on Weebly Integration, contact our Content Guru Tech™ Support Team at 865-686-5713 or submit a Support Ticket Request.

Step 1 – After logging in to the Weebly account, locate the page editor.  Once inside the page editor, navigate to the “Build Tab” at the top of the page. Next, choose the page where you want to add the Store Widgets. Once on the page and in the specific location within the page for the widgets, choose the “Embed Code” option from the left options menu. Clicking this will add an embed component to the page. Copy the button code from the Content Shelf Button Wizard and paste it into the embed code component. The page will look similar to this:

Weebly Embed Code Screenshot

Step 2 – One of Weebly’s nicest features is that as soon as you click outside of the embed code component, you’ll find that your page is already in preview mode. From here, you can view and make adjustments until you are satisfied. Once ready, publish your work live. Depending on which widgets you select to use, the page can look like this:

Weebly Embed Code Output