Gitpod Cloud IDE: 30% off for first 3 months. CODE: KEVINHQ. Click here

How to remove “Default Title” from Shopify store for good

It happened at my client’s store, which running on Shopify. There’s strange “Default Title” text on some products page. The strong HTML tag wrapped that text. At first, I put on some jQuery scripts to remove it when the page loaded. Yesterday, suddenly that didn’t work anymore. 

The store is using the  Minimal  theme with some customizations to fit my client’s needs. I’ve made sure all of the customizations have nothing to do with this strange “Default Title” text.

So, I trace the problem furthermore and find out this strange text is only showing on some product pages with no variants. The rest of the product pages with one or more variants are not showing it.

Based on my understanding so far, I see Shopify will return a default variant with “Default Title” when a product page has no variants. Then, this Javascript from theme.js.liquid will render that “Default Title” text:

this.optionSelector = new Shopify.OptionSelectors(‘productSelect’, { product: product, onVariantSelected: selectCallback, enableHistoryState: true });

I know it’s weird but it’s the fact I find out on the  **Minimal ** theme we use. Other themes may not have this problem. But if it does have such problem, you may use the following solution.

To fix that, for now, I add up a condition like this on the theme.js.liquid

if (product.variants.length == 1 && product.variants[0].title == ‘Default Title’) { console.log(‘No need to show that “Default Title” text’); } else { … running the original codes as usual. }

That condition will check if the product page only has one variant and it has “Default Title” as its title value. If you’re still curious you can run this code to see how the product.variants look like

console.log(product.variants)

And you’ll see what I mean above.

A note

I am not sure if this is the cleanest way to fix, but it does the job very well till now. So far, it doesn’t cause any problem. I’ve asked the QA of the project to test thoroughly after I add that code, everything works as expected and no more strange “Default Title” on any product page without variant.

If any of you have a better idea, feel free to let me know in the comments below.

Further Reading

How to block ads on Safari 13

Ever since updating to macOS Catalina, I got Safari 13 as the default browser. Safari has been the most saving battery power browser on macOS. And, it’s still it is. However, there is one problem. The uBlock Origin won’t work…  Read more » How to block ads on Safari 13

ISP problem enabled me to set up USB tethering to macOS

Happy New Year! Ironically, I wasn’t happy on the first day of 2020. Near noon on January 1st, 2020, when I was working on AWS Cloud9, it’s getting slower and slower. Finally, it’s disconnected. When I checked on my router,…  Read more » ISP problem enabled me to set up USB tethering to macOS

How I revive old laptop with latest Ubuntu version

I bought this old laptop in 2012. It’s originally coming with Ubuntu 12.04. At that time, it’s the most suitable laptop for my job. It’s fast, powered with 2GiB RAM and Intel Core i3 1.4Ghz. However, I began to abandon…  Read more » How I revive old laptop with latest Ubuntu version

Veerotech Web Host: 50% off on first month with code: 1stmonth50. Plus free $10 credit. Click here