Most themes tuck extra product information into tabs or an accordion — Product details, Care guide, Delivery & returns. If your shoppers go looking for sizing in there, you can render the full size chart inside one of those tabs and keep your usual Size guide button next to the variant picker. Both work at the same time, and setup takes about two minutes.
 |
💡 Good to know: these steps assume your theme builds the tab from a Shopify page (Online Store → Pages), which is the most common setup. If your tabs come from a metafield or are written directly in the theme, the snippet is the same — paste it wherever that tab's content is edited.
Step 1 - Find the page behind the tab
In your Shopify admin, go to Online Store → Pages and search for the tab's name — in this example, Care Guide 30°C. Open the page.
Not sure which page feeds the tab? Open the tab on your storefront and match its text against the Content column in the page list.
 |
Step 2 - Switch the content editor to HTML
In the Content box, click the </> Show HTML icon at the right end of the toolbar.
 |
Step 3 - Paste the size chart snippet
Go to the end of the HTML and add this on its own line, below the existing content:
<div data-smartrecom-sizechart-content></div>
That empty <div> is the marker SmartSize looks for. It renders the whole chart in its place — sizes, measurements and the unit switcher included. Want a bit more space between your text and the chart? Add one or two <div><br></div> lines above it, as in the screenshot.
 |
Step 4 - Save the page
Click Save at the top of the page.
 |
Step 5 - Check your product page
Open a product on your storefront and open the tab. The size chart now renders inside it, and your Size guide button still opens the popup exactly as before. Changes can take a minute to propagate, so give it a moment and hard-refresh if nothing shows yet.
 |
Important: our default size charts come with a title and with tabs that include 'measurement instructions'. Inside a narrow tab or drawer a leaner chart often reads better — you can remove the title and the tabs in your Size chart editor.
If the chart doesn't show up
Two things to check first: the product must be linked to a size chart that is set to Active, and the SmartSize app embed must be enabled in your theme.
Tabs and drawers that load their content only when a shopper clicks them are fine — SmartSize keeps watching the page and renders the chart as soon as the snippet appears.
💡 Tip: the same snippet works anywhere in your store, not just in tabs. To drop the chart straight into the body of your product page instead, see Displaying a size chart directly in your product page (no button).