Showing Product Title under products

avictor
Excursionist
19 0 7

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
Shopify Partner
2047 332 446

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!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
avictor
Excursionist
19 0 7
JHKCreate
Shopify Partner
2047 332 446

Request Sent!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
avictor
Excursionist
19 0 7

@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?

0 Likes
JHKCreate
Shopify Partner
2047 332 446

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

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
avictor
Excursionist
19 0 7

i am able to handle liquid 

0 Likes
JHKCreate
Shopify Partner
2047 332 446

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!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
avictor
Excursionist
19 0 7

it was in product-card-grid.liquid 

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

 

Capture.JPG

 

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 

0 Likes
avictor
Excursionist
19 0 7

bump

@JHKCreate 

0 Likes