Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

SKUs (stock keeping units) are numbers, typically alphanumeric, that are used to help identify products and track inventory. If a store uses SKUs, then a unique number is assigned to each individual product variant. You can show SKU numbers for variants on your product pages by editing your theme code:

Sectioned and non-sectioned themes

Note

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.

• Sectioned themes

•  

• Non-sectioned themes

On this page

• Show SKU numbers on product pages

• Add SKU numbers to your product variants from the admin

Show SKU numbers on product pages

To edit your theme to show SKU numbers on product pages:

PC£º

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click product.liquid or product-template.liquid.

2. Find the following Liquid tag:

   {{ product.title }}

   This is the code that renders your product titles on the product page.

3. On a new line below the line of code that includes {{ product.title }}, paste the following code:

   {% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

4. Click Save.

iPhone£º

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click product.liquid or product-template.liquid.

2. Find the following Liquid tag:

   {{ product.title }}

   This is the code that renders your product titles on the product page.

3. On a new line below the line of code that includes {{ product.title }}, paste the following code:

   {% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

4. Click Save.

Android£º

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click product.liquid or product-template.liquid.

2. Find the following Liquid tag:

   {{ product.title }}

   This is the code that renders your product titles on the product page.

3. On a new line below the line of code that includes {{ product.title }}, paste the following code:

   {% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

4. Click Save.

Select your theme

The next steps for this customization vary depending on your theme. Click the button for your theme and follow the instructions.

Steps for Boundless

1. In the Assets directory, click theme.js.liquid.

2. Look for variant.sku.

   If you're able to find variant.sku, then you have completed the customization.

   If you're unable to find variant.sku, then continue to the next step.

3. At the bottom of the file, paste the following code:

   document.addEventListener('DOMContentLoaded', () => {   setTimeout(function() {     const productJson = [...document.querySelectorAll('[id^=ProductJson-')];     if (productJson.length > 0) {       productJson.forEach((product) => {         const sectionId = product.id.replace("ProductJson-", "shopify-section-");         const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');         const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];         const productInfo = JSON.parse(product.innerHTML);         const inputValues = [];         const optionValues = [];         let count = 0;         inputSelects.forEach((input) => {           inputValues.push(input.value);           optionValues.push(count);           input.addEventListener('change', (evt) => {             const currentValue = evt.currentTarget.value.toString();             const changedIndex = inputSelects.indexOf(evt.target);             inputValues[changedIndex] = currentValue;             variantSKU.innerText = ' ';             productInfo.variants.forEach((variant) => {               if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {                 variantSKU.innerText = variant.sku;               }             });           });           count += 1;         });       });     }   }, 100); });

4. Click Save.

Add SKU numbers to your product variants from the admin

To have SKUs appear on your product pages, you must add SKU numbers to your product variants from in Shopify admin.

1. From your Shopify admin, go to Products.

2. Click on the product that you would like to edit.

3. For products with multiple variants, in the Variants section, add your SKU numbers:

1. For products without variants, in the Inventory section, add your SKU number:

1. Click Save.