Search the Community

Our site uses the Fairfield template (we set it up 5+ years ago already) and maybe that's part of the issue? But when users go to our store and add things to the cart, there is no Cart button that shows up. I added one to the navigation but is there a better way to do that?

Hi guys, On my page in section 2, there's a text link at the end 'Learn More'. I'd like this to be a button, the same formatting as the green button in the Header. That's it. I tried to add a normal button, but it doesn't work responsively as it's not attached to the text field it's in. If I've missed something, please let me know! It seems like a no-brainer for Squarespace to allow you to add native buttons INSIDE the text field, or at least group elements together. I'm sure this is just simple custom CSS, but thank you for your help.

Hi! I have created forms on a website and want to use the Lightbox design. My problem is that the send-button at the bottom of the form is "invisible" - the text is white as well as the outline of the button. It is only when I hover over the place where the button is that the text send (skicka in Swedish) appears. You can see it on the pictures. I have tried to customize the buttons in different ways and change colors but I can't seem to change this particular button and frankly I have no idea where to change this so I have really just tried randomly. The problem is only when I use the Lightbox design, not when the Lightbox-mode is turned off. Can anyone help me?

I am trying to add buttons to carousel images that will remain fixed to each image. Does anyone have a solution for this? I am wanting people to be able to shop each image in the carousel and be taken to an external link.

Hi - I am trying to create a landing page within my Squarespace site. The style is very different to the site style but I'm finding that its really difficult to make these changes. In particular I want to change the colour of a button on the landing page but I'm restricted by the primary, secondary and tertiary site style options. I'm presuming it is going to take some coding but I have no experience of this at all. Is there a way to override this and choose any colour I want?

Good afternoon everyone, I am using a template. It has quite a few buttons throughout which I want to keep. I managed to link the very first one on the top right (on desktop) to the scheduling page just fine. I tried to do the same with the others but when I click on them, they don't give me the option to add anything. They look like buttons, they are all supposed to be primary buttons but they don't behave like that. In addition to that, if I check the mobile version, the button which works disappears and I am left with the "fake" buttons... Site: global-migration-group.squarespace.com Password: australia2022. How can I make them work? Thanks.

Hi, I'm trying to have bold and italic text in my primary button. It should look like this inside a square button with color #89825e: >>> Schedule a free 30-minute call with me The grammarly.com call-to-action button has something similar, so I was wondering if the type I want could be done with custom css on SquareSpace. Thanks in advance, Nadia

Hello. I am wondering if someone can provide the css code to add a second button to my navigation. I would like to have an existing page "Client Portal" - be accessible only through a button instead of a link in the navigation. If possible, this button would be next to the Donate button in the current navigation. Any assistance would be much appreciated! https://hibiscus-dachshund-wk7b.squarespace.com/config/ pw: forumhelp1 Thank you in advance!

Hi there, I used this code from another discussion to get a back to top button. I am wondering what code I can use so it appears on every page, not just one. Thank you! this is what I have from the other discussion: Simply paste the code in Setting > Advanced > Header <div id="scroll-here"></div> <a id="back-to-top" href="#scroll-here"> <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" /> </a> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> $(function(){ //Function To Add Class function showBackToTop(){ $('#back-to-top').addClass('show-btt'); } //Function To Add Class function hideBackToTop(){ $('#back-to-top').removeClass('show-btt'); } //Check Scroll and Add Class function checkScrollPos(){ if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen showBackToTop(); } else { hideBackToTop() } } // tell the browser to run the "checkScrollPos()" function just above when the user scrolls $(window).on('scroll', function(){ checkScrollPos(); }); //Check the scroll position once when the page loads checkScrollPos(); }) </script> <style> html { scroll-behavior:smooth } #back-to-top { height: 50px; width: 50px; position: fixed; right: 0; z-index: 99; border-radius: 50%; box-shadow: 0px 0px 5px #ccc; margin: 17px; background: white; bottom: -150px; opacity: 0; transition: all .5s ease; } /Position Out of View/ bottom:-150px; opacity:0; transition: all .5s ease; } #back-to-top.show-btt { bottom: 0; opacity: 1; transition: all .5s ease; } </style> for you have to hide your current code <style> .t-top { display:none !important; } </style> Add this also in same header block

Hi everyone, I'm realising that buttons' width are dependent on Fluid's Engine grid, which means I can't truly control their width and left and right padding. If I do add left and right padding via CSS or Site Styles, then the text goes over two lines in some cases, which doesn't look good, and if I make the button larger editing the block with Fluid Engine, then it's too large because I'm stuck with the grid's dimensions (i.e. ~70px on each side instead of the desired 40px). Is there any way to work around this? Thanks!

