I’m more and more interested these days in learning small achievable e-Commerce customizations for Shopify and WooCommerce. Those I can research and implement a solution to in a reasonable amount of time. This article will cover how to append the product SKU (if it has one) to the product title in the Shopify Dawn theme.
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.
I’ve written a couple of similar articles that inspired this one (along with a desire to learn more about Shopify programming and development):
I’m not a Shopify pro so if you see any mistakes in the code or know of a better solution, please share them freely in the comments section.
I realize this may be more of an ‘edge case’ as it isn’t very common (as far as I know) to display the stock-keeping unit or SKU with the product title.
However, it is totally feasible and a great learning opportunity (for me at the very least).
Upon researching and writing this article, here are the main learnings I’m taking away:
- Locating and editing the product.title attribute in the main-product.liquid file.
- Using the liquid append filter (docs).
- Using a liquid {% if %} conditional to display meaningful output for those products that don’t have an SKU.
To get started, find the menu in your store’s admin backend and click Edit code (this is probably a good time to back up your theme files in case something goes awry).
We will then edit the main-product.liquid file (this is the file I have in the Dawn Theme 10.0 on my Shopify Partners development store). You can find it by searching for the specific file name in the Search files… search
Once located, find the <h1> tag with the product.title that is wrapped in a <div> which has the product__title class, and make the code changes below:
{% assign p_sku = product.selected_or_first_available_variant.sku %}
<div class="product__title" {{ block.shopify_attributes }}>
{% if p_sku == blank %}
<h1>{{ product.title | append: ' (No SKU)' | escape }}</h1>
{% else %}
<h1>{{ product.title | append: ' SKU: ' | append: p_sku | escape }}</h1>
{% endif %}
A brief look at the code:
- Assigning the product object’s selected_or_first_available_variant.sku property to a variable (p_sku in this case)
- Using the {% if %} conditional to check if the p_sku variable has the products SKU assigned to it.
- Append either the product’s SKU or a meaningful message if no SKU is available for a specific product
Now when visiting a product that has an SKU, it is shown appended to the product title:
For a product that doesn’t have an SKU, a meaningful message is appended instead:
To note: One of the things to consider with this approach is that by editing the main-product.liquid file, all products will have this functionality. That may or may not be desirable.
If not, then creating a separate product template and applying it to products accordingly may be the best approach. ✨️
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
- 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
- Desktop and mobile wallpapers, digital downloads, photography services, Shopify and WooCommerce customizations, and content writing – all in one E-commerce Shop. 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!