Jump to content

Display Product Dimensions On Page

Recommended Posts

Site URL: https://www.halebyhenderson.com/gallery/p/kapulua-entry-table


I'm trying to find a way to display the product dimensions on product pages. Ideally below the choice of Material. 

As you'll see they are a decor company and this information is key to potential clients in setting up their spaces. 

I assume it could be accomplished by pulling information from the JSON data, however I'm pretty new to JSON and wouldn't know exactly how to pull it to print, plus does the Squarespace 'Code Block' support JSON and what I'm looking to accomplish?

Thank you for your time.

Link to comment

The first hurdle is getting the info. Are you thinking you want to use the shipping dimensions? Keep in mind that the shipping dimensions ideally represent the dimensions ( and weight ) of the shipping container. Which in some cases could be some number of inches larger than the actual product. If that is not a problem then the dimensions are available without diving into the JSON. There are two sources. In memory at Static.SQUARESPACE_CONTEXT.product. Or on the DOM on various data attributes of the element with class product-variants.

Manipulating these elements is a bit tricky. You will need to use JavaScript to get the information needed and put it into the DOM somewhere.

For each of your products are the dimensions that same no matter what variant is selected? In other words changing a variant on a product does not change its size, just its finish? If this is the case then the code becomes a bit easier as you don't have to deal with variants changing the size and making the code more complex.

If the product size and the shipping container size are not nearly the same then I'd recommend not using code to grab the shipping information. I suggest something like including it in the description. Or, adding it to the additional info as perhaps a text block and then use JavaScript to move elsewhere on the page, if desired.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

We had been plugging in the product dimensions in the shipping information section, thinking this was its intended use.  Thus my hope was being able to pull that into a piece of code that displays that info for each product.

With that said, I think what should also be noted that at this time, the site is more of a gallery with buyers inquiring for purchases, so shipping isn't really a concern on the website side. Thus using 'Dimensions' for products with this desired result.

Regarding variants there are only I believe 2 products that have different sizes for one of their variants, though client could likely be convinced to bounce those to separate product if it eases this implementation. 

Does the above help clarify anything?

Link to comment
  • 4 weeks later...
7 minutes ago, mbj21 said:

I'm not sure if related or not, but on the live site text blocks are no longer appearing, though on the backend they are still present.
Any ideas?

It sounds like a failure in the code. The code does hide text blocks initially and when successfully run, it unhides them. That it to hide the background manipulations out of site of visitors view.

As to why the code failed, I don't know without seeing the site in action, with the code installed.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

My code is not broken. It appears the code has been installed in Settings > Advanced > Code Injection > HEADER.

The code was designed for store pages only and should be installed per the install steps, Store Settings > Advanced > Page Header Code Injection for the store page.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.