We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Short Description on Collection page and Featured Collection section

Solved

Short Description on Collection page and Featured Collection section

technase
Shopify Partner
229 2 55

I am using the Turbo 9.3.0 theme and would like to display one of the products metafields, "short_description" on the collection page just below the price. I also want to include this short description in the featured collection section on the homepage.

Link: https://freedomtech-au.myshopify.com/
storefront PW: ialyal

Any help is greatly appreciated 

technase
Accepted Solutions (2)
theycallmemakka
Shopify Partner
1813 440 474

This is an accepted solution.

 

 

Hi @technase 

 

Thank you for the reply. I have reviewed the file and found where we should add the code. If you have not made any changes at the code level, you can replace the code in the file product-info.liquid with the updated code below.

 

 

{% assign variant = product.selected_or_first_available_variant %}

<div class="product-details">
  <span class="title" itemprop="name">
    {{- product.title | escape -}}
  </span>
  {% if settings.display_vendor %}
    <span class="brand">
      {{ product.vendor }}
    </span>
  {% endif %}

  {% if settings.show_star_ratings and product.metafields.reviews.rating.value != blank %}
    <div class="product-rating">
      {%
        render 'rating-stars',
        value: product.metafields.reviews.rating.value.rating,
        scale_max: product.metafields.reviews.rating.value.scale_max,
      %}
      <p class="rating__text">
        <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
      </p>
      <p class="rating__count">
        <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
        <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "general.accessibility.total_reviews" | t }}</span>
      </p>
    </div>
  {% endif %}

  {% if collection_handles contains 'coming-soon' %}
    <span class="coming-soon">{{ 'collections.general.coming_soon' | t }}</span>
  {% else %}
    {% if settings.quick_shop_enabled and settings.quick_shop_style == 'inline' %}
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
      <div class="price-ui price-ui--loading" data-price-ui>
        <noscript>
          <style>
            .price-ui--loading {
              display: block !important;
              opacity: 1 !important;
            }
          </style>
        </noscript>
        {% assign compare_at_price = false %}
      
        {% if product.compare_at_price and product.compare_at_price != product.price %}
          {% if product.compare_at_price_varies %}
            {%- capture price_min -%}
              {%-
                render 'price-ui-templates',
                template: 'price-min',
                value: product.compare_at_price_min,
              -%}
            {%- endcapture -%}
      
            {%- capture price_max -%}
              {%-
                render 'price-ui-templates',
                template: 'price-max',
                value: product.compare_at_price_max,
              -%}
            {%- endcapture -%}
      
            {%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
          {% else %}
            {%- capture compare_at_price -%}
              {%-
                render 'price-ui-templates',
                template: 'price',
                value: product.compare_at_price,
              -%}
            {%- endcapture -%}
          {% endif %}
        {% endif %}
      
        {% if product.price_varies %}
          {%- capture price_min -%}
            {%-
              render 'price-ui-templates',
              template: 'price-min',
              value: product.price_min,
            -%}
          {%- endcapture -%}
      
          {%- capture price_max -%}
            {%-
              render 'price-ui-templates',
              template: 'price-max',
              value: product.price_max,
            -%}
          {%- endcapture -%}
      
          {%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
        {% else %}
          {%- capture price -%}
            {%-
              render 'price-ui-templates',
              template: 'price',
              value: product.price,
            -%}
          {%- endcapture -%}
        {% endif %}
      
        {%-
          render 'price-ui-templates',
          template: 'price-ui',
          compare_at_price: compare_at_price,
          price: price,
          unit_pricing: false,
        -%}
      </div>
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}

    {% else %}
      <span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}">
        {% unless product.available == false and settings.display_price == false %}
          <span class="current_price">
            {% if product.price_varies %}
              <small class="from"><em>{{ 'products.general.from' | t }}</em></small>
            {% endif %}
            {% if product.price_min > 0 %}
              <span class="money">{% render 'price-element', price: product.price_min %}</span>
            {% else %}
              {% if settings.free_price_text != blank %}
                <span class="free">{{ settings.free_price_text }}</span>
              {% else %}
                <span class="money">{% render 'price-element', price: product.price_min %}</span>
              {% endif %}
            {% endif %}
          </span>
          <span class="was_price">
            {% if product.price < product.compare_at_price %}
              <span class="money">{% render 'price-element', price: product.compare_at_price %}</span>
            {% endif %}
          </span>
        {% endunless %}
        <div class="sold_out">
          {% unless product.available %}
            {{ 'products.product.sold_out' | t }}
          {% endunless %}
        </div>
      </span>
    {% endif %}
  {% endif %}
  {% if settings.quick_shop_enabled and settings.quick_shop_style == 'popup' %}
    {%
      render 'unit-price',
      item: variant,
      variant: product,
      product: product,
      class: 'product-details__unit-price'
    %}
  {% endif %}
  {% if product.metafields.custom.short_description %}
  <span class="product-meta-short_description">{{ product.metafields.custom.short_description }}</span>
  {% endif %}
