Placement of Available sizes on product grid (collection)

Solved
Ljkeos
Excursionist
23 0 9

THEME: Debut

https://past-present-future-clothing.myshopify.com/collections/hoodies

The password is "PPF"

Hi,

After quickly searching the internet trying to find code that would display available sizes for clothing products on the product grid (collection page), I found this piece of code:

 

{% if collection.template_suffix == "hoodies" %}
 
    <p>
      {% for option in product.options %}
        {% if option == 'Size' %}
            {% if product.options_with_values[0].name=="Size" %}
                {% for variant in product.variants %}
 
                  {{ variant.option1  }}
 
                {% endfor%}
            {% elsif product.options_with_values[1].name=="Size" %}
                {% for variant in product.variants %}
 
                  {{ variant.option2  }}
 
                {% endfor%}
            {% else %}
                {% for variant in product.variants %}
 
                  {{ variant.option3  }}
 
                {% endfor%}
            {% endif %}
 
        {% endif %}
     {% endfor %}
    </p>
  {% endif %}

 

 

 

Inserting this into the end of snippets/product-card-grid.liquid, the collection page looks something like this:

Ljkeos_0-1624038913581.png

 

Is there a way to center this text? Also, is there a way to put the sizings in between the Product Title and the price?

Here is the code I used to center the Product Title and Price, if that is in any way helpful:

 

 

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}


.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

 

 

Copy

Thank you.

0 Likes
namphan
Explorer
58 6 14

Hi @Ljkeos,

Go to file theme.css and add code:
.grid__item--collection-template p{
  text-align: center;
}

0 Likes
Ljkeos
Excursionist
23 0 9

Hey @namphan,

Thank you for the response. After adding this piece of code to theme.css, you are correct that the sizes are centered. Here is what it looks like:

Screen Shot 2021-06-19 at 12.02.47 PM.png

As you can tell, it is a little bit clunky that the sizes are way below the actual product. Is there a way I am able to move the sizes in between the product title and the price?

P.S. When I found the code to add the sizes, someone mentioned moving the code relative to other code in product-card-grid.liquid. I was able to move the sizes on top of the product title but not between the two. I do not remember what I did to do so. Here is the entirety of the code in product-card-grid.liquid:

<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 }}">
    <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-loading-animation>
    <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>
  <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 collection.template_suffix == "hoodies" %}
 
    <p>
      {% for option in product.options %}
        {% if option == 'Size' %}
            {% if product.options_with_values[0].name=="Size" %}
                {% for variant in product.variants %}
 
                  {{ variant.option1  }}
 
                {% endfor%}
            {% elsif product.options_with_values[1].name=="Size" %}
                {% for variant in product.variants %}
 
                  {{ variant.option2  }}
 
                {% endfor%}
            {% else %}
                {% for variant in product.variants %}
 
                  {{ variant.option3  }}
 
                {% endfor%}
            {% endif %}
 
        {% endif %}
     {% endfor %}
    </p>
  {% endif %}

Thank you.

0 Likes
namphan
Explorer
58 6 14

This is an accepted solution.

Hi @Ljkeos,

Please change code:

 

<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 }}">
    <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-loading-animation>
    <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>
  <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>
  {% if collection.template_suffix == "hoodies" %}
 
    <p>
      {% for option in product.options %}
        {% if option == 'Size' %}
            {% if product.options_with_values[0].name=="Size" %}
                {% for variant in product.variants %}
 
                  {{ variant.option1  }}
 
                {% endfor%}
            {% elsif product.options_with_values[1].name=="Size" %}
                {% for variant in product.variants %}
 
                  {{ variant.option2  }}
 
                {% endfor%}
            {% else %}
                {% for variant in product.variants %}
 
                  {{ variant.option3  }}
 
                {% endfor%}
            {% endif %}
 
        {% endif %}
     {% endfor %}
    </p>
  {% endif %}
  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

</div>

 

and add code CSS: 

.grid__item--collection-template p {
  text-align: center;
  margin-bottom: 0px;
}
Ljkeos
Excursionist
23 0 9

@namphan Thank you so much! It worked and it looks great.

For anyone visiting this thread in the future, replace all the code in snippets/product-card-grid.liquid with the imbedded code in the message above. Then add the code at the end of the message into the end of Assets/theme.css.

I have one more question: How would i apply this to several collections? This code relies on and if statement, mainly this line:

{% if collection.template_suffix == "hoodies"%}

How would I be able to apply this to several collections without copy and pasting this piece of code four times (which does not end up working anyway)?

0 Likes
namphan
Explorer
58 6 14

Hi @Ljkeos,

template_suffix is only supported when you use a collection with a different layout, if you only need to check the collection you can use collection.handle. Refer https://shopify.dev/docs/themes/liquid/reference/objects/collection#collection-handle
If you want to display for multiple collections you can use or:
{% if collection.handle == "hoodies" or collection.handle == "hoodies1" or collection.handle == "hoodies2" %}
Hope it clear to you.

Ljkeos
Excursionist
23 0 9

@namphan,
Thank you! This makes sense. I have put in the code and noticed that the product sizes show on the two pages "Hoodies" and "collectionexample1", while they do not show up for "tshirts" and "collectionexample2". I believe the reason is that "hoodies" and "tshirts" have the same page layout, and "collectionexample1" and "collectionexample2" have the same page layout, something you may have mentioned. Is there a way to fix this? (I know I could also just add a "ghost" section at the end of the page to make the layouts different, but I'm looking for clean solutions)

An example of my code:

{% if collection.handle == "hoodies" or collection.handle == "tshirts" or collection.handle == "examplecollection1" or collection.handle == "examplecollection2"%}

Thank you again!

0 Likes
namphan
Explorer
58 6 14

Hi @Ljkeos,

Each layout will have its own template suffix, you just need to go to the template file and add the code for each collection.
This means you have only added the code for the suffix template of the collection "Hoodies" and "collectionexample1", you have not yet added the code for the suffix template of the collection "tshirts" and "collectionexample2".

Hope it clear to you.

0 Likes
Ljkeos
Excursionist
23 0 9

@namphan,

Oh, so what I am supposed to do is one by one go to each collection.example.liquid (I only have 4) and add the necessary code from product-card-grid.liquid? The reason I am asking this is that the code in collection.hoodies.liquid and collection.hoodies.liquid are almost identical. The code in collection.collectionexample1.liquid and collection.collectionexample2.liquid are also identical.

Here is what collection.hoodies.liquid and collection.hoodies.liquid looks like:

{% section 'slideshow' %}
{% section 'collection-template' %}
{% section 'rich-text' %}
{% section 'slideshow-1' %}
{% section 'collection-template' %}
{% section 'rich-text-1' %}

  Despite the code being (almost) identical in the two files, the sizes only show up on the hoodies page and the collectionexample1 page.

0 Likes
namphan
Explorer
58 6 14

Hi @Ljkeos,

Can you list 4 links to check. I will check it.

0 Likes