Leaderboard

Yes, you can do this in Design > Site Styles. Under HEADER: TOP, you'll need to change Center Layout to Stacked instead of Horizontal.

Do you mean you want it to be a different size on mobile? If so, adding the following to your custom css should help @media only screen and (max-width: 640px) { h4 { font-size: 88px; } } That should work - all you need to do is tweak the 88px to whatever value you want.

Hi, I am pitching to a client who will sell apr. 10 SKU's and they are pushing Shopify over any other platform. I do like the marketing tools offered in the Shopify App Store, online marketing campaigns and integration with e.g. Google and Facebook to get more eyeballs on the product, better (?) shipping integration... etc... But they will only have 10 SKUs... not 1,000 so I am torn. Any advise? Have a great day! Roland

Although flag icons can be a useful visual cue, bear in mind that best practice (based on user experience design) is to always use the name of the language in its native format, rather than flags. Flags aren't languages and can offend a large proportion of your audience unless the site is aimed at a specific country. For example, English is widely spoken. If you add an US flag, how will visitors react in Australia, Canada, Ireland, New Zealand, Singapore, South Africa and the United Kingdom? One way to make it easier for visitors is to automatically select the correct language based on the visitor's browser language.

Hi, So, I was looking in to jumping on to Squarespace development (freelance basis) but I've read about version 7.1 that it would end template support and so basically no third party templates could be uploaded too. So is Squarespace completely cutting of the developers so we have some hope yet? I'm quite confused about it.

Sorted! Thanks @MagneM it worked. I had missed something out

add to Home > Design > Custom CSS body#collection-5de720b589bdad666756fb35 figure.Intro-image.loaded img { display: none; background: #fff; } body#collection-5de720b589bdad666756fb35 .Site-inner { background: #fff; }

Hi @kellalv Absolutely! Paste this in Design > Custom CSS: #topNav { float: right; } Magne

If you want that, i guess you need to use JavaScript to insert new Image Navigation HTML 😅 I will take a look tomorrow.

I currently use ConvertKit where I can maintain a single list, but organize it by segments based on interest, interactions I've had with them, etc. Can I do that with SqSpace email marketing or would I need to create a whack of lists with repetitions?

@Brig That guide was written for the Brine template on Squarespace 7.0 but I can see that you are using 7.1. Here's an updated guide for 7.1.

An experienced marketer told me that he had a client who was trying to track ecommerce on Squarespace using Google Tag Manager but they couldn't track the cart. Google Tag Manager is the standard for e-commerce measurement so I was surprised to hear it but I haven't found any documentation to disprove it (and I have a client who has chosen SS e-Com). Anyone know the current status of Squarespace E-Commerce as it relates to tracking via Google Tag Manager? I'm aware of the GTM implementation process with SS but haven't work with e-commerce yet.

