Dynamic SKUs in Your Shopify Store.
In the world of e-commerce, offering a clear and informative user experience is crucial. Ensuring that customers have easy access to primary product information, such as the SKU (Stock Keeping Unit), is essential.
In this article, we’ll introduce a solution on how you can dynamically display SKUs for each product variant, whether color, material, textures, or sizes in your Shopify store.
Why should I display SKUs?
SKUs are essential for inventory management, but they can also be a valuable tool for customers. They can easily identify specific variants of a product, which is especially useful in stores with many size, color, or style options.
Implementing dynamic SKUs in Shopify.
Understanding Shopify’s structure:
Before starting, it’s important to understand that Shopify uses a template language called Liquid, in addition to HTML, CSS, and JavaScript. For this project, we will need to edit the Liquid code and add a JavaScript script.
1. Locate the correct product template page:
The first step is to access the Shopify admin panel, check your permissions with the project administrator, and then go to “Online Store” > “Themes”. Find the theme you are using and click on “Actions” > “Edit code”. You should modify the `product-template.liquid` file or a similar template of your theme.
Tested on various Shopify themes.
2. Update with Liquid code:
On the template page, include the Liquid code that will display all SKUs in a hidden manner. Use the `data` attributes to store information that will later be used by JavaScript.
Look in your template where product variant options are generated (for example, dropdowns or option buttons to choose color, size, etc.). Usually, it’s somewhere within a loop {% for variant in product.variants %}.
Get Tiago ib Machado’s stories in your inbox
Join Medium for free to get updates from this writer.
<div id=”variant-skus” style=”display:none;”>
{% for variant in product.variants %}
<span data-variant-id=”{{ variant.id }}” data-variant-sku=”{{ variant.sku }}”></span>
{% endfor %}
</div>
3. Create an Element to Display the SKU**:
Add an HTML element on the product page where the SKU will be displayed.
<div id=”product-sku”>SKU: <span id=”current-sku”></span></div>
4. Update with JavaScript Script:
At the end of the template file “main-product.liquid”, before the </section> tag, insert a JavaScript script. This script should detect when a variant is selected and update the HTML element with the corresponding SKU.
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
updateSelectedSku();
document.querySelectorAll(‘[name=”id”]’).forEach((selectElement) => {
selectElement.addEventListener(‘change’, updateSelectedSku);
});
function updateSelectedSku() {
var selectedVariantId = document.querySelector(‘[name=”id”]’).value;
var selectedSku = document.querySelector(`#variant-skus [data-variant-id=”${selectedVariantId}”]`).getAttribute(‘data-variant-sku’);
document.getElementById(‘current-sku’).innerText = selectedSku;
}
});
</script>
5. Test:
After adding the code, test the functionality in your store. Check if the SKU is being correctly updated when different variants are selected.
Notes:
Keep in mind that you may need to adjust this code to match the structure of your Shopify theme. Also, make a backup of your theme before making changes to the code.
Thank you for taking the time to read this.
Thank you for your time, consider a contribution to support my work. Follow the link to the Stripe platform to contribute here.
For any questions or assistance in developing Shopify stores, please contact via info@tiagoibmachado.pt.
X/Twitter: https://twitter.com/ibtiago