Hi, In Analytics there you can see "Traffic Sources" and you can see "Form & Button Conversions" I would like to be able to tie these together so you can see which traffic sources led to which form and button conversions. Is there a way to do this? Thanks!

Even though the padding on all of my buttons are set to the same values, I'm noticing the sections that I've converted to fluid aren't reflecting my settings. Any ideas?

Hello, I'm looking to change the function of the "add to cart" button in the Squarespace product template so it links to the Etsy product listing page url instead. I want the benefits of the Squarespace product page organization and design but want the button to link to Etsy for the transaction and avoid the Squarespace cart altogether. Ideally, I'd like the button to read "purchase" rather than "add to cart" if possible, too. FYI, the product will not have any size variations/options so there will only be the "add to cart" button on the Squarespace product page. Thanks in advance

Blessings upon everyone who reads this message. I encounter some trouble removing a button on the page. When I use "Edit Section -> Background -> Art", an extra button appears on the page. It's the button to Play / Stop animations. Is there any way to remove this? I managed to find it using 'Inspect Element', but I am not able to remove/ hide it. Could you please help a friend?

Hi! I would love to add a button with 'back to all work' in between my portfolio pagination (see screenshot). The only way people can come back to my homepage now (which is also the start of my portfolio page) is to click my logo in the header or footer, or click 'werk' in the navigation. I tested my website on some people and they really miss a clearer option. I found some codes online offered by @tuanphan, but unfortunately they don't do anything for me. The codes are the two added underneath. Can someone maybe help me with this? Thank you in advance! password: Illusterre2022 https://illusterre-sample.squarespace.com #19. Add Button to Pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> <style> /* Portfolio back to button */ a.portfolio-backto .item-pagination-title { background-color: black; color: white !important; padding: 10px; } </style> and #20. Add “Back to all projects” under pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script>

HELP....I NEED HELP with my site. I tried to change my landing page to include a 'Shop Now' button. Once I finally got the button on the landing page, I opened the page with my individual products and noticed the 'Add to Cart' button has changed. It is now very tall (see pic below). Prior to changing the landing page my 'Add to Cart' button looked like the pic below [with the pink dress]. Also, I inserted custom code to get the button as it was. Why did the button change? How to do I get my button back to it's original size?

Hi, I have problem with buttons. On dekstop (image 1) they are nicely after text block but in mobile there's too much space after text block (image 2). How can I move buttons on mobile so they are nicely after text block (image 3).

Am looking for a way to make a single button to access multiple page. each of the page have its own different category. I want o create a button or page to access those different categories in a single page if possible. Thanks for the response

Hi! I did a website for a beauty house/saloon (kauneushoitola in Finnish). Website is https://www.emisbeauty.fi/ and first time I am using Squarespace. I was wondering if people have any feedback or suggestions to make my website a little better (SEO, content, anything). Thank you! There's some problems in mobile version with button paddings in front page and here with accordion tabs: https://www.emisbeauty.fi/kestopigmentointi I am trying still solve those.

Hi Everyone, I'm trying to add a secondary "View Cart" button underneath my "Add to Cart" button on each of my product pages. I've followed the tutorial listed here, and it has worked great in adding the secondary button where needed, however, once you back out of one product and into another on mobile, the button becomes invisible. If you click the area where the button is supposed to be, it will in fact take you to the Cart, but you can't actually see the button. The problem seems to be unique to mobile. In Squarespace's mobile preview the button is fine on each product but when testing the site on my actual mobile phone, it disappears as described. Any ideas? Site password: hibean The problem is in the "Prints" area

Hi there, I am trying to reduce the top and bottom padding white space in this form button and this is the smallest I've been able to get it. But it's just refusing to go any lower than it is, even with smaller px as you can see in the Custom CSS box. I've attached the Inspect if this is any help. Could someone tell me why it's not removing the white space and how to code it so that it removes the space? Thank you to whoever can help with this!

I have used an events section and customized the card styles, I am hoping to change one of those red primary buttons to a secondary button which is in a different color and less prominent. I don't see a section to change button styles for these cards, if I was to change the theme, it will change all buttons to secondary or tertiary which is not what I am looking for.

On Android phone, the Contact Button doesn't show up properly. It's half covered by the business info. Do you know if it's possible to move it up? because in edit you can't modify the button position.

Is it possible to make certain navigation items in the top menu appear as buttons instead of regular text links? I'm not talking about the "button" option for the last menu entry in the header. I want to make other menu entries appear as buttons.