Showing Product Title under products

[avictor]

I want to show the product title under my product just above the price - how do I do that?

this is the site https://typebooks.ca/collections/new-arrivals

I am using debut theme

Thanks

[JHKCreate]

Hi @avictor 

Would you mind sharing your store's URL so we can check this for you? It would take us a few minutes to code this in should you want.

Cheers!

[avictor]

https://typebooks.ca/

@JHKCreate 

[JHKCreate]

Request Sent!

[avictor]

@JHKCreate 

Is it possible for you to tell me what I need to do or what I need to look for in the code without giving you access to the site?

[JHKCreate]

It would be much faster for us to add it by ourselves here, how proficient are you Liquid?

[avictor]

i am able to handle liquid 

[JHKCreate]

Alright so you would need to find your product-grid-item or similar template that is generating the collection. You can start by getting the collection.liquid file then moving onwards. 

Once you locate the Liquid code that is being used to render, add "<span class="produtTitle">{{product.title}}</span>" above the pricing div. You can then style the Title as needed using the class name you gave her.

Cheers!

[avictor]

it was in product-card-grid.liquid 

when I do put it in, I get this display:

this is the code below

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
  <span class="produtTitle">{{ product.title }}</span>  
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}
{% include 'product-price', variant: product %}
  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>


  
</div>

@JHKCreate 

[avictor]

bump

@JHKCreate