Shopify themes, liquid, logos, and UX
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 %}
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.
Solved! Go to the solution
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:
Hi @Ljkeos,
Go to file theme.css and add code:
.grid__item--collection-template p{
text-align: center;
}
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:
<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.
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:
@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)?
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.
@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!
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.
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.
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
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.
Thank you so much-- This has been a huge help.
If you need anything, you can contact me
Where to paste this code
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024