Basic HTML Widget v1

This is a very simple widget that allows you to add any HTML you like to one of the widget slots in the uStore theme. For example, one of the most basic things that you need to do for every store is to set basic contact information and links to the footer area. This widget provides this ability with the full flexibility to add any valid HTML to the footer.

Watch this video to see how to add widgets to your server and apply them to a store.

After installing, and activating, select a store and customize the theme. In the theme editor, widgets tab, click to add a widget. Turn it on, select the widget and select a slot for it to appear in.

The configuration JSON is very simple with just one parameter "code" which includes the HTML to insert. Remember that the configuration is JSON, so for example, any double quotes will have to be escaped in order to be valid JSON. If you have problems with your HTML not appearing, check the configuration JSON is valid with a tool like jsonlint.com

{
"code":"<div class='footCol'><span class='footHead'>My Big Company Inc</span><br /><a href='https://www.xmpie.com/about-xmpie/company/'>About us</a><br /><a href='https://www.xmpie.com/support/'>Support</a><br /><a href='https://www.xmpie.com/about-xmpie/careers/'>Careers</a></div><div class='footCol'><span class='footHead'>How can we help?</span><br /><a href='/ustorethemes/PieceOfCake2/20/en-US/cart/'>Your cart</a><br /><a href='/ustorethemes/PieceOfCake2/20/en-US/order-history/'>Your orders</a><br /><a href='/ustorethemes/PieceOfCake2/20/en-US/AboutUs/'>Problems with your orders</a></div><div class='footCol'><img src='https://campus.xmpie.com/xmpie-logo-sml.png' /><br />Basic HTML Widget! <br />This is a sample uStore widget.</div>"
}

Note that it is possible to add CSS class names to your HTML code, and then in the theme editor, add the CSS definition in the "Custom CSS" section. For example, to format the above HTML:

  .footCol {
    padding: 5px;
    width: auto;
    min-width:200px;
    height: auto;
    margin-top: 10px;
    color: white;
    text-align: left;
  }
  
  .footHead {
    font-weight: bold;
  }
  
  .footCol a {
    color: white;
  }
  
  .footCol a:hover {
    color: white;
    text-decoration: underline;
  }

Images in your HTML code can be located on other web servers as shown in the sample code above. However, you can also upload image assets into the theme editor "Assets" area to host images on your uStore server. The trick, then, is to know the URL to use in your HTML code. The best solution to find the link to your uploaded image, is to right-click on the image after you have uploaded it. Select "inspect" and use the same URL that is shown in the style background-image parameter. The URL will include a folder called "Draft". After you publish the theme, the image will be in both the Draft and Published folder. Using the Published folder for the image link will allow you to continue making changes in the theme editor without affecting the published theme.