Skip to main content

Stylize Your Size Charts with Kiwi's Custom HTML Block

  • Updated

One of the powerful features of the Kiwi Sizing Chart app is the custom HTML block, which allows you to craft unique elements using custom HTML, CSS, and JavaScript. While basic coding skills are helpful, you can also use online templates to get started.

In this guide, we'll show you how to create a custom section with a button that redirects users to a page with measurement instructions.

Step 1: Access the Sizing Editor

  1. Open the Kiwi Sizing Chart app.
  2. Create a new chart or edit an existing one.
  3. Add a custom HTML block. The code editor will appear on the right side of the screen.

    NOTE: The Kiwi custom HTML block renders your code immediately, so there's no need to save and refresh for each change!

Step 2: Add HTML Content

Let's create a section with a heading, some text, and a button that redirects users to another page. 

Below the text, we will position the button that will scale up its size on the mouse hover and slightly change the color from left to right on you hover it.

Here's the HTML code to add:

<div class="size-info">

    <h2>Find Your Perfect Fit</h2>

    <p>We find this shirt to fit true to size. The store owner is 182cm (6'), has a chest measurement of 104cm (41"), and weighs 74kg. He takes a Medium in this shirt.</p>

    <p>Want to ensure the perfect fit for yourself? Check out our detailed How We Measure page for a step-by-step guide on taking your measurements accurately.</p>

    <p class="center-button"><a href="" target="_blank" class="btn-link">Check how we measure here</a></p>

</div>

In this section, we placed the heading <h2> class inside the div, followed by three paragraphs of text and placement for a link to the page that is currently blank.

But, this is not what we really want, right?

Step 3: Style the Section with CSS

To make the section visually appealing, we'll add some custom CSS. You can place the following CSS directly within the code editor:

<style>

    .size-info {

        border: 1px solid #ddd;

        padding: 20px;

        margin-top: 20px;

        border-radius: 8px;

        background-color: #f9f9f9;

        text-align: center;

    }

    .size-info h2 {

        margin-top: 10px;

        font-weight: bold;

    }

    .size-info p {

        margin: 10px 0;

    }

    .center-button {

        display: flex;

        justify-content: center;

    }

    .btn-link {

        display: inline-block;

        margin-top: 10px;

        padding: 10px 20px;

        background-color: #007bff;

        color: #fff;

        text-decoration: none;

        border-radius: 4px;

        transition: background-color 0.3s ease, transform 0.3s ease;

    }

    .btn-link:hover {

        background: linear-gradient(to right, #0056b3, #007bff);

        transform: scale(1.5);

        text-decoration: none;

    }

</style>

Now, we have the complete style necessary and the whole block is established. 

Button hover:

Result on the product page:

The example above is just a simple example of what this block can do. You can load separate tables, with each table having its style, almost anything you can think of - can be placed here.

Related articles