Add Product type to product page Retina Theme

[Mentorpublish]

Hi,

I would like to add product type on my product page, just above the money there, is it possible to be done?

Here is my website: https://1cabe3-26.myshopify.com/

Thank you.

[Asad-Mahmood · Accepted solution]

Yes, it is possible to add the product type to your product page just above the price. Here is a Liquid code snippet that you can use to achieve this. You need to edit the product template file (usually product.liquid).

1. Go to your Shopify admin.
2. Navigate to Online Store > Themes > Actions > Edit code.
3. In the Sections folder, find the product-template.liquid file and open it.
4. Locate the section where the price is displayed. This is usually within a <div> or other HTML tag that contains {{ product.price | money }}.
5. Add the following code snippet just above the price display:
   
   

{% if product.type != blank %}
  <div class="product-type">
    {{ product.type }}
  </div>
{% endif %}
​

[Mehran_Ali]

Hi @Mentorpublish 

To add product type their are two ways 

• Take a text editor widget above the price than on right hand side to text editor there is a icon click on it it use to show dynamic data of product you can select products type their 
• If that solution is not working that you need a developer help who can create an option of product type their 

If you can do liquid code by yourself that's perfect if not kindly provide access to you store i will check and create that 

CONTACT INFORMATION 

Email: [email protected] 

Wattsapp: +92 3430211536

[Asad-Mahmood · Accepted solution]

Yes, it is possible to add the product type to your product page just above the price. Here is a Liquid code snippet that you can use to achieve this. You need to edit the product template file (usually product.liquid).

1. Go to your Shopify admin.
2. Navigate to Online Store > Themes > Actions > Edit code.
3. In the Sections folder, find the product-template.liquid file and open it.
4. Locate the section where the price is displayed. This is usually within a <div> or other HTML tag that contains {{ product.price | money }}.
5. Add the following code snippet just above the price display:
   
   

{% if product.type != blank %}
  <div class="product-type">
    {{ product.type }}
  </div>
{% endif %}
​

[Mentorpublish]

Hi @Asad-Mahmood ,

Hi it worked well, I just have one more question, is it possible to add link to it, so that when I click on it, it will show all items that have the same product type?

Thank you.

[Asad-Mahmood · Accepted solution]

You can create a link that, when clicked, will show all items with the same product type by using a collection filter in the URL. Here’s how you can modify your code to include a link:

{% if product.type != blank %}
  <div class="product-type">
    <a href="/collections/all/{{ product.type | handleize }}">
      {{ product.type }}
    </a>
  </div>
{% endif %}

[Mentorpublish]

Hi @Asad-Mahmood ,

I need to change a bit on the link format, but apparently, it worked! 

Really really appreciate your help, thank you very much!

[Asad-Mahmood]

Glad to know that it worked for you