Related products custom block without images of other products

Store Design
1

Hello,

This is one of my product pages: https://jonathandunsky.com/products/ten-years-gone

As you can see, I have a number of variants here, based on format.

I’d like to change the way my shop is built so that each of these variants is a product. And then, I’d like to have a custom block that will allow me to display the other products (which are currently variants) as other options.

I found this code: https://websensepro.com/blog/how-to-add-custom-related-products-to-your-product-page-shopify/

that will allow me to add custom related products. But I’d like not to display the related product images, but a single word within this horizontal oval shape, like what I’m showing now.

To do this I need to know:

  1. How to add a field to each product where I can set a text that will be displayed when the product is shown in a related product block.

  2. How to change the code above to show this, and have the oval shape around the text. And to not show the product image.

I’d be grateful for any help.

Thank you.

2

Hi @JonathanDu ,

If you want to display each variant as a separate product then you have to add each product separately and removed the variant from each product.

I hope I understand your requirements well.

3

I plan to remove all the variants and define each variant as a separate product, but whenever I go to one of these new products, I want to display the other products (what are now variants) just like they’re displayed now.

I think I can use the code I linked to above to have a related products block, but I want to display the related products like I display the variants now, not show their images like the code I linked to will do.

4

Ok, I think I got your idea. You have added each variant as a separate product but you want to display the related products as a variant shows right now. Like an oval button.

correct me if I am wrong. If I am on the right way then I can help you with the same by doing some customization and by adding liquid code.

5

Yes. You got it. I want it to look the same as it does now.

I haven’t added them as products yet. I plan to do so once I know it can work. Currently, they are still variants. The code I linked to above is close to what I’d like, but instead of showing images of the related products, I’d like to show a single word for each product (maybe I can set this word as a new Metafield?)

6

Yes, this is possible. You can add the other products’ names. Yes this is possible using meta field as well.

add each product as a separate and using meta field just fetch the other product’s names

7

Okay. So what should I do?

Set up a metafield with each product in which I set how it will appear as a related product?

And then, what adjustments do I need to make to the code I linked to in my first comment? And how to have the metafield show inside an oval?

8

so, you have to create the metafield with products and select the products in that metafield that you want to display on the front side.

and after that open your product template in the theme and enter the code of metafield to fetch the selected meta field products name and URL.

I hope you have a better understanding of liquid coding.

9

I understand that the code and instructions here will create a related formats block that will show images.

https://ed.codes/blog/related-products-color-options-block-for-product-page-shopify

I can follow these instructions. What I don’t know is how to show a one-word descriptor of each related product within an oval (with adjustable size according to the text) instead of the image.

I created a metafield for the one-word descriptor. That’s no problem.

10

If you are following the above URL instructions then update the code of the line in liquid.

currently in code.

{% if prod.available == true %}
            
              
            
          {% endif %}

Update the above code as shown below:

{% if prod.available == true %}
            
              {{ prod.title }}
            
          {% endif %}
11

Thank you.

I defined a single line text Metafield with this ID: product_info.related_formats

Where do I put it in the code?

How do I have an oval (with adjustable size) around the output of this field?

12

Just update the code where you put it before by following the given URL.

once, you are done with that then let me know I’ll check and give you the CSS code to make it text with an oval shape border.

13

Thank you.

I did as you said. Here is a product page with the change: https://jonathandunsky.com/products/grandma-rachels-ghosts-audiobook

The thing is, I don’t want the whole product name in the related product section. I want to display the value of a metafield I set up. Here is its ID: product_info.related_formats

How do I display the value of this field inside an oval, instead of the product name, and remove the underscore line of the link? I want it in black.

14

If you want to set up the value you have set up in metafield then you have to develop a separate code.

If you have an idea then you have to give 2 different values one for the URL and second one for the name.

if you can code better then you can do it. otherwise, I can help you with this. For help, I need to check your theme code.

15

Hi,

Instead of displaying the product’s title, I want to display its subtitle, which is a one-word metafield that I set up. What changes do I need to make to the code to make this happen?