Solved

Placement of Available sizes on product grid (collection)

Ljkeos
Excursionist
31 0 13

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.

Accepted Solution (1)
namphan
Shopify Partner
205 31 45

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;
}
Shopify Development Service

View solution in original post

Replies 15 (15)

namphan
Shopify Partner
205 31 45

Hi @Ljkeos,

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

Shopify Development Service
Ljkeos
Excursionist
31 0 13

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.

namphan
Shopify Partner
205 31 45

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;
}
Shopify Development Service
Ljkeos
Excursionist
31 0 13

@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
Shopify Partner
205 31 45

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.

Shopify Development Service
Ljkeos
Excursionist
31 0 13

@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
Shopify Partner
205 31 45

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.

Shopify Development Service
Ljkeos
Excursionist
31 0 13

@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
Shopify Partner
205 31 45

Hi @Ljkeos,

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

Shopify Development Service
namphan
Shopify Partner
205 31 45

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
Shopify Development Service
Ljkeos
Excursionist
31 0 13

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

namphan
Shopify Partner
205 31 45

If you need anything, you can contact me

Shopify Development Service
dcphalia
Visitor
1 0 0

Where to paste this code 

namphan
Shopify Partner
205 31 45

Hi @dcphalia,

Are you using the Debut theme?

Shopify Development Service