Different product titles for different variants for the same product

[properpatola]

Hi, 

I want to have different Product Titles for different variants for the same product. Is that possible then importing products to Shopify using CSV file? In the CSV file, I have put different titles for each variant but Shopify is applying the first variant’s title for all the variants. 

Please help.

Regards.

[Jasoliya]

HI @properpatola 

you can add only one title per product if you want to change title base on variants changes then you have to make custom code to handle it. 

like add variants title in variants barcode or SKU field that you are not using and then show it on front end on variants changes.

[BlueIsland]

Hi,

I I'd like to know how to use variants to change the product titles of products. The backstory is we need to have the inventory/product names different than what displays on the front-end (customer-facing) side. Is this possible with variants or adding custom fields in the bulk editor?

[Jasoliya]

if you want to change title base on variant change then you have to manage it by SKU or barcode field because we have no direct field to do that.

[BlueIsland]

I tried using other custom fields as product titles but it didn't work for some attributions. I did find a much cleaner way by adding a special character at the end of the product title and before any extra keywords (admin related) so that only the first section of the title will now display on the storefront.

So for instance: "Product Name Keyword1 Keyword2 etc." becomes "Product Name - Keyword1 Keyword2 etc."

See more here...

https://community.shopify.com/c/Technical-Q-A/Custom-Product-Titles/m-p/694878

[herbertharriola]

I don´t know if you still have that issue, but if you do, it is super easy, you just have to add a couple of lines on theme.js file:

1 - Go and search "theme.Product" with Ctrl+F, then on the "this.selectors" section, on the last line add this:

$title: $('#product-main-title', this.$container)

after doing that, go down to "productPage" section and after the "variant.available if statement", copy this code:

// Update variant h1 title
var title = this.productSingleObject.title;
if(variant.title != "Default Title") {
    title = title + " / " + variant.title;
}
this.selectors.$title.html(title);

and then on your product-template.liquid, find your h1 for the product title and add an id to it (like the code below) and that will make it update and change your title every time you change your product variant.

<h1 id="product-main-title" class="product-single__title" itemprop="name">{{ product.title }}</h1>

[Shauletay]

@herbertharriola 

Hi,

Can you explain how to do it dawn theme? 

I can't find the theme.js or theme.liquid

Thanks!

[herbertharriola]

Sorry about the super late answer but, first you go to your shopify admin account, then go to "Online Store", after that select "Themes" and then you will see your "Live theme" on the right side, over there you click on "Actions" and then on "Edit code", there, you will see a bunch of code, on the left panel you can search files through the search option, and there you can find those files i mentioned before.

Hope this helped you, have a nice day!

[LS_Hamburg]

I finally found a solution to this for the Narrative theme, despite not knowing any coding! It took me all day though. 

I thought I would write my solution here, in case that helps someone out. Duplicate or backup your theme before doing this, so you can restore everything if something goes unexpectedly.

Step 1:

In the product-template.liquid file:

find this code

<span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
<span class="product__current-price" data-regular-price>{{ current_variant.price | money }} </span>

add these two lines afterwards so it looks like this:

<span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
<span class="product__current-price" data-regular-price>{{ current_variant.price | money }} </span>
<span> / </span>
<span class="product__current-title" data-regular-title> {{ current_variant.title }} </span>

This just adds the variant title after the price. If you don't need the / then leave that line out.

Step 2:

Now Step 2 is going to sound totally impossible but if I can do it everyone can. 

First, a little information about what we are doing:

As I learned today, the liquid code (the step we just did here above) defines the code that initially comes up on a web page. But if you choose another variant from the dropdown menu, and you want text on your webpage to change automatically without having to reload the page (like the price, image or variant name), this happens via the javascript file. 

In the Narrative theme there are two similar javascript files found in the Assets folder - theme.js and theme.min.js. What I learned today via Google and Youtube is that code can either be written out beautifully with spaces and comments, or it can be compressed without all unnecessary coding, which makes it faster. This is called minifying (or minification? anyways something with mini in it). Generally, it seems like the liquid files don't have or need minification, but the javascript files do, which seems to make sense because they need to switch things fast on your website without reloading the page. 

It turns out that the theme.js is only there as a reference, so people can see the code written out with spaces and comments. However the website is actually only reading the minified theme.min.js. But its impossible to edit the minified file directly, at least for me. 

How I solved this I got from this Youtube video: https://www.youtube.com/watch?v=AY40N9a9PDA&t=635s - basically you copy the theme.js code into a new file in a coding software called Visual Studio Code (which is free and you can delete off your computer later), change the code (instructions below), add the minify app, minify the code, and copy that minified code back into your theme.min.js file. Easy! 🙂 

So I did these steps (the Youtube video explains this better than me):

2.1 - download Visual Studio Code, its free: https://code.visualstudio.com/

2.2 - created a new empty file

2.3 - copied the code from theme.js into Visual Studio Code

2.4 - edited the code:

under 

      productPrice: '[data-product-price]',

add the line

      productPrice: '[data-product-price]',
      productTitle: '[data-regular-title]',

under this

        this._updateCartButtonState(variant, $container);

add the line

        this._updateCartButtonState(variant, $container);
        this._updateProductVariantTitle(variant, $container);

and under 

          $(selectors$12.unitPriceContainer, $container).removeClass(
            classes$11.productPriceUnitUnavailable
          );
        }
      },

add all this

          $(selectors$12.unitPriceContainer, $container).removeClass(
            classes$11.productPriceUnitUnavailable
          );
        }
      },
      _updateProductVariantTitle: function(variant, $container) {
        var productTitle = variant.title;
        $(selectors$12.productTitle, $container).text(productTitle);    
      },

Basically I was copying the existing coding logic for updating the variant price automatically, and applying it to the variant title.

2.5 - add the minify app (watch the youtube video, it's too much detail for me to write here)

2.6 - minify your code

2.7 - copy and paste your minified code into Shopify, into your theme.min.js file (replace the entire existing code with your new code), and save your code. 

Let me know if this works for anyone, I hope I didn't forget a step, my brain is pretty fried after learning all of this today.

Hopefully this helps someone!