How to Enable and Create Widgets within Your Store

Widgets are powerful tools that allow you to add small snippets of code to your website. Widgets also allow you to add pre-built boxes to your site for things such as Search, Categories, Account Profile, etc. 

Applies to Version(s): 3.7.15r2 - 3.8.0 series

Widgets can be added to both the right and left side of your store using our Cart Design feature. 

Once logged into your cart, on the left-hand panel, you will want to click on Design as this will take you to your Cart Designer. Once you're in the Cart Designer, you will see Widgets at the bottom.

In this image you can see all the Widgets listed along the bottom of the Cart Designer:

You will see two options; Show Left Column and Show Right Column. These options allow you to place widgets to the left or right portion of the products. In the sample image, the Widget is displayed on the left column:

How to Create Your Own Widgets

You can add your own Widgets as well as it allows you to add your own custom HTML. The common reasons why people create their own widget are for trust logos, images, promotions, etc.

To create a Widget, follow the steps above to get to the Widgets section of Cart Designer, and click Create New Widget.

You will need to set the following: 

• Widget Title- You will give the box a title. This will show up on the Widget when you drag in, unless you remove the HTML for the title. You can see that the Widget ID is automatically created base on your title. You can customize this if you decide to.
• Widget HTML- You can enter here what will go into the box of the Widget. It does require HTML knowledge, and unfortunately, no WYSIWYG is provided. You can learn basic HTML about adding images and links at w3schools.com.

How to Remove the Title From Your Widget

In both pre-made and custom Widgets, you can remove the Widget title. To do so, just right-click on the Widget in Cart Designer> click Edit Source Code> remove the following line of code;

<h4 class="title {class file=$smarty.template editable=true}">{$msg.headers.headerCategories}</h4>

This should be line 2. Click Save.

You can always restore it back, by right-clicking > choosing Edit Source Code > then select Restore.

Links to Related Articles

Adding a Rapid SSL Logo To Your Site

If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.