New Product Page Layouts in Squarespace 7.1 // Squarespace Store Layout Options
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Squarespace recently released three new style options for product page layouts in Squarespace 7.1. I made this quick training video to show you how to access these new design options and explain what they all do.
---
Free training - learn how to use Squarespace 7.1 like a pro: insidethesquar...
---
Each one of these new layouts changes the way your product info is shown on desktop AND on mobile which is really important to keep in mind when working on your website.
You don't have a lot of customization options yet... but stay tuned for some fun CSS tutorials to help you style these new layouts with code.
🤔Let me know in the comments - which one are you planning to use on your site? 🤔
And be sure to subscribe for more Squarespace advice - it's my favorite thing to share here on my TH-cam channel!
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar... ❤️
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 insidethesquar...
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: th-cam.com/video/euJqHXs_L1M/w-d-xo.html
I was over here going crazy trying to take my product page from half back to simple lol thanks!
You are so welcome - happy to help!
I learn so much from you!! Thanks, this vid, as well as others you create helps 100% :)
Yay! So happy I could help! 🙌🏻
Thanks Becca great video as always!!! You remembered to put in your call to action 👏🏼👏🏼👏🏼
Thanks Tamara ❤️ And I totally did this time!! 🥳🤣
@@InsideTheSquare 💕
Thanks for this video. You did an excellent job.
You’re welcome! Happy to help. 😎
Hi Becca! Love your videos... all of them! Do you know how we could customize the product page template to include a "proceed to cart" button and "return to storefront" button under the "add to cart" button? The stock template leaves users stranded after adding to cart. User must arrow back to the store, or journey find the cart in upper page right.
Thank you - so glad you like my work - and great question! This isn't a squarespace feature just yet, but we can totally create a workaround with CSS. I would recommend adding a button to the top of the "additional product details" that links back to the store, and then using a negative top margin to pull it up closer to the add to cart button. Not ideal, but a quick fix solution until Squarespace can give us more flexibility within the product page design!
2:33 Hi Becca - how did you get your additional information to format into little columns like in your video at 2:33? Any additional info I put into my product pages goes full width. Thank so much for your help and awesome tutorials! Victoria
Hey Victoria! It was autogenerated in my demo site-- to replicate something like that would require code... which could make a great tutorial! Stay tuned, I'll add it to my list.😉
Hi Becca, I am using Squarespace 7.0. Is there a way for me to add a Page Title to a Product page? I cant figure out how to do it. Thanks for your help.
Hey Enrique! It's a little different depending on what theme you are using, but the product title should be displayed at the top of the page. Check out the version 7 info in this article: support.squarespace.com/hc/en-us/articles/231746347#toc-product-details-page
Hi, love your videos, I'm looking for a way to make products description display limited words and end with "..." showing that the words still continues.
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
How do you get rid of the additional boiler plate information below the add to cart button????
Thats called additional product details. When editing the product itself, you’ll find “additional info” under the name and description. Click on that to edit/update/remove it 👍👍
Hi Becca, this helped so much so thank you! 😊 quick question, when I’m using half view, the arrows on the images are pretty large. Is there anyway to change this to the simple view arrow format? Thanks again 😊
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
I enabled breadcrumbs but it doesn't work properly, on a product page it only shows your main shop page link and the page you're on (not the category page you came from)...pretty useless. I found some CSS that puts all the categories at the top of the products page, but soon as you click on a product that disappears and you're back to the useless Squarespace breadcrumbs. Also the code doesn't have a divider between the category links so it doesn't look great. Looks like a lot of people have the same complaint in the forum and it appears there's no way to fix it other than buying this one guy's breadcrumb addon.
I also have a large gap between the breadcrumbs and the product info/image and there doesn't seem to be a way to get rid of it. I tried like 8 different code snippets and none of them would close that gap. In addition I added a background image semi-transparent to the site header on every page, then found out you can't do that on a product page. I don't even see a way to add a new section to a product page. These simple issues being a problem are really frustrating.
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Does anyone know if its possible to add video to a product page? It doesnt let me upload video to the photos area. thanks in advance if anyone knows.
I just figured it out. rather than deleting my question i'll type the answer here, maybe you guys already knew this, but just in case, you click Additional info, then hover over the blank white space and click the blue plus sign then choose video. just thought i'd type my answer to save you time.
Glad you found a way to make it work! You can also upload a GIF to your images. There wont be audio but it will load with the rest of the product photos.
@@InsideTheSquare oh cool, i didnt know you could do that. thank you! I bought your course a few months back, its SO good and so worth it! thank you for all you do!!
Your so welcome @@MrBuddlesBooty ! I'm glad that my work is helping you with yours :)
Hey! Huge fan of your videos :) I am DYING trying to figure out how to custom code the individual product pages. I'm simply trying to add a border around the product images. I resorted to just using the Section ID section[data-section-id="63f9abc0acf85b2adc17adaf"] img {border: 1px solid black;}, but for some reason it seems to be offset and only adding a border on the top and left. I'm really just looking for what the block would be labeled as (i.e .products.collection-content-wrapper .grid-item .grid-image). Any ideas? Thanks!
Hey Mackenzie! This is a great question. A tricky part about images on product pages - they are cropped inside an image wrapper, so when you give it a border, it's a border inside of another box that can be hidden. Here are some codes that can help:
If it's a simple slideshow, this code will work: .ProductItem-gallery-slides{border:1px solid #333}
For a full, half and wrap layouts, this code will do the trick: .pdp-gallery-slides{border:1px solid #000}
Also I am totally going to add some product page style tutorials to my to do list; thanks for the idea!!
Hi Becca, my product images are not very large when they open in light box, I would like them to enlarge much bigger and even have the option to zoom in, is this possible? Many thanks!
Hey Fiona! Interesting; they should take up most of the screen by default. 🤔 The zoom in feature sounds a little tricky and like something you might need a plugin might for. The image itself is a layer lower than the arrows to cycle through a carousel so it wont respond to any hover effects without removing or at the very least altering the carousel functionality. Probably not the answer you were hoping for but I hope that info helps! 😬
Do you happen to know which Squarespace Plan you're using? These product page edit options don't seem to be available in the Business Plan.
Hey Oscar! These page layouts are available for any subscription plan, but only on the latest version of Squarespace (7.1) Check out this article for more info: insidethesquare.co/themes