Display a Size Chart Directly on a Product Page

Show a size chart inside the product page so shoppers can read it without opening a popup. Choose direct display, provide a place for the content, then publish it for the right products.

Use inline display when measurements or fitting advice should be visible alongside product information. A popup keeps the page shorter and opens the chart when a shopper clicks a link or button. A product tab keeps the chart on the page, but shoppers may need to open that tab or its mobile accordion. Choose Use both modes only when you want an inline chart and a popup trigger; each needs a working placement.

This guide covers size charts in Size charts and content items, rather than the separate general Popups editor. Click or tap any screenshot to enlarge it; use the viewer’s zoom control for small labels.

1. Choose direct display in the item editor #

1. Open your chart from Size charts and content items. If you are starting from scratch, use Add new content item and follow the size-chart setup guide.
2. Check the chart in Content, then open Display options.
3. Select Inject the content item directly into a product page. For a normal inline block, leave Insert as a tab off.

2. Decide where the chart will appear #

Inline block in the page or product description #

With Insert as a tab off, the chart appears inside a content placeholder. Its position comes from where that placeholder is rendered in the product page—not from the chart’s internal name or popup-link settings. Without a suitable placeholder, selecting direct display does not place the chart automatically beside the size options.

For a theme developer, the required content placeholder is:

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

It can be added to the appropriate Stencil product template or to an HTML product description. If using the description, insert it as HTML rather than visible text, preserve the existing description, save, and confirm the element survives in the rendered page. An empty placeholder supplies a location; it does not contain the chart or make an unpublished item visible.

For theme backups, finding the active product template, applying changes and compatibility checks, see the custom placement and theme compatibility guide. Use the content placeholder above for inline display; the prikid-size-chart-button-placeholder in that guide is for a popup trigger. Avoid repeating the content placeholder unless you deliberately want the chart in multiple locations.

A product tab or supported accordion #

To use the theme’s tab integration, turn on Insert as a tab, enter the shopper-facing Tab title, and set Insert before a tab with a matching title:

• --last--: place it after the existing tabs.
• --first--: place it before the existing tabs.
• An existing tab title: place it before that tab when the theme integration recognizes it.

Automatic tabs need a compatible tab or accordion structure. A custom theme can require an adjustment, and a theme without a suitable structure may not display a new tab. On mobile, the same information may sit in an accordion or a collapsed panel. Test the actual product page before treating the setup as complete; use the compatibility guide for custom placement help.

3. Check targeting and publish #

Go to Selection rules and use Preview to check the exact products that match. The dashboard search finds content items; it does not assign the chart to a product. A placeholder on a product page cannot override the item’s targeting.

If the intended product is absent or the wrong products appear, follow the detailed product-targeting guide before troubleshooting the theme.

Return to Display options, enable Publish? and click Save & Publish. With Publish? off, the button reads Save as draft and the item stays unpublished. Reopen the saved item to confirm its display mode and published state. The direct-display screenshot in step 1 shows these controls together.

4. Verify the live product page #

1. Open the actual product URL on the intended storefront. A matching Preview list verifies selection rules, not the final placement. If its product link opens a different domain or a 404, navigate to the correct live product and report both URLs.
2. For an inline block, look at the location where the content placeholder renders. For a tab, open the new tab or mobile accordion and confirm the chart is inside it.
3. Check the correct measurements, readable headings, table width and any horizontal scrolling on desktop and mobile. Keep ordinary product descriptions intact.
4. Check another intended product and an excluded product: the chart should follow the selection rules. If you enabled Use both modes, also check that the popup trigger opens the expected chart.

5. If the chart does not show #

Check publication, matching and installation first #

Confirm the item is published, its Preview includes this product, and the saved mode is direct display or both modes. Then check App → Settings → Main settings → Enable the app. A disabled app or a missing storefront script can prevent a correctly configured chart from appearing.

Under App → Settings → Script installation, review the installation guidance. PRIKID normally installs its script automatically in BigCommerce Script Manager. If it is missing, the current app provides Reinstall the script. Check the store and installation first; avoid adding duplicate scripts.

Then check the placement and theme #

• No inline block: confirm the content placeholder exists in the HTML of this product page, uses the exact class above, and is in the active template or saved description. A popup-button placeholder cannot receive inline content.
• No tab: confirm Insert as a tab is enabled and the theme has a supported tab/accordion structure. Check whether the tab is present but collapsed or placed elsewhere.
• Hidden or unreadable content: check the placeholder’s parent containers, responsive visibility, heading colors, table width and loaded styles. Ask for a scoped fix rather than changing every heading or table in the theme.
• A tab is visible but cannot be clicked: ask the theme developer to check overlapping elements or scripts that intercept clicks.
• Wrong or duplicate chart: review matching items and repeated content placeholders before changing CSS.

Custom themes and customized product templates need individual verification. These instructions do not establish native support for secondary storefronts, multi-storefront or Catalyst/headless stores. Contact support about the specific storefront system before relying on that setup.

6. Send support enough information to reproduce it #

Use Contact PRIKID support in the app or open a support ticket. Include the store and affected product URLs, product name/SKU, item name, published state, matching Preview and Display options screenshots, theme name/version and customizations, and desktop/mobile screenshots showing the expected location. State whether you chose inline or tab display, where the placeholder was added, what installation checks you made, and whether another product works. See the placement and compatibility guide for the full diagnostic checklist.