bbarinaga

I'm a bit shocked about Previous/Next navigation disappearing!
Is there any way of putting those with CSS?
Thanks

.ProductItem-details .product-variants { order: 2 !important; width: 40%; } .ProductItem .ProductItem-details .product-quantity-input { order: 3 !important; width: 30%; margin-left: 20px !important; }  

Site URL: https://www.therestoreshop.com/shoprestoreproduct/p/restore-facial-moisturizer
Does anyone know how I can move the "product size" field and  "product quantity" field on the same line. I included an image for reference?

Add to Home > Design > Custom CSS
/* Add a line to bottom of header */ header#header { border-bottom: 1px solid green; } /* Add a line to top of footer */ footer#footer-sections { border-top: 1px solid green; }  

Try adding to Home > Design > Custom CSS for product carousel
/* Product slide arrows control */ @media screen and (max-width:767px) { .ProductItem-gallery-carousel-controls { display: flex !important; } /* arrows background */ .ProductItem-gallery-carousel-controls * { background: white; } .ProductItem-gallery-carousel-controls>div { justify-content: center !important; } }  

Add to Page Settings . Advanced > Header
If you use Personal Plan > You can edit Page > Add Code Block
<style> @media screen and (max-width:640px) { .sqs-block-summary-v2 .summary-item.positioned { width: 50% !important; position: static; } .sqs-block-summary-v2 .summary-item-list { display: flex; flex-wrap: wrap; flex-direction: row; } } </style>  

Add to Home > Design > Custom CSS
.markdown-block a { color: green !important; }  

Can you place an order & share order confirmation page? We can check easier.
I also wrote this guide, maybe useful: Customize Order Confirmation Page

Add to Home > Design > Custom CSS
/* category title size */ h3.nested-category-title { font-size: 20px !important; }  

I've managed to sort the title issue, quite simple. Go to the pencil by manage items and scroll down to category title. Disable the bar.

Hi, could someone help on some issues with the new Squarespace product categories as also point me in the right direction on Design of Category pages.
Background:
 I have just updated 7.1 commerce with the latest categories update (based on a notification I saw in the dashboard). This update provides more powerful category features, in particular, nesting of categories (ie Category, Sub-category). This is a useful feature. For example, one can create a category structure like Mens>Jeans, add those categories to a new product and Squarespace automatically generates the category and subcategory URLs and content..
So for example in the above example, the following URLs are automatically created and appropriate collections/products shown under;
mysite.com/shop
mysite.com/shop/mens
mysite.com/shop/mens/jeans
mysite.com/shop/p/levis-501-blue-stone-washed 

Q1:  Squarespace is automatically adding a "/p" in the product URL structure. Is there a way to avoid the "/p"?
Q2: Squarespace is automatically adding the category structure in the Browser Tab Title (eg., "/mens/jeans - mysite.com | Your home for Jeans". This forced addition of the category structure  "/mens/jeans" in the title is ugly. How do I stop this!!!!
Q3: Category Page Design. Squarespace automatically creates a collection page for each category/sub-category name. Example, it would show an appropriate set of products under Mens, or under Jeans.  However, while I can edit the design of the "Shop" page, I can't figure out how to add a section to the category pages underneath (eg., Mens, Jeans) . For example, say I wanted to include a specific category image under the Header for the Jeans page, and a different category image under the Header for the Mens page, is this possible?
Appreciate any help from the community.

Yes, this is indeed a major inconvenience. As far as the bugs go, these were reported to customer service, whose first response was to suggest that I keep my expectations low, and the second comment was to go to the Forum.
It is inexcusable that Squarespace rolls out updates with scant respect to documentation, or user testing, nor when the expected bugs arise do they show any urgency to fix this. It is absolutely bewildering that someone thought it a good idea to put the URL tree as a prefix to the SEO Title for a category page. As it is, the SEO title character length is pretty short at the best of times, now, it gets taken up by a URL slug of category and subcategory names separated by backslashes before the SEO Title even begins for the category page. The Marketing>SEO settings are now no longer valid, because Squarespace is partially overriding what you enter there by forcibly inserting the slug.

Also, how does this even get close to optimising Category pages for SEO, one of the stated benefits of this category update. You can't even insert a unique piece of text or image for each category page. All you get is Squarespace automatically inserting the Category Name in H1 on top of the collection. That's it. 

Still no response from Squarespace, hope someone is working on it. Ironically their own website is clean of such bugs, looks like these are reserved for us paying customers!!!
ADD-ON ISSUE - The Category Name is inserted by Squarespace in h3. SEO Optimisation immediately picks this up as an issue and says, your page has no h1 tags. Given the importance of h1 in SEO , should the Category Name display not be in h1 ???

 

I am so annoyed about this update and regret that moment I clicked upgrade. I've asked (via Twitter) if this can be reverted, and they said no. I complained more and put in Anthony Casalena (CEO). And nothing. I'm still waiting for a response from Customer Service. I put a long critique of their practices on Instagram and included everyone I could find of their directors. I'm going to cancel my subscription unless this reverts back. 
All the reviews about squarespace and their great looking templates are meaningless unless their service is backed up by thoughtful, robust functionality. Perhaps the new Adobe guy they have appointed will fix this. Because frankly, having a business that is based solely on user experience is just not good enough. 

Thanks for this thread! I was having the exact same issue but the updated code works great and doesn't reduce the quality of the images 😊

This is complex. @rwp has this code

Add to Home > Design > Custom CSS
.checkout-button { background: red !important; }  

Some CSS Class/ID for Squarespace 7.1
Announcement Bar
Announcement bar: .sqs-announcement-bar-dropzone Announcement bar text: .sqs-announcement-bar-dropzone p Announcement bar link: .sqs-announcement-bar-dropzone a Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header
Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header Site Title: a#site-title Site Title (when overlay menu open): .header--menu-open a#site-title Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a Footer
Footer: footer#footer-sections Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer Footer Links: footer#footer-sections a Product List
Product List: .collection-type-products.view-list Product Name: .grid-title Product Price: .grid-prices Product Image: figure.grid-image Product Currency: body.native-currency-code-usd .sqs-money-native:before Sold Out Text: .product-mark.sold-out Product Detail
Product Detail: .collection-type-products.view-item Product Breadcrumb: .ProductItem-nav-breadcrumb Product Pagination (Previous/Next): .ProductItem-nav-pagination Gallery: figure.ProductItem-gallery Thumbnails: .ProductItem-gallery-thumbnails Big Image: .ProductItem-gallery-slides Product Name: h1.ProductItem-details-title Price: .ProductItem-product-price Currency: body.native-currency-code-usd .sqs-money-native:before Excerpt: .ProductItem-details-excerpt Add to Cart Button: .sqs-add-to-cart-button-wrapper Add to Cart Text: .sqs-add-to-cart-button-inner Variant Dropdown: .variant-option Variant Title: .variant-option-title Variant Options: .variant-select-wrapper option Quantity Text: .quantity-label Quantity Input: .product-quantity-input Cart Page
Cart Page: body#cart Cart Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button   Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List
Blog List: [class*="type-blog"].view-list Thumbnails: article.blog-item img Date: time.blog-date Category: span.blog-categories-list Title: h1.blog-title Excerpt: .blog-excerpt Read more: a.blog-more-link Blog Posts
Blog Posts Page: [class*="type-blog"].view-item Blog Items: .blog-item-entry Categories: .blog-meta-item–categories Date: time.dt-published.blog-meta-item.blog-meta-item–date Author: .blog-meta-item.blog-meta-item–author.p-author.author Title: .blog-item-title Content: .blog-item-content-wrapper Pagination: .item-pagination Pagination Arrows: .item-pagination-link .item-pagination-icon Pagination Title: h2.item-pagination-title Author Box: .blog-item-author-profile-wrapper Author Image: a.author-avatar.content-fill Author Name: .author-name Author Site: a.author-website Post Comment: .squarespace-comments Post Comment Button: .comment.btn Comment Input: .squarespace-comments .new-comment-area Preview: span.btn-text.preview-comment.top-level-preview-btn Subscribe via email text: span.subscribe.subscribe-control Blog Grid
updating
Blog Masonry
updating
Event List Page
Event List Page: .collection-type-events.view-list Event Thumbnail: a.eventlist-column-thumbnail.content-fill Event Time: .eventlist-datetag Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month Event Title: h1.eventlist-title Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item Event Description: .eventlist-description Event Detail Page
Event Detail Page: .collection-type-events.view-item Event Title: h1.eventitem-title Event Date: time.event-date Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item Event Description: .eventitem-column-content Event Pagination: section.item-pagination.item-pagination–prev-next Previous/Next: .item-pagination-link .item-pagination-prev-next Event Pagination Title: h2.item-pagination-title Portfolio
title: h3.portfolio-title item: .portfolio-grid-basic portfolio image: .portfolio-grid-basic .grid-image pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination pagination text: h2.item-pagination-title pre text: .item-pagination-link–prev .item-pagination-prev-next next text: .item-pagination-link–next .item-pagination-prev-next List Simple
List Simple: .user-items-list-simple Image: .user-items-list-simple img First Item: .user-items-list-simple li:nth-child(1) Second Item: .user-items-list-simple li:nth-child(2) List Content: .user-items-list-simple .list-item-content Title: .user-items-list-simple h2.list-item-content__title Description:  .user-items-list-simple list-item-content__description OR .user-items-list-simple p List Slideshow
List Slideshow: .user-items-list-banner-slideshow Image: .user-items-list-banner-slideshow img First Item: .user-items-list-banner-slideshow li:nth-child(1) Second Item: .user-items-list-banner-slideshow li:nth-child(2) List Content: .user-items-list-banner-slideshow .slide-content Title: .user-items-list-banner-slideshow h2.list-item-content__title Description:  .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg Button: .user-items-list-banner-slideshow .list-item-content__button List Carousel
List Carousel: .user-items-list-carousel__slides Image: .user-items-list-carousel__slides img First Item: .user-items-list-carousel__slides li:nth-child(1) Second Item: .user-items-list-carousel__slides li:nth-child(2) List Content: .user-items-list-carousel__slides .list-item-content Title: .user-items-list-carousel__slides h2.list-item-content__title Description:  .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p Arrow Circles: .user-items-list-carousel__arrow-button Arrow Icons: .user-items-list-carousel__arrow-button svg Button: .user-items-list-carousel__slides .list-item-content__button Fluid Engine
Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine
 
Checked & Wrote by tuanphan