creedon

Please post the URL to the page with the grey horizontal lines. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

@marianaalvarado Please post the URL for the page with the button. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

Add the following to Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Page Settings > Advanced > Page Header Code Injection for the page with the form. <script> $( ( ) => { // begin dining outlet redirect const formSelectId = 'select-yui_3_17_2_1_1604067328695_32418-field'; const redirects = { /* enter options from select form field and redirect URL Slug or External URL */ 'Corks' : '/corks-x', 'Dining Room (Restaurant)' : '/dining-room-x', 'Lobby Bar' : '/lobby-bar-x', 'Tavern' : '/tavern-patio' }; // don't change anything beyond this point let $formSelect = $( '#' + formSelectId ); // get the redirect form let $form = $formSelect.closest ( 'form' ); $formSelect.change ( function ( ) { let url = $( this ).val ( ); if ( url !== '' ) url = redirects [ url ]; $form.attr ( 'data-success-redirect', url ); } ); /* end dining outlet redirect */ } ); </script> Let us know how it goes.

I see the form!

We have to take a different tack to accomplish this. I've updated the code in my previous post. For desktop we use grid and on mobile we use flex. Remove or comment out the following code in Design > Custom CSS. .product-quantity-input { margin-right: 400px !important; margin-top: 0px !important }

I've updated my previous post. Is that the order for which you are looking? Also you will want to remove or comment out the following CSS from Design > Custom CSS. .product-price { order: 2 !important } .product-quantity-input { order: 3 !important } .ProductItem-details .sqs-add-to-cart-button-wrapper { order: 4 !important } .ProductItem-details-excerpt { order: 5 !important }

The code @tuanphan posted was for a Squarespace v7.0 site. Your site is v7.1 and requires different code. Add the following to Store Settings > Advanced > Page Header Code Injection. <style> /* There is something odd going on with v7.1 CSS as of 11/04/20 .ProductItem-details-checkout has a rule of display block but sub elements have order properties on them. The first bit of CSS unsets those items for a clean slate returning the elements to natural order. */ .ProductItem-details .product-quantity-input, .ProductItem-details .product-variants, .ProductItem-details .ProductItem-details-excerpt, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group: unset; -ms-flex-order: unset; order: unset; } .ProductItem-details .product-variants { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; width: auto; } .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .ProductItem-details .ProductItem-additional { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } @media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) { .ProductItem-details .ProductItem-details-checkout { -webkit-column-gap: 3vw; -moz-column-gap: 3vw; grid-column-gap: 3vw; column-gap: 3vw; display: -ms-grid; display: grid; grid-row-gap: 3vh; row-gap: 3vh; -ms-grid-columns: 1fr 3vw 1fr 3vw 1fr 3vw 1fr 3vw 1fr; grid-template-columns: repeat( 5, 1fr ); } .ProductItem-details .ProductItem-details-checkout > * { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1 / 6; margin: 0; margin-right: 1vw; } .ProductItem-details .product-quantity-input { -ms-grid-row-align: end; align-self: end; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; margin-right: 0; } .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-row-align: end; align-self: end; -ms-grid-column: 2; -ms-grid-column-span: 4; grid-column: 2 / 6; width: auto; } } @media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) { .ProductItem-details .ProductItem-details-checkout { display: -webkit-box; display: -ms-flexbox; display: flex; } } </style> Let us know how it goes.

@coriwhat Most likely the issue you are having is the code was designed for a different version of Squarespace or you are using a different template. Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

I'm not seeing a form on that page. It would help if we had a form with which to work.

I and others would be happy to take a look at your issue. I suggest starting a new thread on the forum, describe what you need and then we can take a look. Be sure to post the URL for the page with your form. If your site is not public please set up a site-wide password, if you've not already done so. Also post the password.

It is crazy! I've had to do that sometimes. True but we're trying to do stuff SS didn't intend for us to do. The main problem is in other circumstances there isn't anything to key off of that I can see. I haven't spent a lot of time digging into this but if anyone sees some way getting this done, please pitch in! For example the whitprint.com/testcombo page doesn't seem to contain any references to the categories you mentioned. The data-collection-id is a reference to the page itself but doesn't give us any context about what is happening on that page.

You have to make the editor wide enough to get the <> button to appear. I wish the <> button were first as I use it much more than link or quote! 🙂 I'll be interested to see the code you came up with! Thanks in advance for posting it!

Please see Organizing products.

Add the following to Design > Custom CSS. @media screen and ( max-width: 799px ) { #header { background-color: #F2F1D4 !important; } body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .light-bold .burger-inner .top-bun, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .light-bold .burger-inner .patty, body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .light-bold .burger-inner .bottom-bun { background-color: black; } } Let us know how it goes.

No. You need to target the correct element. Take the font properties you added out of the CSS I provided above and add the following to Design > Custom CSS. .header-actions-action--cta a { font-family: 'Inter'; font-weight: 400; } Let us know how it goes.

Please post your site-wide password.

It works for now but I think SS didn't intend for HTML to go in that field and some day they might change the behaviour. Also don't depend on the technique working in other places. If it does break in the future there are other ways the same end result could be accomplished.

@Jprood I think I have the answer to your issues. First remove (make a copy) or comment out any code that you added in previous attempts. Add the following to Design > Custom CSS. @media ( hover: none ) { .cursor { display: none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: absolute; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width 0.6s, height 0.6s, background-color 0.6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } Add the following to Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.pageX, top: e.pageY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> You will need to change the colors to match your color scheme. Let us know how it goes.

Please see Change Unable to Add Item to Cart Alert. This code only works when the site is out of Preview mode and the page is reloaded once using the noredirect query parameter. So when you take the site out of Preview, you will see the URL in the address bar for the product page. Add "?noredirect" (without the quotes) to the end of the URL and type return. Now you can click on the Add To Cart button and see the new unable to add message. Your customers won't have to do anything special as they of course don't have access to your site backend or Preview mode. The data structure at the top of the code should be pretty easy to understand. The key to triggering a modified unable to add message is the SKU of the product. Then just put in a message and optionally a title. If you have a product with multiple variants you only need to get the first variant SKU as the key to change the message for all the variants of that product. Let us know how it goes.

Replace the CSS from my previous post with the following. /* begin add buttons to header */ .header-actions-action.header-actions-action--cta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; grid-gap: 0.5em; gap: 0.5rem; } /* end add buttons to header */ We've gone from column to row orientation. I've updated my previous post with CSS for both row and column orientation. Let us know how it goes.

The answer is in my post previous to my last.

Please post URLs to some of the pages you want to customize the out of stock dialogs on and details about what you want each of those product dialogs to say. That way we can try to work up a couple of examples. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

It could be that. It could also be the version of the store.

Please see Adding a tagline.

@Aliwiper Add the following to Design > Custom CSS. /* desktop */ #topNav .folder .folder-child-wrapper ul.folder-child li:nth-of-type( 4 ) { border-bottom: 1px solid; padding-bottom: 1em; } #topNav .folder .folder-child-wrapper ul.folder-child li:nth-of-type( 5 ) { padding-top: 1em; } /* mobile */ html.mobile-view #mobile-navigation > ul li .folder-toggle-box:checked ~ ul li:nth-of-type( 4 ) a { border-bottom: 1px solid; padding-bottom: 1em; } html.mobile-view #mobile-navigation > ul li .folder-toggle-box:checked ~ ul li:nth-of-type( 5 ) a { padding-top: 1em; } This is for a v7.0 using the Forte template. Its also specific to Aliwiper's site and has the same caveats I mentioned in my previous post. Let us know how it goes.