Placement of Available sizes on product grid (collection)

[Ljkeos]

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" %}
 
    

      {% 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 %}
    

  {% endif %}

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

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.

[namphan]

Hi @Ljkeos ,

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

[Ljkeos]

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:

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:

  
    {{ product.title }}
  

  {% 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 %}

  

    

      

        
      

    

  

  
  
  
  {{ product.title }}

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

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

      {% 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 %}
    

  {% endif %}

Thank you.

[namphan]

Hi @Ljkeos ,

Please change code:

  
    {{ product.title }}
  

  {% 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 %}

  

    

      

        
      

    

  

  
  
  
  {{ product.title }}

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

      {% 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 %}
    

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

and add code CSS:

.grid__item–collection-template p {
text-align: center;
margin-bottom: 0px;
}

[Ljkeos]

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

[namphan]

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]

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

[namphan]

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.

[Ljkeos]

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

[namphan]

Hi @Ljkeos ,

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

[Ljkeos]

@namphan ,

Of course, thank you again for the help.

Hoodies: https://ppfclothing.com/collections/hoodies

Tshirts: https://ppfclothing.com/collections/t-shirts

collection 1: https://ppfclothing.com/collections/living-in-the-wrong-time

collection 2: https://ppfclothing.com/collections/4x-collection

[namphan]

Hi @Ljkeos ,

You need to change the if by handle, refer:

{% if collection.handle == “hoodies” or collection.handle == “t-shirts” or collection.handle == “living-in-the-wrong-time” or collection.handle == “4x-collection” %}

Hope it clear to you.

Copy

[Ljkeos]

Thank you so much-- This has been a huge help.

[namphan]

If you need anything, you can contact me

[dcphalia]

Where to paste this code

[namphan]

Hi @dcphalia ,

Are you using the Debut theme?