Add Product type to product page Retina Theme

Solved

Add Product type to product page Retina Theme

Mentorpublish
Explorer
63 0 14

Hi,

 

Mentorpublish_0-1722691393213.png

 

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.

Accepted Solutions (2)

Asad-Mahmood
Trailblazer
175 34 41

This is an 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 %}
​

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





View solution in original post

Asad-Mahmood
Trailblazer
175 34 41

This is an 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 %}




If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





View solution in original post

Replies 6 (6)

Mehran_Ali
Shopify Partner
111 17 16

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: mehran.ali5300@gmail.com 

Wattsapp: +92 3430211536

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.


Email: Mehran.ali5300@gmail.com


WhatsApp: +92 343 0211536

Asad-Mahmood
Trailblazer
175 34 41

This is an 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 %}
​

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





Mentorpublish
Explorer
63 0 14

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
Trailblazer
175 34 41

This is an 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 %}




If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





Mentorpublish
Explorer
63 0 14

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
Trailblazer
175 34 41

Glad to know that it worked for you

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp