Adding size field without using variants

I'd like to add a size field to my products and display them on the item before it is clicked (similar to the attached). Product variants only seems to works once the item has been clicked on and always needs more than one variant which doesn't work for me.

Any help would be much appreciated! Thanks in advance 

On 7/1/2023 at 12:09 PM, PoSA said:

I'd like to add a size field to my products and display them on the item before it is clicked. Product variants...always needs more than one variant which doesn't work for me.

Have you tried adding them to your products as tags? 🙂

You could add a "Size Medium" tag - or just a "Size M' tag - to show it is available in a medium size. For more details, see Organizing products.

Tags will then be added to the page but you won't be able to see them, so we'll need some custom code to look for them and make them visible for to users. If you need more help, please add the tags and post a working link (a “URL”) to the page on your site. If you are unsure how to do this, the guide How to Post a Forum Question explains how to provide a link.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you for your quick reply. I'll give that a try!

I don't think that will help. I'd like to be able to display the size, not just the product name and price

8 minutes ago, PoSA said:

 

I don't think that will help. I'd like to be able to display the size

Sure, I understand. The first step was to add the tags.

The next step is to write some code to make them visible on the Product List Page. As I mentioned, if you need help with this, I'll need to be able to view your store page.

Thank you. I have made it visible here:

https://www.plutoofstandrews.com/store

Thanks for your help on this. Do you have what you need to provide me with the code for this?

I have the store currently the image below: 

But am trying to display the size of the item in between the name and price within the product block like the images below. 

Here is an example of another squarespace page shared by a user showing that this adaptation is possible: 

If you add a tag called "Size M", "Size XL" (and so on) to the products, the following code should add visible size labels like these:

To test it (as shown in the screenshot above) I needed to add those size tags to your products because the tags on your site don't include the prefix "Size ".

The script below can be added to the Code Injection FOOTER panel:

<!-- Add product size labels to product list pages on Squarespace 7.1 ---------------------->
<!-- Copyright Soundfocus Digital [sf.digital] --------------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach((gridItem) => {
  const gridMetaStatus = gridItem.querySelector('.grid-main-meta');
  const classList = gridItem.classList;
  const tagLabels = [];
  classList.forEach((className) => {
    if (className.startsWith('tag-size-')) {
      const tagLabel = className.slice(9);
      if (!tagLabels.includes(tagLabel)) {
        tagLabels.push(tagLabel);
      }
    }
  });
  if (tagLabels.length > 0) {
    const tagLabelsContainer = document.createElement('div');
    tagLabelsContainer.classList.add('tag-labels');
    tagLabels.forEach((tagLabel) => {
      const label = document.createElement('div');
      label.classList.add('tag-label');
      label.textContent = tagLabel;
      tagLabelsContainer.appendChild(label);
    });
    gridMetaStatus.appendChild(tagLabelsContainer);
  }
});
</script>
<!-- End of product size labels ------------------------------------------------------------>

This can be added to the Custom CSS panel and can be tweaked to change colour, size and so on:

/**************************************
Size label styling on PLP
**************************************/

.grid-item .grid-main-meta .tag-labels {
  text-align: center;
  margin-bottom: 7px;  
}
.grid-item .grid-main-meta .tag-label {
  font-size: 10px;
  color: #000;
  margin-left: 6px;
  margin-top: 11px;
  padding: 4px 8px;
  border: 1px solid #000;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2em;
  //font-weight: bold;
  //background-color: #f0f0f0;
}

/* Don't show sizes when sold out */
.grid-item.sold-out .grid-main-meta .tag-label {
  display: none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009
thanks i just used this and it works.

how do i get these onto the product page, so that people can select the size they want and add it to the cart?
and if the size is sold out to mark the small symbol with a line through it and unselectable 

7 hours ago, WhoAJ said:

how do i get these onto the product page, so that people can select the size they want and add it to the cart?

Have you added product variants to the products?

Variants will appear on the Product Detail Page (PDP) as either a dropdown list or as buttons. To learn more, visit Styling store pages.

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 oh yes thanks i have managed to add the variants. they show on the product page and if a size is out of stock you can't click that size.

my question now is, how can you also have this struck out on the main shop page?
https://lavender-oval-sydh.squarespace.com/shop << i used your code to display these on the shop page..any way to make it link with the variant, so when a size is out of stock it also updates this page?

Pw: help 

1 hour ago, WhoAJ said:

my question now is, how can you also have this struck out on the main shop page?

An alternative to your current method would be to use SS's built-in add to cart buttons on the PLP (product list page).

You'll have to decide if the UI SS provides is to your liking.

Let us know how it goes.

@creedonsorry im not sure how you got to that dialogue box .

19 minutes ago, WhoAJ said:

im not sure how you got to that dialogue box .

Edit the Store page section.

ah right, i see. thanks

the add to cart is a nice touch but not looking to have that option on the shop page.

sizes alone would have been good
especially if they displayed how i currently have them on the product page and i coould adjust the size to fit the image width 

Hey there, is there any way you can make the code for Product Blocks, as well as Sunmary Blocks to add the sizing?

I used the code for the store pages and it works perfectly; but would love to have it on the front page when someone visits my online cothing brand.

On 7/27/2023 at 6:59 AM, paul2009 said:

If you add a tag called "Size M", "Size XL" (and so on) to the products, the following code should add visible size labels like these:

To test it (as shown in the screenshot above) I needed to add those size tags to your products because the tags on your site don't include the prefix "Size ".

The script below can be added to the Code Injection FOOTER panel:

<!-- Add product size labels to product list pages on Squarespace 7.1 ---------------------->
<!-- Copyright Soundfocus Digital [sf.digital] --------------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach((gridItem) => {
  const gridMetaStatus = gridItem.querySelector('.grid-main-meta');
  const classList = gridItem.classList;
  const tagLabels = [];
  classList.forEach((className) => {
    if (className.startsWith('tag-size-')) {
      const tagLabel = className.slice(9);
      if (!tagLabels.includes(tagLabel)) {
        tagLabels.push(tagLabel);
      }
    }
  });
  if (tagLabels.length > 0) {
    const tagLabelsContainer = document.createElement('div');
    tagLabelsContainer.classList.add('tag-labels');
    tagLabels.forEach((tagLabel) => {
      const label = document.createElement('div');
      label.classList.add('tag-label');
      label.textContent = tagLabel;
      tagLabelsContainer.appendChild(label);
    });
    gridMetaStatus.appendChild(tagLabelsContainer);
  }
});
</script>
<!-- End of product size labels ------------------------------------------------------------>

This can be added to the Custom CSS panel and can be tweaked to change colour, size and so on:

/**************************************
Size label styling on PLP
**************************************/

.grid-item .grid-main-meta .tag-labels {
  text-align: center;
  margin-bottom: 7px;  
}
.grid-item .grid-main-meta .tag-label {
  font-size: 10px;
  color: #000;
  margin-left: 6px;
  margin-top: 11px;
  padding: 4px 8px;
  border: 1px solid #000;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2em;
  //font-weight: bold;
  //background-color: #f0f0f0;
}

/* Don't show sizes when sold out */
.grid-item.sold-out .grid-main-meta .tag-label {
  display: none;
}

 

Did this help? Please give feedback by clicking an icon below  ⬇️

This is the code I'm referring to.

Is it possible for Product Blocks, and Summary Blocks?

8 hours ago, PixelWaveMedia said:

I used the code for the store pages and it works perfectly; but would love to have it on the front page when someone visits my online cothing brand.

What is the site URL?

3 hours ago, paul2009 said:

What is the site URL?

www.vestisapparel.com.au 

Password - jess

@paul2009

your code has allowed me to add the sizes on my main t shirt shop page ->  (https://calliope-kumquat.squarespace.com/t-shirts  pw: hi ) 

If you click in to the White T you will notice I have some sizes that have no stock therefor a grayed out. link to white t ->  (https://calliope-kumquat.squarespace.com/t-shirts/p/country-feast-set-3nybt-dtlhz-4brte-5969w) 

my issue is: on the main products page (first URL link ) the sizes that are out of stock are not showing as out of stock on that page.

can you please assist?


I'm not sure if its because of my existing code: (i have tried playing around with it but can't seem to get it to work)

/* hide sold out price */
.sold-out .product-price {
  display: none !important;
}

/* hide add to cart button when sold out */
.sold-out .sqs-add-to-cart-button-wrapper {
  display: none !important;
}
 

21 hours ago, WhoAJ said:

Your code has allowed me to add the sizes on my main t shirt shop page. My issue is: on the main products page...the sizes that are out of stock are not showing as out of stock on that page

@WhoAJ The code I provided was for a pre-loved clothing store, where the tiles were designed to show which size was being sold. It was not designed to be interactive and can't check availability.

On 1/28/2024 at 11:35 AM, PixelWaveMedia said:

I used the code for the store pages and it works perfectly; but would love to have it on the front page when someone visits my online clothing brand.

Unfortunately the summary blocks to not expose the size information.