add to Home > Design > Custom CSS @media screen and (max-width:640px) { #logoImage img { width: 150px !important; height: auto !important; max-height: unset !important; } }

It's not possible.

Works like a charm. Thank you so much!

@FraserWilkinson Go to Home > Design > Custom CSS > Scroll down > Click Manage Custom File > Upload your image > Wait 1 minutes > Put the cursor at background-image: url("put cursor here"); > Click image you uploaded > Squarespace will automatically paste image url.

add to Home > Design > Custom CSS body:not(#collection-5ddd7262d57b5f006a841edc) .header-actions-action--cart { display: none; }

It's a great question @rvdhout. Personally I think Shopify is a great option, even for small stores, but only if the client needs a feature that isn't available on Squarespace Commerce. There are still a number of limitations to Squarespace Commerce. Some areas are improving 🙏 but other features are yet to arrive.

Christy, you are amazing. That was it. Thank you.

Worked perfectly! Thank you!

@lindi Try this extension: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde or my guide: https://beaverhero.com/squarespace-how-to/#How_to_find_Block_ID or div#block-yui_3_17_2_1_1571791886764_5472 h1 { color: red; } Yes, #yui will change if you reload website Dont use #yui, please use #block- or #block-yui or #page, or...

@cesarlanga add to Home > Design > Custom CSS @media screen and (max-width:640px) { body#collection-5de035815043fe7cebe9685f .sqs-block-image { max-width: 50%; margin: 0 auto; } }

Thanks so much for sharing this, @spencerhaddy I had a client who needed this and it worked like a charm!

@paulcristo Add to Home > Design > Custom CSS .Index-nav-inner a[href="#meetpaul"] { display: none; }

add to Home > Design > Custom CSS /* Nav - Downtown */ section#hero-banner .Index-page-content { padding-top: 0; } between the title and "Downtown Toronto" and the navigation bar. You mean Site Title or? There is too much spacing between the hero image and my next section. You mean white section between 2 sections, or ?

@tuanphan Thank you! Worked like a charm.

@cesarlanga Yes. You can try custom code to do that. Which image you want to change?

@cesarlanga .collection-type-gallery.gallery-design-grid .slide .slide-meta { display: block !important; position: absolute; z-index: 999; color: black; left: 0; right: 0; background: white; padding-left: 20px; bottom:0; font-size: 12px; } .collection-type-gallery.gallery-design-grid .slide .slide-meta p { margin-top: 0; margin-bottom: 0; }

This is a 'bug' in the default configuration of the Foster template. Squarespace have set MOBILE: CART to Position: Hide in Site Styles, but you can change it so that it appears in the header.

Hey weodeo, Considering what you are trying to achieve here, you may want to consider having a look into the Overlap and Collage Image Block layouts. Check Squarespace's help guide below for more specifics: Image Block layouts

Hello Tuanphan, thank you very much! Solved the problem with your second indication! Thank you again !!

Hi Guys, I reallly would love to use AMP for my blog, but there are some things that don't work. According to European Law the Link of my Imprint has to be displayed and users have to agree for the cookies. Both is not part of AMP in Squarespace. Another problem is that the ads are not displayed What can I do? thank you,

@SN23 Try adding to home > Design > Custom CSS .collection-type-blog.view-item .image-block-wrapper img { width: 100% !important; height: auto !important; box-sizing: border-box; }

First, can you enable title & description? i don't see both

@LMasonick, It should be under Blog: Typography & Colors > Item Title Font. You'll change the bottom selection there Line Height to something greater than 1em.

Hi @T1B Replace it with this: .Mobile-overlay-nav-item { font-family: 'Your Font' !important; font-weight: 200; font-style: normal; font-size: 30px; letter-spacing: 0em; } (Make sure you write the font-name correctly).

There is no perfect solution yet, but until Squarespace build this in as standard, there are a few third party options available. @sarah wrote a great article explaining the advantages and disadvantages of each: WHAT ARE THE OPTIONS FOR MEMBERSHIP-BASED WEBSITES?

Copy and paste the code below to your Custom CSS. Change the height value to what you want. Let me know if this works... .collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-block, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-block, { max-height: 500px!important; } .sqs-gallery-design-stacked-slide { height: 500px!important; }

It usually takes a couple of days after you launch your website for Squarespace to generate a site map.

Hi Michele There are a few issues that you need to correct. It's not working on desktop either, but if you have the fonts installed on YOUR desktop, it may appear to be working for you 🙂. Firstly, a rule of thumb is to not add '!important' unless absolutely necessary. You should remove it from line 4 (font-face) as it cannot be added here. Secondly, whatever you name the font in line 4 ('Playlist-Script') you MUST use the same name throughout, with the quotes. Take a look through the rest of your CSS and replace Playlist Script with 'Playlist-Script'. It should then work. Let me know how you get on. -Paul

@starladyplace - awesome! Do you mind voting/liking my answer so it is marked as solved? It can be helpful to other members and as well. Thank you!

Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000; } /* Nav item hover color */ .header-nav-item a:hover { color: violet; } /* Nav item active color */ .header-nav-item--active a { color: green; } Created by Tuan Phan. Share to be shared more.

This plugin will get you most of the way. https://www.squarewebsites.org/products/background-videos-utils It forces the mobile fallback image to show when video is preloading on desktop. The fallback will also show on mobile. I don't think it turns the loop control off but the author of the plugin @michaeleparkour can confirm that.

Add the following to the custom css area after any other code that may already be there .view-list { .BlogList-item-meta, .summary-metadata-container { display: none !important; } }

@jordandixon Add to Home > Design > Custom CSS .index-item:hover .index-item-title { display: none; }

Hey guys, I have the following problem: My Slideshows looks great on desktop, but not as good on mobile, especially for portrait mode pictures. For landscape, it is fitting but the pictures in portrait mode are too small (high). I want them a bit bigger. Is there a possibility to do that? Please take a look on this homepage for instance (on mobile): www.tobiasholub.at Thanks for your help!Michi

@RJTimmermans95 Add to Home > Design > Custom CSS a.Header-nav-folder-item:nth-child(1):hover { color: red !important; } a.Header-nav-folder-item:nth-child(2):hover { color: #009900 !important; } a.Header-nav-folder-item:nth-child(3):hover { color: green !important; } a.Header-nav-folder-item:nth-child(4):hover { color: #000 !important; } a.Header-nav-folder-item:nth-child(5):hover { color: rgb(0,0,0) !important; }

If you're still stuck this plugin will get it to work without fiddling any code https://www.sqspthemes.com/plugin-shop/squarespace-video-lightbox-button

I got this working with the following code in form post-submit HTML <script> var link = document.createElement('a'); link.href = '/s/filename.pdf'; link.download = 'filename.pdf'; link.dispatchEvent(new MouseEvent('click')); </script> Found in this stackoverflow answer

this is a ridiculous workflow to simply upload files