Product Title missing on Brooklyn Collection Page

Store Design
1

Hi,

My products are not showing titles under the thumbnails on the collection page. Can someone help me? This is for the Brooklyn theme.

2

Hello @Shopsujood

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

1 Like
3

www.shopsujood.com

password to collection: ramadan2023

4

Can you look into this right now because I have to go live in two hours

5

@Shopsujood

I don’t see the code calling product title.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your snippets/product-grid-item.liquid theme file.

  3. Search with keyword:

  4. Add the following code to the line above the search results


      {{ product.title }}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

6

I don’t see that either. I’m posting the code here

7

{% comment %}

This snippet is used to showcase each product during the loop,
‘for product in collection.products’ in collection.liquid.

A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.

Example

  • assign grid_item_width = ‘large–one-quarter medium–one-half’

{% endcomment %}

{% unless grid_item_width %}
{% assign grid_item_width = ‘large–one-third medium–one-half’ %}
{% endunless %}

{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% if featured_image.src== blank %} {{ featured_image.alt | escape }} {% else %} {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
{{ featured_image.alt | escape }}
{{ featured_image.alt | escape }} {% endif %} {% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}
{% if product.price_varies %} {{ product.price_min | money_without_trailing_zeros }} + {% else %} {{ product.price | money_without_trailing_zeros }} {% endif %}

{% if on_sale %}
{{ product.compare_at_price | money }}
{{ ‘products.general.sale_price’ | t }}
{% else %}
{{ ‘products.general.regular_price’ | t }}
{% endif %}

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ ‘general.accessibility.unit_price_separator’ | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ ‘products.general.unit_price’ | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}
8

@Shopsujood

I have added title product to your code. Please try again:


{% comment %}

This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.

A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.

Example
- assign grid_item_width = 'large--one-quarter medium--one-half'

{% endcomment %}

{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if featured_image.src== blank %}

{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}

{% endif %}

{% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}

{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}

    
      {{ product.title }}
    

{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}

+

{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{% if on_sale %}
{{ product.compare_at_price | money }}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ 'general.accessibility.unit_price_separator' | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ 'products.general.unit_price' | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}