The product title are missing from my collection (product) page

Solved
Highlighted
Tourist
5 0 3

I somehow messed up the code on the collection page. I wanted to remove the loox review and follow some instruction. it removed the star rating but it also removed the title! also the image sizes are inconsistent. Please help!!! I use debut theme.

https://futuraoasis.com/collections/product

 

 

1 Like
Highlighted
Shopify Partner
7687 1058 2673

Hello, @Kimby 

Welcome to the Shopify community!
and Thanks for your Good question.

your removed product title code 

can you please provide product card grid item code so i will update or add me on your staff then i will do direct theme code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
5 0 3

Thanks in advance!

 

 

 

{% 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="visually-hidden">{{ 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 %}

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


{% include 'product-price-listing', product: product, show_vendor: show_vendor %}

</div>

0 Likes
Highlighted
Shopify Partner
7687 1058 2673

This is an accepted solution.

@Kimby 

Thanks 

please update this code

{% 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="visually-hidden">{{ 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 %}

<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 class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
{% include 'product-price-listing', product: product, show_vendor: show_vendor %}

</div>

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
5 0 3

oh my god, who are you! you are freaking amazing! please tell me how to direct contact you when i have a problem. i will give you a million likes if i can!!!

1 Like
Highlighted
Shopify Partner
7687 1058 2673

@Kimby 

Thanks update and your compliment 

i have sent more details in PM.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes