How can I add clickable words in product metafields?

[lpitelli]

Hello, good morning!

I need help with a metafield configuration.

I want to add clickable words in the metafields to relate these words to products.

I can do this in two ways, but I’m not succeeding in either.

1 - Create a text metafield and be able to add links to the words in the metafields of each product.
2 - Create a product metafield and edit how it appears in the theme. In this case, I need help removing the “add to cart” button because my products are customizable, and if the customer adds to the cart through this button, they will receive the wrong product.

Below is a screenshot of exactly how I want the metafield to appear.

I want to relate products in this way, using clickable text.

Can someone help me with this question? I’m not very familiar with coding.

Thank you!

[system]

Can you explain what you want to do? Maybe there’s a better way than what you’re thinking.

[lpitelli]

Hi, how are you?

I want to showcase related products on the product page. However, I don’t want the product image or the add to cart button. I want it in plain text, formatted, and with a link.

I’ll send the link of the website where I saw this, maybe it will help (not sure if I can share links here like this).

https://pawfecthouse.com/collections/ornament/products/happy-howlidays-with-all-our-love-dog-cat-personalized-custom-ornament-wood-unique-shaped-christmas-gift-for-pet-owners-pet-lovers

I want to replicate exactly what this website is doing on my site.

Thank you @Anonymous

[system]

Ok, It is possible by creating a product selection metafield. Here is how you can set this from the dashboard.

after saving this. you can select products like the ones below.

Don’t worry. this will not display the products on your product page. It required some liquid coding. If you want to display only the text and a product link, you can do it now. If you know some liquid coding I can provide you the code then you can put the code in your product page code. or you can give me access to your store to help you.

Thanks.

[lpitelli]

Hello, how are you?

Thank you for the quick response.

Can you provide me with the code and explain exactly where I need to insert it?

Thank you very much!

[system]

I am fine. what about you?

1. create a file in your snippets folder. Set the name of its others-products.liquid

2. Paste the code below in that file.

{% assign others = product.metafields.namespace.key %} 

  Other versions:
  {% for item in others.value -%}
    {{ item.title | upcase }}
    {% unless forloop.last %}
      |
    {% endunless %}
  {%- endfor %}

Keep in mind that it will not work because the actual metafield definition is missing. Create the metafield and modify the code. replace “namespace” and “key” with your metafield definition.

3. Place the following line of code into your product page file at the specified location to showcase other products, as depicted in your attached image.

{% render "others-products" %}

Without getting your full code I can’t say where to paste it. If you want I can do it for you via Collaborator Access. Look I did in my store.

[lpitelli]

Abdullah, thank you very much! It worked perfectly. You’re a genius.

I just wanted to know one more thing: is it possible to change the product title (item.title) to another field to shorten the displayed name?

I created a text metafield, but I couldn’t point to it.

Thank you!

[system]

I haven’t fully understood your inquiry yet. You can consider abbreviating the title, for example, from “Product Full Name” to “Product Full Na…”.

To do that, change the code with this

{{ item.title | upcase | truncate: 20 }}

here “truncate: 20” indicating the number of words that you want to keep.

If this does not meet your needs let me know.

Thanks.