PoSA Posted July 1, 2023 Posted July 1, 2023 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
paul2009 Posted July 1, 2023 Posted July 1, 2023 (edited) 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 ⬇️ Edited July 4, 2023 by paul2009 edited for clarity Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
PoSA Posted July 1, 2023 Author Posted July 1, 2023 Thank you for your quick reply. I'll give that a try!
PoSA Posted July 1, 2023 Author Posted July 1, 2023 I don't think that will help. I'd like to be able to display the size, not just the product name and price
paul2009 Posted July 1, 2023 Posted July 1, 2023 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
PoSA Posted July 1, 2023 Author Posted July 1, 2023 Thank you. I have made it visible here: https://www.plutoofstandrews.com/store
PoSA Posted July 1, 2023 Author Posted July 1, 2023 Thanks for your help on this. Do you have what you need to provide me with the code for this?
PoSA Posted July 13, 2023 Author Posted July 13, 2023 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:
PoSA Posted July 20, 2023 Author Posted July 20, 2023 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. The size of the item is listed as a tag on the product, but I need to know how to display this within the product block, likely using custom CSS. Here is an example of another squarespace page shared by a user showing that this adaptation is possible: Store is at URL https://www.plutoofstandrews.com/store and password is Forpaulonly I have a launch soon...any and all help would be appreciated.
paul2009 Posted July 26, 2023 Posted July 26, 2023 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 ⬇️ WhoAJ 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
WhoAJ Posted November 25, 2023 Posted November 25, 2023 (edited) @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 Edited November 25, 2023 by WhoAJ
paul2009 Posted November 25, 2023 Posted November 25, 2023 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 ⬇️ WhoAJ 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
WhoAJ Posted November 25, 2023 Posted November 25, 2023 @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
creedon Posted November 26, 2023 Posted November 26, 2023 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. paul2009 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
WhoAJ Posted November 26, 2023 Posted November 26, 2023 @creedonsorry im not sure how you got to that dialogue box .
creedon Posted November 26, 2023 Posted November 26, 2023 19 minutes ago, WhoAJ said: im not sure how you got to that dialogue box . Edit the Store page section. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
WhoAJ Posted November 26, 2023 Posted November 26, 2023 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
PixelWaveMedia Posted January 28 Posted January 28 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.
PixelWaveMedia Posted January 28 Posted January 28 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?
paul2009 Posted January 28 Posted January 28 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? Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
PixelWaveMedia Posted January 28 Posted January 28 3 hours ago, paul2009 said: What is the site URL? www.vestisapparel.com.au Password - jess
WhoAJ Posted February 4 Posted February 4 @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; }
paul2009 Posted February 5 Posted February 5 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
paul2009 Posted February 5 Posted February 5 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment