How to add link to product type on product page

Store Design
,

Topic summary

A user wants to make the product type on their product page clickable, linking to a collection page for that product type.

Initial Solution:

  • Another user provided code wrapping the product type in an anchor tag with custom styling
  • The link initially failed, pointing to /products/collections/[type] instead of /collections/[type]

Working Solution:

<a href="/collections/{{ product.type | handleize }}">{{ product.type }}</a>

Remaining Issue:

  • The original poster struggled to adjust vertical margins and couldn’t locate the .product__title class in section-main-product.css to modify spacing
  • A screenshot was shared showing the class location after the store password was removed

Alternative Approach:

  • A third participant suggested using Shopify’s built-in Liquid filter: {{ product.type | link_to_type }}
  • This automatically creates links to product type pages without requiring matching collections, offering more flexibility if product types change

Status: The linking functionality is resolved, though margin adjustments may still be in progress.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I managed to add product type to my default product page using this code:

<div class="cust-product-type">{{ product.type }}</div>
<style>
/* for desktop */
.cust-product-type {
    color: #F4C2C2;
    font-size: calc(var(--font-heading-scale) * 1.3rem);
    margin-top: -12px;
    font-weight: 150; 
    margin-bottom: -16px;
</style>

What can I add to the code so that once you press the product type you get linked to the page with the product type? I have a page dedicated to each specific product type for the customer to browse and I want this button to allow them to get to that page from the product page.

Thanks in advance!

2

Hey @gatchy , you would need to add the anchor tag instead of just regular div like this, let me know if this helps, thank you!

{{ product.type }}
3

gatchy_0-1722881202756.png
gatchy_0-1722881202756.png139Ă—135 2.34 KB

Now this is how it looks. I don’t want the gap on top of it and on the bottom. Also I want to change the color and size of the text. How can I modify the code to do this? Thank you so much for your help!

4

gatchy_1-1722881427627.png
gatchy_1-1722881427627.png127Ă—106 2.16 KB

I want it to look like this but allow me to click on it to reach the product type page.

5

Hey @gatchy , we can add a custom class to the anchor tag and I can add some sample styling to this and you can change it according to your needs, check this below:

{{ product.type }}
6

Thank you so much!

7

I think that would be the close styling, let me know if this helps, thank you!
8

You are welcome!

9

When I try to use the link it gives error. Also, I can not change the top and bottom margin, only the horizontal margin. How can I fix this?

10

What error does it show? Can you share the link where you have added this code?

11

https://celesya.se/products/paris

This is an example of the product page. You should be able to press “ringar” and get to the page with that product type.

12

Okay, you said you have a dedicated page for each product type, can you share that page too, I wanted to see that page. Is it page or product for that? What’s the URL of that page?

https://celesya.se//pages/Ringar ?
https://celesya.se//product/Ringar ?

13

https://celesya.se/collections/ringar

Here you get to rings, for example. This would be the page I want to reach from the ring product. As every product is marked as belonging to a collection they appear on these pages automatically.

14

Got it! Replace with this code, and secondly, for the vertical spacing, you would need to remove the Product Title bottom margin by navigating to the assets file name “section-main-product.css” and search for “.product__title” and then give margin-bottom:0 and also try to add the styling of the anchor tag in that file as well. While adding the style to that CSS file do remove the and tags as well.

{{ product.type }}
15

It still doesn’t work. It goes to this link "https://celesya.se/products/collections/ringar" instead of "https://celesya.se/collections/ringar". It adds “products” before “collections” for some reason.

16

Check now.

[{{ product.type }}](https://celesya.se/collections/{{ product.type | handleize }})
17

You are a hero. Thank you so much for your help! I will try to fix the margins as well. Will return if I can’t manage.

18

Glad this helped. You are welcome!

19

I can’t find “.product__title” or “.product_title” in “section-main-product.css”.

20

Your store is password protected, I can’t check which class was assigned to the product title.