---
title: Place the Size Chart Link Anywhere on a Product Page
description: "Move the size-chart link to a suitable location in your Stencil product page. Check publication and product matching first, then use a theme placeholder if automatic placement does not suit your layout. This guide covers the link/button that opens a…"
url: "https://prikid.app/docs/how-to-place-a-size-chart-link-elsewhere/"
updated: "2026-10-14"
category: Display and Styling
---

# Place the Size Chart Link Anywhere on a Product Page

Move the size-chart link to a suitable location in your Stencil product page. Check publication and product matching first, then use a theme placeholder if automatic placement does not suit your layout.

This guide covers the link/button that opens a size chart or content item in a popup. Click or tap the screenshots to enlarge them. For a full setup walkthrough, see [Add a Size Chart, Popup or Tab to Product Pages](https://prikid.app/docs/adding-a-pop-up-or-size-chart-to-product-pages/).

## 1. Choose the right display option

Open the item from **Size charts and content items** and go to **Display options**. The normal choices are:

- **Show as a link/button and open the content item in a popup window on click.** PRIKID attempts to place the trigger automatically using the product page’s structure. The exact position depends on the theme; it is not guaranteed to be beside a particular option.
- **Inject the content item directly into a product page.** This displays content without a popup trigger. Inline content needs its own insertion location; a product tab uses theme-dependent tab integration.
- **Use both modes.** This combines a popup trigger with direct content. Each placement still needs to work in your theme.

[![Display options showing a content item name, Publish enabled, popup link mode and Save & Publish.](https://prikid.app/wp-content/uploads/2026/10/prikid-setup-display-popup.jpg)](https://prikid.app/wp-content/uploads/2026/10/prikid-setup-display-popup.jpg)
Current editor example: popup mode, the Publish switch and Save & Publish. The item name is internal; the shopper-facing link title is a separate setting.

Under **Link/button default settings**, keep **Use global** enabled for the defaults in **App → Settings → Main settings**, or turn it off to set this item’s appearance. **Title**, **Show as a button**, **CSS classes** and **Inline CSS style** control appearance; they do not provide a drag-and-drop location picker.

[![PRIKID Main settings showing Enable the app and default link title, button appearance, CSS classes and inline style.](https://prikid.app/wp-content/uploads/2026/10/prikid-placement-settings-current-1.jpg)](https://prikid.app/wp-content/uploads/2026/10/prikid-placement-settings-current-1.jpg)
Current global settings: enable the app and configure the default link label and appearance. Save only if you intend to change these settings.

For inline content or a new product tab, follow the [direct-display guide](https://prikid.app/docs/how-to-inject-a-size-chart-into-a-product-page-content-directly/). The button placeholder below does not insert inline content or create a tab container.

[![Inline display mode with Insert as a tab enabled, Size guide title and --last-- placement.](https://prikid.app/wp-content/uploads/2026/10/prikid-setup-display-tab.jpg)](https://prikid.app/wp-content/uploads/2026/10/prikid-setup-display-tab.jpg)
Current editor example: injection mode with Insert as a tab enabled. Tab title and tab order apply to tab integration, not popup-link placement.

## 2. Check publication and matching before moving the link

1. Confirm the intended item is published. In Display options, enable **Publish?** and use **Save & Publish** when ready; **Save as draft** leaves it unpublished. Check its published state after saving.
2. Open **Selection rules** and click **Preview**. Find the exact product that should receive this item. Dropdown suggestions and dashboard search are not proof that the rules match it.
3. Check the SKU/name against the storefront product. If Preview is empty or selects the wrong products, fix matching first using the [product-targeting guide](https://prikid.app/docs/creating-rules-to-filter-products-according-to-conditions/).
4. Open the actual product URL on the intended storefront. If a Preview link opens a different domain or a 404, navigate directly and report both URLs.

[![Selection rules with Product name, contains and shirt, plus Preview, AND and OR controls.](https://prikid.app/wp-content/uploads/2023/09/matching-selection-rules.jpg)](https://prikid.app/wp-content/uploads/2023/09/matching-selection-rules.jpg)
Selection rules Preview checks which products match. This example condition is illustrative; use a value from your own catalog.

[![Matching Preview listing products with images, SKUs and product names; compare these results with the intended storefront product.](https://prikid.app/wp-content/uploads/2023/09/prikid-matching-preview-results.png)](https://prikid.app/wp-content/uploads/2023/09/prikid-matching-preview-results.png)
Example matching results reused from the targeting guide. Confirm your own product is listed; these rows are not evidence about your store.

A visible, hardcoded “Size chart” link does not prove that a published PRIKID item matches the product. The placeholder supplies a location; it does not publish an item, change selection rules or install the storefront script.

## 3. Decide whether manual placement is needed

Keep automatic placement if the trigger is visible, easy to find and opens the correct content. Use a manual placeholder when you need a specific location—for example below the size options—or when the theme’s structure gives PRIKID no suitable visible insertion point.

Adding the placeholder is a theme-code change you or your theme developer can make. If you are unsure which file or location is correct, [contact PRIKID support](https://support.prikid.app/new-ticket) with the evidence listed below. Store-specific positioning or compatibility adjustments performed by support are different from self-service settings; availability and scope need review for your theme.

A custom Stencil theme may need an adjustment even when publication and matching are correct. This guide does not establish compatibility with every theme/version or native multi-storefront, Catalyst or other headless support. Ask support to assess those setups before relying on this Stencil procedure.

## 4. Add the placeholder in your Stencil product template

### Back up the theme and find the file

Keep an unchanged theme copy/download and the original template. In BigCommerce, open **Storefront → Themes**, locate the theme, and use its **Advanced** or actions menu. If the original is not editable, use **Make a Copy**, then **Edit Theme Files** on the copy. Menu labels can vary; BigCommerce’s [theme-file editing instructions](https://docs.bigcommerce.com/developer/learn/courses/widgets-rest-api/regions/lab-regions) explain this workflow.

For a Cornerstone-style theme, start with `templates/components/products/product-view.html`. The page template is typically `templates/pages/product.html`, which includes product components. A custom product template may include a different component: follow the file actually used by the affected product. See BigCommerce’s [Stencil file structure](https://docs.bigcommerce.com/developer/learn/courses/stencil-core/customizing/file-structure).

### Insert a complete, empty DIV at the desired location

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

Keep the class name exactly as shown and use the closing `</div>` tag. Place it in visible product-page markup, outside any label, link or button. Do not paste it inside a script, style block, HTML attribute or hidden container. Do not replace the product form, options or Add to Cart code.

For a link below the size options, find the element that wraps those options and add the DIV after its closing tag, while remaining inside the product-details area. For a location below the purchase controls, choose the end of that visible section. Your theme developer should identify the appropriate closing tag; file line numbers and wrapper names vary.

[![Example Stencil theme file tree with templates/components/products/product-view.html open and the PRIKID button placeholder inserted before the share component.](https://prikid.app/wp-content/uploads/2023/09/image-35.png)](https://prikid.app/wp-content/uploads/2023/09/image-35.png)
Reused Stencil editor example from the original guide: the placeholder is before the share component in product-view.html. It illustrates the file and insertion point, not current BigCommerce button labels or a universal line number. For placement below size options, choose that options wrapper instead.

The current PRIKID widget uses existing button placeholders before falling back to automatic placement. Start with one placeholder in the intended product area. Multiple copies can create repeated triggers; they do not assign separate charts to different buttons. The content still comes from the published items matched to the product.

### Save, preview and apply the intended theme

Save the file and preview the edited theme on a product that matches. Confirm the correct content opens and that options and Add to Cart still work. If you edited a copy, saving it alone does not activate it: apply/publish that copy only after checking it. Confirm the live storefront uses the edited theme and product template.

Keep this change recorded so it can be reapplied after a theme replacement or update. To undo the placement change, restore the backed-up template or remove only the DIV you added, then save/apply the intended theme and recheck automatic placement.

## 5. Check the live product page on desktop and mobile

- Open a matching product directly. Confirm the link appears in the requested location and opens the expected size chart or information.
- Close the popup and check its tables, images and text. On mobile, verify that the trigger is visible, tappable and not covered by another element.
- Check product options and Add to Cart after the template change. Inspect another product that should match and one that should not.
- If the theme has custom templates, test each affected template separately. Quick view is a separate surface; a change to the full product page does not prove quick-view placement.
- Reload the live page after applying the theme. Verify the actual HTML and stylesheet received by the browser rather than assuming a source-file save reached the storefront.

## 6. Troubleshoot custom-theme failures

### No link appears

Recheck publication, matching and **App → Settings → Main settings → Enable the app?**. Then inspect **Settings → Script installation**: the current app explains that its script is normally installed automatically in BigCommerce Script Manager and offers **Reinstall the script** if it is missing. A theme placeholder cannot replace that script. Avoid adding duplicate scripts; ask support if installation is unclear.

[![Current PRIKID installation guidance with the Script Manager illustration, explanation of automatic installation and Reinstall the script control.](https://prikid.app/wp-content/uploads/2026/10/prikid-placement-script-installation-current-1.jpg)](https://prikid.app/wp-content/uploads/2026/10/prikid-placement-script-installation-current-1.jpg)
Current Script installation tab. Its embedded Script Manager image is the app’s illustration; the reinstall control is in the current app. Reinstall only when the store’s script is missing.

If these checks pass, ask your theme developer to confirm the placeholder exists in the HTML of this product page. It may be in the wrong theme, an unused product template or a conditional section that does not render for that product. Inspect the placeholder and its parents for `display:none`, hidden layout regions and responsive styles. A manually placed placeholder inside a hidden container can prevent a useful visible trigger.

### The link is visible but does not open, or opens the wrong content

Check whether the link was inserted by PRIKID or hardcoded into the theme. Confirm the intended item matches this exact product and review other matching items. A decorative link or an old custom integration can remain after its chart is removed or unpublished. Ask the theme developer to inspect overlays, invisible elements and other scripts that can intercept clicks; capture any browser-console error for support.

### The link is duplicated, hidden on mobile or styled incorrectly

Look for repeated placeholders, an old hardcoded trigger, responsive hidden sections, unreadable hover colors and overlapping elements. Check that the edited stylesheet is actually loaded. Keep any CSS fix scoped to PRIKID or the affected product area; broad changes to all links, headings or tables can damage unrelated content. Share desktop and mobile screenshots before requesting a theme adjustment.

### A product tab is missing

Treat this as a separate integration problem. A button placeholder moves a popup trigger; it does not create the tab structure. Custom themes may use different tabs, accordions or no compatible container. Follow the direct-display/tab guide and ask support to assess the theme’s markup. A past fix for one store or theme version is not a guarantee for another.

## 7. Contact support with a complete placement report

Contact support after the publication, matching and installation checks, or before editing if you need help finding a safe insertion point. Use **Contact PRIKID support** in the app or [open a support ticket](https://support.prikid.app/new-ticket). Include:

- **Store URL and exact affected product URL.** Add product name/SKU or ID if available, plus one working product URL for comparison.
- **PRIKID item name and display mode.** State whether it is published and attach Selection rules and matching Preview screenshots showing the relevant product.
- **Theme name, version and customizations.** Say whether it is Stencil, a custom theme, Catalyst/headless or a secondary storefront; identify the storefront/domain and custom product template if known.
- **Desired location.** For example, “immediately below the size selector and above Add to Cart”. Mark it on a screenshot and say whether the request covers desktop, mobile and/or quick view.
- **Actual behavior and reproduction steps.** Missing link, blocked click, wrong content, duplicate trigger or missing tab; include browser/device, approximate time and what changed recently.
- **Checks and edits already made.** App enabled state, script presence, placeholder file/snippet, edited theme’s live status, and any relevant errors. Do not include passwords, API keys or unrelated customer/order data.

Support can review the store and determine whether a placement or compatibility adjustment is appropriate. Some work may need your theme developer. Do not assume that every requested layout, custom theme, secondary storefront or headless integration can be supported through this placeholder.

For a short checklist covering access, matching and display problems, use [Why Your Size Chart, Popup or Tab Is Not Showing](https://prikid.app/docs/content-not-showing/).

## Related guides

- [Add a Size Chart, Popup or Tab to Product Pages](https://prikid.app/docs/adding-a-pop-up-or-size-chart-to-product-pages/)
- [Check product matching and selection rules](https://prikid.app/docs/creating-rules-to-filter-products-according-to-conditions/)
- [Change link/button text and style](https://prikid.app/docs/how-to-change-the-size-charts-link-button-text-and-style/)
- [Display a chart directly on the product page](https://prikid.app/docs/how-to-inject-a-size-chart-into-a-product-page-content-directly/)