Adding an HTML section to your store theme

Incorporating an HTML section into your Shoplazza store theme offers a dynamic way to tailor your online presence. This feature allows for the seamless integration of custom widgets or applications, directly addressing the needs of your customers. The convenience of the HTML section lies in its ability to accept custom code directly, bypassing the need to alter the theme code.

Key Benefits of Using the HTML Section:

• Expanding your theme's capabilities.
• Integrating bespoke applications or widgets for an enhanced customer experience.

Adding an HTML section

1. From your Shoplazza Admin > Online store > Themes, click Customize.

2. Click 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.

Setting up the HTML section

Customizing the code

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

2. 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.