</div>

 

 

Please add this and let me know if this works for you.

 

Thank you

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

theycallmemakka
Shopify Partner
1813 440 474

This is an accepted solution.

Hi @technase 


IMPORTANT: Please remove the google drive file thats listed above. It is currently public. Other people will be able to download the file and reuse it.

Also please select my answer as accepted so that this post is solved as marked.

 
Follow these Steps to left align the text:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style> 
.product-list .thumbnail .product-meta-short_description{
    display: inline-block;
     text-align: left!important;
}
</style>

theycallmemakka_0-1722160017132.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 7 (7)

theycallmemakka
Shopify Partner
1813 440 474

Hi @technase 

 

Your theme must have a file named product-grid. Can you provide me a copy of this code? We will have to look into this code and find where we can add the new meta field.

 

As your theme is a paid theme, we do not have access to the code. So, we cannot test that on out test store.

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

technase
Shopify Partner
229 2 55

@theycallmemakka 
Thank you for the response. I don't see any product-grid but I can share the theme file with you if it can help.. 
https://drive.google.com/file/d/1uqf6yiMaGpA-zBJ2b2aJdC3spEacbTLM/view?usp=sharing
this is the original file, not the customized one, if you can look into it and guide me where to make the changes, that would be great. 

technase
theycallmemakka
Shopify Partner
1813 440 474

This is an accepted solution.

 

 

Hi @technase 

 

Thank you for the reply. I have reviewed the file and found where we should add the code. If you have not made any changes at the code level, you can replace the code in the file product-info.liquid with the updated code below.

 

 

{% assign variant = product.selected_or_first_available_variant %}

