How can I display product type on a product page?

[AchilleasV]

Hello, I would like to display the product type inside the product page.

I was wondering if I could add a product type value to the text instead of the vendor.

Site: https://chicpawz.com

Pass: shpseo

[Guleria]

Hello @AchilleasV ,

You have to use custom liquid block.
Pease check the screen-shot

Thanks

[ZestardTech]

Hello @AchilleasV

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find sections > main-product.liquid and paste this at the top of product__title:

{{ product.type }}

[AchilleasV]

Thank you all for your help! I used this solution.

I was wondering if I could add font-size for mobile screens and desktop screens and a font-color in the product type with this solution.

[Guleria]

Please check the screen-shot

And here is code

{{ product.type }}

Simply copy and paste it but keep note you have to change the fdont-size and color a/to your need.

Thanks

[AchilleasV]

This works, thanks! For some reason I get a large space below the product type though, and I can’t find the reason. I could add a margin-top:0; to the product__title, but I was wondering if there is a more elegant solution.

My code:

{{ product.type }}

https://chicpawz.com/products/pet-toy-natural-rubber-resistant-to-biting-and-grinding-teeth

[Guleria]

Use margin-bottom

.cust-product-type {
    color: #fc7060;
    font-size: calc(var(--font-heading-scale) * 1.8rem);
    font-weight: 800; 
    margin-bottom: -16px;
}

[AchilleasV]

Thank you!