HTML sections

Adding an HTML section is a great way to customize your Shoplazza storefront and extend your theme. The HTML section is the ideal location to add any customized widgets or applications you want on your store pages and better serve your customers.

The HTML section provides an html box for you to add custom code to your storefront without having to edit your theme code.

This section is useful when:

• You want to extend the functionalities of your themes.
• You want to add an application or custom widget to fit the needs of customers.

We will demonstrate how you can add a customized HTML section in Nova 2022.

Adding an HTML section

1. From your Shoplazza Admin, go to Online store > Themes > And click the Customize button.

2. Click the Add section to see more available sections for this theme.

3. Under Theme sections, click Show more to select the HTML section and customize your configurations.

4. In the added HTML section, enter code to display customized content.

5. Here, we will demonstrate with coded sections that can be applied in the text box for different scenarios.

• A clothing brand may need a shoe-size conversion table to determine the right fit.  You may refer to the code example below to implement a customized chart:

<table border="1">
<tr>
        <th>US sizes</th>
        <th>UK sizes</th>
</tr>
<tr>
        <td>3.5</td>
        <td>3</td>
</tr>
<tr>
        <td>4</td>
        <td>3.5</td>
</tr>
</table>

Below is an example of how this should appear in your theme editor:

• You may also need a shipment tracking tool to help your customers locate their shipped orders:

<input type="text" id="YQNum" maxlength="50"/>
<input type="button" value="TRACK" onclick="doTrack()"/>
<div id="YQContainer"></div>
<script type="text/javascript" src="//www.17track.net/externalcall.js"></script>
<script type="text/javascript">
function doTrack() {
    var num = document.getElementById("YQNum").value;
    if(num===""){
        alert("Enter your number."); 
        return;
    }
    YQV5.trackSingle({
        YQ_ContainerId:"YQContainer",
        YQ_Height:560,
        YQ_Fc:"0",
        YQ_Lang:"en",
        YQ_Num:num
    });
}
</script>

Below is an example of how this should appear in your theme editor:

Section padding

1. The padding editor is used to generate extra space around the section you create. Activate the "linkage icon" and type a value (measured in pixels) in any of the 4 columns to add buffers around the section or you may manually adjust each input by disabling the "linkage icon" in the centered area.

2. The screenshot below is an example use of 50px spacing on each side.

3. Here, you can select to preview on desktop or mobile.

The HTML section is an essential tool to customize your storefront. You can use the HTML section to integrate your store's interface, create custom snippets, and connect your store with other APIs.