<div class="product-details">
  <span class="title" itemprop="name">
    {{- product.title | escape -}}
  </span>
  {% if settings.display_vendor %}
    <span class="brand">
      {{ product.vendor }}
    </span>
  {% endif %}

  {% if settings.show_star_ratings and product.metafields.reviews.rating.value != blank %}
    <div class="product-rating">
      {%
        render 'rating-stars',
        value: product.metafields.reviews.rating.value.rating,
        scale_max: product.metafields.reviews.rating.value.scale_max,
      %}
      <p class="rating__text">
        <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
      </p>
      <p class="rating__count">
        <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
        <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "general.accessibility.total_reviews" | t }}</span>
      </p>
    </div>
  {% endif %}

  {% if collection_handles contains 'coming-soon' %}
    <span class="coming-soon">{{ 'collections.general.coming_soon' | t }}</span>
  {% else %}
    {% if settings.quick_shop_enabled and settings.quick_shop_style == 'inline' %}
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
      <div class="price-ui price-ui--loading" data-price-ui>
        <noscript>
          <style>
            .price-ui--loading {
              display: block !important;
              opacity: 1 !important;
            }
          </style>
        </noscript>
        {% assign compare_at_price = false %}
      
        {% if product.compare_at_price and product.compare_at_price != product.price %}
          {% if product.compare_at_price_varies %}
            {%- capture price_min -%}
              {%-
                render 'price-ui-templates',
                template: 'price-min',
                value: product.compare_at_price_min,
              -%}
            {%- endcapture -%}
      
            {%- capture price_max -%}
              {%-
                render 'price-ui-templates',
                template: 'price-max',
                value: product.compare_at_price_max,
              -%}
            {%- endcapture -%}
      
            {%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
          {% else %}
            {%- capture compare_at_price -%}
              {%-
                render 'price-ui-templates',
                template: 'price',
                value: product.compare_at_price,
              -%}
            {%- endcapture -%}
          {% endif %}
        {% endif %}
      
        {% if product.price_varies %}
          {%- capture price_min -%}
            {%-
              render 'price-ui-templates',
              template: 'price-min',
              value: product.price_min,
            -%}
          {%- endcapture -%}
      
          {%- capture price_max -%}
            {%-
              render 'price-ui-templates',
              template: 'price-max',
              value: product.price_max,
            -%}
          {%- endcapture -%}
      
          {%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
        {% else %}
          {%- capture price -%}
            {%-
              render 'price-ui-templates',
              template: 'price',
              value: product.price,
            -%}
          {%- endcapture -%}
        {% endif %}
      
        {%-
          render 'price-ui-templates',
          template: 'price-ui',
          compare_at_price: compare_at_price,
          price: price,
          unit_pricing: false,
        -%}
      </div>
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}

    {% else %}
      <span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}">
        {% unless product.available == false and settings.display_price == false %}
          <span class="current_price">
            {% if product.price_varies %}
              <small class="from"><em>{{ 'products.general.from' | t }}</em></small>
            {% endif %}
            {% if product.price_min > 0 %}
              <span class="money">{% render 'price-element', price: product.price_min %}</span>
            {% else %}
              {% if settings.free_price_text != blank %}
                <span class="free">{{ settings.free_price_text }}</span>
              {% else %}
                <span class="money">{% render 'price-element', price: product.price_min %}</span>
              {% endif %}
            {% endif %}
          </span>
          <span class="was_price">
            {% if product.price < product.compare_at_price %}
              <span class="money">{% render 'price-element', price: product.compare_at_price %}</span>
            {% endif %}
          </span>
        {% endunless %}
        <div class="sold_out">
          {% unless product.available %}
            {{ 'products.product.sold_out' | t }}
          {% endunless %}
        </div>
      </span>
    {% endif %}
  {% endif %}
  {% if settings.quick_shop_enabled and settings.quick_shop_style == 'popup' %}
    {%
      render 'unit-price',
      item: variant,
      variant: product,
      product: product,
      class: 'product-details__unit-price'
    %}
  {% endif %}
  {% if product.metafields.custom.short_description %}
  <span class="product-meta-short_description">{{ product.metafields.custom.short_description }}</span>
  {% endif %}
</div>

 

 

Please add this and let me know if this works for you.

 

Thank you

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

technase
Shopify Partner
229 2 55

Perfect, thank you so much.. is there a way I can left align this text ? all my other details are aligned centrally.. 

technase
theycallmemakka
Shopify Partner
1813 440 474

This is an accepted solution.

Hi @technase 


IMPORTANT: Please remove the google drive file thats listed above. It is currently public. Other people will be able to download the file and reuse it.

Also please select my answer as accepted so that this post is solved as marked.

 
Follow these Steps to left align the text:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style> 
.product-list .thumbnail .product-meta-short_description{
    display: inline-block;
     text-align: left!important;
}
</style>

theycallmemakka_0-1722160017132.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

technase
Shopify Partner
229 2 55

Thank you so much. 

technase
theycallmemakka
Shopify Partner
1813 440 474

Hi @technase ,

 

The google drive is still public. Can you remove the files from the drive.

 

Thank you

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com