Custom Product Titles

Solved
Highlighted
Tourist
9 1 0

Hi,

I'd like to know how to change the product titles on my store-front to display a custom field added to a product in the admin (bulk editor). The backstory is we need to have inventory/product names in the admin different than what displays on the front-end (customer-facing) side. Our POS system requires that product names/titles include a bunch of keywords that we would like to limit on the front-end. Is this possible with variants or adding custom fields? If so, what variables or code need to change in the template?

0 Likes
Highlighted

This is an accepted solution.

Hi BlueIsland. Walter here from microDev (Shopify Partner).

 

If I understand your problem correctly, you have a product title that you want to remove the last bit from when displayed on your website? If your product is named as "Gift Item keyword1 keyword2 keyword3" or similar, you could simply use a string filter to remove the keywords from the displayed title. To make it easier, add a special character to the end of your product name before all keywords, e.g. "Gift Item! keyword1 keyword2 keyword3".

 

Now click on the edit code option in the Themes, Actions menu and find the section names "product-template.liquid". The section may have a slightly different name depending on your theme. Name press CTRL+F in the text editor to bring up the find and search for {{ product.title }}. This may occur more than once.  Before the first occurrence of this, enter the following line:

{% assign product-title-short =  product.title | split:  '!' %} This takes the product title and assigns it to a new variable, but splits it in 2 parts - name before the '!' and keywords after the '!'. Change the '!' to whatever character you want to split on.

 

Now change all versions of {{ product.title }} to {{ product-title-short[0] }} .

 

Please note that this will not change the name of your product on other pages (not product pages), so if you want to change the name in the Cart or other pages, you will need to follow the same method in those pages.

 

Let me know if this works for you! If you need more help with this, feel free to send me an email at support@microDev.today and I'll be happy to help.

0 Likes
Highlighted
Tourist
9 1 0

Works beautifully! Thank you!! Now I just need to find other pages that contain product.title and make the same change... like on collection pages!

0 Likes
Highlighted

Feel free to drop me an email if you get stuck at any stage!

0 Likes
Highlighted
Tourist
9 1 0

Last place I ran into was on featured-product.liquid... and I added the code below the line: 'product == empty' which is where  'product.title' was replaced. Haven't tested featured products yet but was wondering if this will work. Thanks again for you help!

 

<h2 class="visually-hidden">{{ 'sections.featured_product.title' | t }}</h2>
        <h3 class="h1 product-single__title">
          {% unless product == empty %}
          {% assign product-title-short =  product.title | split:  '-' %}
            {{ product-title-short[0] }}
          {% else %}
            {{ 'homepage.onboarding.product_title' | t }}
          {% endunless %}
        </h3>
0 Likes
Highlighted
Tourist
9 1 0

Also on the cart side, I'm having trouble hiding the same keywords.

 

Here's the code:

<div class="list-view-item__title">
                      <a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
                        {{ item.product.title }}
                      </a>
                    </div>

Not sure where to go from here... changing {{ 'item.product.title' }} removes the anchor title altogether. Plus, that little cart pop-up after you add to cart from the product page needs to be changed. Thanks again.

 

Updated.

I got it to work with this...

<a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
                                                {%- assign product-title-short =  item.product.title | split:  '-' -%}
                                                {{ product-title-short[0] }}
                                              </a>

but now for that little cart pop-up!

0 Likes
Highlighted

This is an accepted solution.

Great to see you making so much progress on this! Keep up the good work. I have sent you an email to follow up on all of this.

 

To keep this forum clean, could I ask that we close this discussion and rather open a new question if needed or resolve any follow-ups separately.

 

 

0 Likes
Highlighted
Tourist
9 1 0

Sounds good to me!

0 Likes