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
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:
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 the description tab, like this:
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>
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 the use of HTML. Make sure to switch the description editor into the Source code mode by pressing the button <>
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.