Placement of available sizes on product grid (collection)

Ljkeos
Excursionist
24 0 10

THEME: Debut

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:

Screen Shot 2021-06-16 at 12.37.32 PM.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;
}

Thank you.

KetanKumar
Shopify Partner
20387 2111 7666

@Ljkeos 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Ljkeos
Excursionist
24 0 10

@KetanKumar 

This is the page referenced in the photo:

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

The password is "PPF"

KetanKumar
Shopify Partner
20387 2111 7666

@Ljkeos 

i can see proper look 

KetanKumar_0-1624274537602.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes