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.

Tags: