How to inject a size chart into a product page content directly?

First things first, create a size chart in the app, and set Display mode to Inject the size chart directly into a product page content

Set size chart display mode

Alternatively, you can use both modes to display the size chart both directly on the page and as a link/button that opens a popup window.

Then, depending on where you want to place the size chart, follow these instructions

Injecting a size chart in an arbitrary place on the product page

You should manually define the position of the size chart on the page by inserting this DIV into the product-view.html or another appropriate file of your Stencil theme:

<div class='prikid-size-chart-content-placeholder'></div>



How to inject a size chart into a product page content directly


Adding a size chart as a tab next to the description tab

The app may show a size chart in a separate tab next to description tab, like this:


Size chart in a new tab example


But first, you should define a new tab in the description-tabs.html file of your theme.

Add these two code snippets to define a new tab and make it invisible by default:

<li class="tab" style="display:none">
    <a class="tab-title" href='#tab-prikidsizechart'>Size chart</a>
</li>


<div class="tab-content" id="tab-prikidsizechart">
    <div class="prikid-size-chart-content-placeholder"></div>
</div>


Adding tab with a size chart


The app will automatically show the Size chart tab for products where the size chart should be present, according to the conditions you provided.


Injecting a size chart directly into a product description

You can put the DIV code above into a product description or other text fields of a product, which allows using HTML. Make sure to switch the description editor into the Source code mode by pressing the button <>

Inject a size chart into the product description


Inject a size chart into the product description



{info} If you have any difficulties with injecting the size chart into a product page, feel free to contact us, and we help you with pleasure.