I’m focussing more and more on the Shopify e-Commerce platform so I can learn custom coding solutions and offer them as a freelancer in addition to WooCommerce services. Surprisingly, I see many questions in Shopify forum’s and Facebook groups about displaying a Product’s SKU. Here is one way I learned how…
Note: In this example, I’m using Dawn theme version 9.0.0 in my Shopify partners account with some generated test data on a testing/development store.
The Newsletter for PHP and MySQL Developers
Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.
Unlike WooCommerce, a product’s Stock Keeping Unit, or SKU, is not displayed on the single product page. According to my knowledge, there aren’t any toggles or switches you can tick for it either in the page design settings
Shopify has a Custom liquid block you can add to the product template and place code snippets in.
To do so, follow these steps…
Choose the default product template (or whatever template you have assigned to products) and from the left-hand menu, click Add block and then Custom liquid:
You can then place the product object’s sku property in the Custom liquid block to be displayed.
I’m using an unless conditional block in the event that a product doesn’t have an SKU, nothing will be output to the screen.
You can move (by dragging) the Custom liquid block to a number of places on the single product template. But, for this example, I’m placing it underneath the product price.
Here is the Liquid code to display a product’s SKU, only if it has one:
{% unless product.selected_or_first_available_variant.sku == blank %}
<span class="variant-sku">SKU: {{ product.selected_or_first_available_variant.sku }}</span>
{% endunless %}
When viewing a product with no SKU, the {% unless %} liquid block prohibits any output on the product page because the product.selected_or_first_available_variant.sku == blank conditional evaluates to true:
- This solution only works for products with no variants.
- Since the Custom liquid block is added to the default product template, all products using this template will have the Custom liquid block.
Do you need this exact same functionality applied to your own Shopify store? Consider hiring me to complete this for you, hassle-free. Contact me here for more information.
If you see any mistake(s) in the code or know of a better working solution, please share freely in the comments section.
Thank you for reading this post. Please share it with someone else who would enjoy it as well.
Josh Otwell has a passion to grow as a PHP Developer, SQL expert, and technical blogger/writer.
Disclaimer: The majority of examples in this post, are performed in a personal development/learning workstation environment and should not be considered production quality or ready. Your particular goals and needs may vary. Like always, just because you can do something doesn’t mean you should. My opinions are my own.
More ways I can help
- Any of the Web Squadron Mastery Modules can help you with your online web entrepreneurial endeavor(s).
- Get a handle on Google Analytics with this course by the folks over at The Content Technologist.
- Need hosting for your next web application or WordPress site? I highly recommend Hostinger and use them to host my niche bass fishing site. The service is second to none.
- 🔒5 Truths I’ve Come To Realize As a Self-taught Developer
- Mobile wallpapers, digital downloads, photos, development services, and content – all on one Kofi Shop Page. Find your next digital purchase today!
Disclosure: Some of this blog post’s services and product links are affiliate links. At no additional cost to you, should you make a purchase by clicking through one of them, I will receive a commission.
The Newsletter for PHP and MySQL Developers
Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.
📰 Get your brand, product, or service the attention it deserves with affordable classified ad placement in the OpenLampTech newsletter. I appreciate your support!