Shopify themes, liquid, logos, and UX
Hi, how can I show product SKU in product section? I use Impulse theme.
Url: anna-michielan.myshopify.com
Thank you.
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, click product.liquid or product-template.liquid.
Find the following Liquid tag:
{{ product.title }}
This is the code that renders your product titles on the product page.
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 class="variant-sku">{{ current_variant.sku }}</span>
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.
Boundless
Brooklyn
Debut
Express
Minimal
Narrative
Simple
Supply
Venture
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.
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); });
Click Save.
To have SKUs appear on your product pages, you must add SKU numbers to your product variants from in Shopify admin.
From your Shopify admin, go to Products > All products.
Click on the product that you would like to edit.
For products with multiple variants, in the Variants section, add your SKU numbers:
For products without variants, in the Inventory section, add your SKU number:
Click Save.
Hi @Danielkebbe84 thank you for your response.
But I didn't see any:
{{ product.title }}
under those files. Did I miss something? 😐
Hi Anna,
Did you ever get a result? I'm having the same problem.
Thanks
Did you ever find a way to get this to work? I can't find Product.title either.
Thank you!
Tracy
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024