Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Popular Content

Showing content with the highest reputation since 06/05/2020 in Posts

  1. 6 points

    [Share] Squarespace 7.1 CSS ID List

    Some CSS Class/ID for Squarespace 7.1 Header Header: header#header Site Title: a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Mobile Navigation Items: .header-menu-nav-item a Mobile Menu Icon: .header-burger Mobile Menu X icon: .burger–active Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity 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 Title: .cart-title Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Product Thumbnail: .item-image Product Name: .CartTableRow-itemTitle-1MDgZ a Quantity input: .CartTableRow-itemQuantity-LwuRx.item-quantity Price: .CartTableRow-itemPrice-26eXS.item-price Subtotal: .CartTable-subtotal-2nJjm Subtotal Price: span.CartTable-subtotalPrice-2JFeD Checkout: .CartFooter-checkout-28MW2.checkout Checkout Text: .CartFooter-checkout-28MW2.checkout span Variant Text: .CartTableRow-variant-1ihcF.variant Blog List Blog List: .collection-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: .collection-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 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 Checked & Wrote by tuanphan
  2. 3 points
    OHHHH. I think I see the issue. You might have put some of the CSS in the code injection block. So delete both codes from above replace with this (code injection) <script> window.Squarespace.onInitialize(Y, function() { $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer'); $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').click(function() { if ($(this).nextUntil('h3').is(':hidden')) { $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').removeClass('ui-open'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed'); $(this).nextUntil('h3').slideDown(); $(this).toggleClass('ui-closed ui-open'); } else { $(this).nextUntil('h3').slideUp(); $(this).toggleClass('ui-closed ui-open'); } }); }); </script> Then add this to Design -> Custom CSS .markdown-block p { margin-left: 1em; } .markdown-block .ui-closed:before { font-family: monospace; content: "+ "; color: #2DA9C6; } .markdown-block .ui-open:before { font-family: monospace; content: "- "; color: #2DA9C6; }
  3. 3 points
    This worked for me in 7.1: (shortcut version is at the bottom of this post) 1. Click on menu items as follows: 2. Home menu>Design>Colors>Section Themes 3. Find the Section Theme that's giving you trouble (ex. White Minimal) 4. Click on the pencil icon 5. Scroll to the Image Block where the problem is occurring (ex. Image Block Card) 6. Find "Image overlay" and click on the dot to the right (mine was maroon) 7. A color palette opens. Click on the top left corner of the palette or use the slider at the bottom to make the color white. 8. Wait a second for the change to take place. You should see the dot change to white. I think you can also do this directly from the image block itself by going to Pages, clicking on the page you want to edit, click Edit, then hover over the block that's giving you problems. Click the pencil icon to edit the block (not the image), then click "Colors" in the pop-up menu. The theme you are currently using should be highlighted. Click on the pencil icon on your current theme, and it takes you to the Section Themes design page and you can follow steps 5-8 above.
  4. 3 points
    Hi all! I'm really excited for this new Club for photographers. I'd love to start this thread for people to share a bit about themselves, their business, and what they'd like to get out of a subcommunity like this. Let me know if you have any questions about posting, creating Clubs, or managing Clubs! -Maddie, Circle Community Coordinator
  5. 3 points
    I haven't seen this thread before, but I'm a professional photographer in South Mississippi. I do wedding and portrait photography mostly, but I have started working with some businesses for branding work as well. This is my website: http://www.annacirlotphotography.com
  6. 3 points

    Hamburger Menu Nav 7.1

    Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! .header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}
  7. 2 points

    Photography website feedback

    Site URL: https://www.timtadder.com/ Thank you for taking a minute to help me with my new website. I am a commercial advertising photographer and just moved my website to the squarespace platform to improve the sotry telling and SEO squarespace adds with its setup. I am experiencing analytic disasters compared to my previous site which is exactly what I did not want to happen. My bounce rates are off the chats and the speed ot the site is horrible. There is not much difference from my previous site as far as the amount of images and videos being served so I am curious to get user feedback. Thank you so much for the consideration. Best TT
  8. 2 points
    Worked a charm, thank you!
  9. 2 points
    Add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1588737720160_6409 .sqs-gallery-design-strip-slide { cursor: context-menu; }
  10. 2 points

    Mobile Background Size

    Make sure you put the code in the code injection section of the home page. Not in the site wide code injection area.
  11. 2 points
    $('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html(''); This jQuery would do it, but personal accounts don't allow code injection.
  12. 2 points

    Rounded edges image cards

    Just perfect @paul2009 and great for me to learn too. Thank you so much.
  13. 2 points

    Rounded edges image cards

    You should be able to do this with a little more CSS 🙂. For example: @media only screen and (max-width: 767px) { .view-item.collection-type-blog.collection-5eefe73c2814402a19db9172 .sqs-block-image img { max-width: 70%; margin-left: 5%; } } Explanation: The first line is a media query that prevents it from applying unless the "viewport" (the screen width) is less than 768 pixels. I set the maximum width of the image to 70%, but you can change this to suit your needs. I added a left margin of 5% to align the image with the text on the mobile page, because images are normally shown full width on mobile devices.
  14. 2 points

    Shopping Cart Size

    .floating-cart .icon { width: 50px; height: 50px; } .floating-cart { border: 2px solid; border-radius: 10px; } Size bump and optional border
  15. 2 points
    Todd, this actually looks better. A little combination of both of our codes....plus a little more. You will have to remove the other code you just added. .header-nav-folder-content { padding-top: 2px !important; padding-bottom: 2px !important; } .header-nav-folder-content > * { padding-bottom: 8px; padding-top: 8px; } .header-nav-folder-content > * + * { border-top: 1px solid rgba(0,0,0,.1); }
  16. 2 points

    Improve Search Engine like Google

    Add to Home > Design > Custom CSS @media screen and (min-width:641px) { .sqs-search-container-list>.search-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } }
  17. 2 points
    This worked for me - thank you so much!
  18. 2 points


    Hello Everyone Just wanted to see what everyone else thinks of 7.1 I have created quite a few 7.1 sites for clients over the last few months (been a SS Specialist for a few years). I have come to the conclusion the 7.1 is only good for very simple projects. The amount of roadblocks I come across just trying to do very simple tasks is making it impossible to use and I keep coming across bugs and glitches... There are some good features with 7.1 and at first, I was quite enjoying using it, found it quick and easy to build a nice looking layout....BUT after a while, I realized that its VERY limited. I would describe it as Squarespace Lite. And as the design options are so limited I found I was creating websites that all looked very similar. I do like that there are no templates, giving it a sense of freedom for the designer, but in the end Squarespace has done the opposite. There is very little freedom for creativity, sadly. I can understand that SS wanted to make it super easy for clients to build a nice site in 5 mins. But I think they have read the room wrong, most clients want creativity in their design, they dont want a site that looks like everyone else's, they want it to be unique and be able to put their little touches to it. 7.1 stops that. Also, the UX of the backend is extremely frustrating, so many clicks to get to one section/feature change. Its ok for use now and then but as someone who uses it every day as a job it really grinds my gears! Before, you could click on an element of your site and change its color/font/size... all in one go. But now you have to go back and forth to each section to change one thing. How they ever thought that was a good idea? I really hope they correct faults and add far more design freedom, I love Squarespace but for now, I think I will stick to 7.0 and encourage clients to do the same unless the project is super simple. Would be interested in what other people think Thanks for reading Richie
  19. 2 points
    Hey try this code. Also big fan of David Perell 🙂 .seva-form.formkit-form { margin: 0 auto; }
  20. 2 points
    @katiapase It'll depend on what blocks you use on the page, especially if you're wanting to have the borders be consistent across all the blocks on the page. I would put all the elements that you're going to use on the page first and then revisit
  21. 2 points

    Hamburger Menu Nav 7.1

    You can replace burger icon with custom three lines (here is an example img) Add to Home > Design > Custom CSS. Replace current image with three lines icon url .burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }
  22. 2 points

    Rounded edges image cards

    The principles that I posted above will apply. Your new blog has the ID collection-5eef756051dd591e6c7efa5b. You (or others reading this) can find a collection ID by using the dev tools built into your browser. I wrote a guide for this if you'd like further pointers. Regarding the specific question, you can add rounded corners to all the images within all the posts in this blog, by adding this to Custom CSS: .Main .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img { border-radius:10px; } Regarding the Summary Block spacing, there's 40px of right margin after each column in the block, hence the off-centre look.
  23. 2 points
    Site URL: https://gagosian.com/artists/michael-heizer/ Hi, I am trying to figure out a way to have a secondary navigation bar for specific pages. The Primary and Secondary Navigation on this website is similar to what I am trying to achieve: https://gagosian.com/artists/michael-heizer/ Please let me know if you have any advice on building a navigation for specific pages, that could result in a similar experience as the website in the link above. Thanks!
  24. 2 points
    @Ben_Keeley You can use this code. You can change the last value (0.5) between 0 - 1, to adjust how transparent the color is. BTW is this your company? If so super cool 🙂 /* Add this code to Design -> Custom CSS */ #header { background: rgba(0,0,0,0.5); }
  25. 2 points

    SOLVED: Reducing size of related products

    @bangank36 hmmm doesn't seem to work but I managed to do it with this! .ProductItem-relatedProducts .list-grid {grid-template-columns: 200px 200px 200px 200px 200px 200px 200px !important; }
  26. 2 points

    2 Logos side by side on header

    Hi jbozo99 This can be achieved via custom css/js. Add this into advanced->custom code <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { var pageUrl = "/office-shacks"; var logoUrl = "https://previews.123rf.com/images/sabinarahimova/sabinarahimova1808/sabinarahimova180816535/107766980-office-block-vector-icon-isolated-on-transparent-background-office-block-logo-concept.jpg" $(".header-title-logo").append('<a href="'+pageUrl+'" data-animation-role="header-element"><img src="'+logoUrl+'"></a>'); }); </script> Good luck!
  27. 2 points
    @snorkelcookislands taking a look again but now i'm not seeing those icons, must have moved them. I noticed another issue on the "Our Story" page, it's common when there's no background for the menu, the logo and menu links can sometimes be difficult to see depending on the background image for the page. You can add a subtle dark gradient that will ensure the white links/icons/logos are still visible. Before: After: /* Use this to apply gradient to all headers (desktop, tablet, mobile) */ header { background: linear-gradient(to bottom, rgba(0,0,0,.3), transparent); } /* Use this to apply it only to tablet and down */ @media(max-width: 768px) { header { background: linear-gradient(to bottom, rgba(0,0,0,.3), transparent); } }
  28. 2 points

    Gallery Captions

    Let's try this custom code <style> /* info button */ .show-info .ctrl-button.info .icon-info { color: #673AB7; } /* arrow button */ .nav-projects .arrow-wrapper a { color: yellow; } </style>
  29. 2 points
    @Arch Instead of placing the JS code in the footer, you should be able to update each product by adding the JS code as a code block under the Additional Info tab for each product, see video example: QHyQ9XfVlx.mp4
  30. 2 points

    discount strike outs

    @rachelt add this to your custom CSS [data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .row.sqs-row:nth-of-type(2) { display: flex; flex-direction:column; } [data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .sqs-row:nth-of-type(2) .col { display: flex; } [data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .sqs-row:nth-of-type(2) .col div { width: 100%; } @media(min-width:767px) { [data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .row.sqs-row:nth-of-type(2) { flex-direction:row; } } Result:
  31. 2 points

    discount strike outs

    @rachelt looks like it's a formatting error on your markdown block. Try adding this code for your Markdown block. Once you get the color and style the way you like you can take the CSS in between the style tags and add it to your custom CSS <style> .flex { display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; } .regular-price { text-decoration: line-through; color: gray; } .discount-price { margin-left: 8px; font-size: 24px; } </style> ### Standard 1 HOUR <div class="flex"> <span class="regular-price">$75</span> <span class="discount-price">$99</span> </div> Per Hour Lesson * Access to Live Online Course * 1-on-1 Introduction * Flexible Scheduling * Quality Tutors [Get Started](Get Started)
  32. 2 points
    @Arch You can use this code and it will add a class "arch-style" that you can use to style your footer links when active. https://gist.github.com/ryandejaegher/76414a7d76ae4d5491e3b5bebd211e5c
  33. 2 points
    This is clearly an issue that is not resolved and is not IOS or Android, browser, or even geographically related. The mobile fallback images do not even work. this needs to be resolved.
  34. 2 points
    Add to Page Settings > Advanced > Header <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style>
  35. 2 points
    THIS IS EXTREMELY FRUSTRATING. Squarespace makes it pretty impossible to set up a checkout process for offline payments, unless you like imperfect workarounds. Either Squarespace is simply unaware of such a need (seems unlikely) or their business model is beholden to the payment processors (they probably get a cut off the transaction back from the processor) - the suppression of such a basic feature is otherwise inexplicable. I am venting my frustration here, because I like Squarespace, and would like them to fix this. In comparison - Ecwid - extremely easy to use, great features set, design ethos - Soviet housing block utilitarian; Shopify - works well except for the usurious toll they take on every transaction, including offline WordPress/WooCommerce - the Rube Goldberg site builder with a Dewey Decimal System inspired admin dashboard Why do I like Squarespace - in one word - design. Simple to use admin dashboard that does not hurt my eye or sensitivities, as well as outstanding website design. Where does Squarespace fall short - basic features critical to commerce such as offline checkout (and other finer customisation details, but lets stick to offline checkout today). CURRENT WORKAROUNDS FOR OFFLINE CHECKOUT - Create a 100% Discount Code so customers can checkout without a card. Issue - you are literally offering the customer a 100% discount since you can't even change the words (automatic description "Save 100% on any order" appears at checkout and in order conf email) - Wishlist extension . Issue - the faq says this substitutes the checkout process, i.e., you cannot have some customers adding to Wishlist and others checking out with carded payments. This solution would be great for those whose entire business is offline but for others who have a mixed customer base (some with credit cards, some debit cards, some paying through bank transfers, others at store) this does not seem to be the solution - Square for Offline - this is not available outside the USA! It is 2020, and the rest of the world is not so shabby as to be ignored Squarespace should rightly be proud about its design, and its Values , one of which is Simplify. Surely offering a simple solution to add Offline checkout is possible and long overdue? Anthony Casalena, are you listening, because no one else at Squarespace apparently is.
  36. 2 points
    Site URL: http://philipstewart.squarespace.com Hi, I would like to display my images in their original sizes/aspect ratio. At the moment, I can only select one aspect ratio for all the shop's thumbnail images, which at the moment is "1:1 square". Is it possible to have these set to auto so that if it's a vertical/horizontal/square image, the thumbnail will display as that aspect ratio. I would also like when selecting an image/product from the shop to have the image in it's original size. Again, there is just one standard to set for all products where my products/images can be all different aspect ratio's and I would just like them to display at the size I have saved them as which is 1200px on the longest edge. Many thanks for any help. It is much appreciated!
  37. 2 points
    Hi, guys! Excited to join this group. I'm the Content Manager for a soft plastic fishing bait manufacturer and shoot all the product for our product catalog, online store, and advertising, but in my "free time" I'm a food writer and photographer. Like a lot of you, I'm in a transitional stage and I'm looking to move toward shooting commercially for people in the food and beverage industry. My food blog/photography portolio site is: http://www.foodnwhine.com/ Heidi
  38. 2 points
    So excited about this topic - it just popped up on my Circle feed - I'm a brand new company - but with 10 years of experience shooting for a large government organization. Stepping out on my own has been scary - especially in times of COVID - but hopefully things will pick up again. Check out my site: http://theadaptedlens.com.
  39. 2 points

    Klarna payment integration

    Hi, Nothing new about the Klarna-integration? It is 2020 and still nothing... Best regards, Jesper
  40. 2 points
    Snap...half way down our home page we have a video which doesn’t play, yet it plays when you preview mobile mode in edit! https://www.gsmcs.co.uk
  41. 2 points
    @Paul_in You could add the JS and CSS below. What it does is dynamically add a data-dynamic-bg attribute to the .Header element whose value is based on the id you add to the IDS variable. Update the IDS variable in the JS code by adding the id's of the sections you want the background color to change: JS: (function (document) { /************************************************************************** * This code will add a "data-dynamic-bg" attribute to the .Header element * if it's over a section defined in the array of IDS. ***************************************************************************/ // Array of HTML element ID's. var IDS = [ '#landing-01', '#landing-06', ]; /************************************************************************** * DO NOT EDIT CODE BELOW, unless you know what your doing. ***************************************************************************/ // Initialized code depending on if the user places it in the header or footer if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var header, section, headerHeight, rect, setBackground, removeBackground, timeout; addClosestPolyfill(); if(isMobile()) { header = document.querySelector('.Mobile-bar'); } else { header = document.querySelector('.Header'); } addDynamicBg(); delegate(document, 'click', '.Header a', function(){ setTimeout(function(){ setBackground = false; removeBackground = true; header.setAttribute('data-dynamic-bg', ''); addDynamicBg(); }, 500); }); window.addEventListener('resize', debounce(function(){ if(isMobile()) { header = document.querySelector('.Mobile-bar'); } else { header = document.querySelector('.Header'); } addDynamicBg(); setBackground = false; removeBackground = false; }, 250)); window.addEventListener('scroll',function(){ // If there's a timer, cancel it if (timeout) { window.cancelAnimationFrame(timeout); } // Setup the new requestAnimationFrame() timeout = window.requestAnimationFrame(addDynamicBg); }); function addDynamicBg(){ IDS.forEach(function(id){ section = document.querySelector(id); // Exit if not section found if(!section) return; rect = section.getBoundingClientRect(); headerHeight = header.offsetHeight; if(!setBackground && rect.top <= headerHeight && Math.abs(rect.top) < rect.height) { setBackground = true; removeBackground = false; header.setAttribute('data-dynamic-bg', id); } if(!removeBackground && rect.top <= headerHeight && Math.abs(rect.top) > rect.height) { setBackground = false; removeBackground = true; header.setAttribute('data-dynamic-bg', ''); } }); } } function isMobile() { return window.matchMedia('(max-width: 1080px)').matches; } function debounce(func) { var wait = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1]; var timeout = void 0; return function () { var _this = this; for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } clearTimeout(timeout); timeout = setTimeout(function () { func.apply(_this, args); }, wait); }; } function delegate(target, eventName, selector, handler) { target.addEventListener(eventName, function (event) { if (matches(event)) { handler(event); } }); function matches(event) { const element = event.target.closest(selector); return element !== null; }; } function addClosestPolyfill() { if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function (s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } } })(document); CSS: /* Smoothly transition the background colors */ [data-dynamic-bg]{ transition: all .2s; } /* Target the section with the id of #home-01 */ [data-dynamic-bg="#home-01"] { background-color: blue !important; } /* Target the section with the id of #landing-06 */ [data-dynamic-bg="#landing-06"] { background-color: green !important; } Here's an example of how it works: 5Q6vcdsrbR.mp4
  42. 2 points
    Why are normal and basic e-commerce store features missing? (The elephant in the room?) Here's a list of complaints I have. My basic question is why isn't Squarespace trying to offer features to seriously compete with Shopify and others to expand their business? Why are the following missing? There's no option to sort/filter products by tags, availabilty, sales, color, or anything else. There's no built in option for product reviews. You can't expect everyone to figure out coding and troubleshooting every single time they want a basic, ubiquitous store feature. There's no ability to add all products to a single page. Likewise, there's no ability to add all sale products on a single page to show a "clearance" section. There's a limit to adding more than 200 products on a single collection, meaning you have to make new collections for each category. Why jump through hoops to invest in expanding your product offerings? Why not just a single collection like any normal store??? There's a consistent value for design in Squarespace which is what attracts any sensible person, but why are there consistent shoddy designs??? A built-in inability redesign the Search page, the Checkout page, the account page, the login page, etc etc. Why are functionality updates not easy? Why the crazy hassle to go from 7.0 to 7.1? Why can't I easily get new features and be confident for my business investments? Why do popular features have to disappear when there is an update even then? For example, parallax is gone with the update. Other normal store features that should be standard to ease merchant usage are missing also. Product color to image linking, liking products. Why is the functionality of different themes restricted instead of simply design? I'm reading 7.1 fixed this, but the point still stands. Why not just have a simple flexible design language where everyone can have every feature and not have to go through the hours of work required to apply new themes Why all the rigidity?? Why can't I edit a gallery's transition settings when directly in an index, but only in a gallery block? Why no limit on how many product's per page?? Isn't that normal? Why is there no built in return/exchange mechanism? Why do you make us pay for basic store features??? Why is Shopify automating basic calculations like adding statebystate tax information, and you guys are making us do it manually or pay for it? This is crazy. Also why not integrate live shipping costs from different shipping services by weight, etc. Why do these basic basic features need to be such a hassle. Why no drop shipping integrations?? Is that like a crazy thing to ask for? Why no integrations to Printful competitors. Please start investing more in your ecommerce side. Integrations are lacking, features are lacking, Please compete with shopify. You guys are just ASKING us to migrate elsewhere. Its constantly frustrating to encounter squarespace limitations and dragging, cloggy updates. I'm sure there's many more basic features that are missing. These are just the ones I've been facing.
  43. 2 points
    Remove code I sent, add this to Home > Settings > Advanced > code Injection > Header <style> @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-column-gap: 5px; grid-row-gap: 5px; } } </style>
  44. 2 points
    I just had a client ask me for something very similar! Google around I found this post, and thought I would share my solution... It was not manageable to add hundreds of product blocks and the summary block doesn't contain the item-id needed to link it to an Add to Cart button. It was best to use the product list page. I figured out a solution that works great on desktop and mobile. https://www.bradgood.net/articles/how-to-add-an-add-to-cart-button-to-a-squarespace-product-list-page
  45. 2 points
    Dear Squarespace team, Full-width sliding images with the ability to place the same or different text and buttons on each image is absolutely a feature we need. I get this request on literally almost every site I build. I believe it is a feature that would get used millions of times over. I love what you have built and the more I get used to 7.1, I can see it's advantages. Adding this feature would make 7.1 an absolute no-brainer. Please acknowledge our collective desire to have this implemented as soon as possible. Thank you for all you do!
  46. 2 points

    Food Items and Sales Tax

    I agree, I also wish to sell products with and without taxes, a simple checkbox on each product, taxable or not. Would be a godsend!
  47. 2 points

    Food Items and Sales Tax

    Agree- this is definity something that needs attention. I sell product (taxable in my state) as well as a non taxable service (such as a workshop) that does not get taxed. My only option is to refund the sales tax to those who purchase a non taxable workshop-not ideal! Please add a feature to make this possible! Thank you!
  48. 2 points

    How do I delete imported images?

    No offense to colin.irwin, or anyone else, but this is a little bit ponderous from a user/content creator perspective. Is there any other reason for the inability to delete content that is uploaded? Just for my situation, I'm an artist, I just need one site which I have, but there is plenty of uploading and removing, as work gets older and/or you make newer better work. So there will be plenty of iterations. There are a couple ways to think about this. - I have uploaded content that is created by me, and I'm not saying anything will happen to it probably, but I therefore have no control that is on your servers once it's uploaded. It's uploaded and can't be removed. Little troubling, if I don't want it up there anymore, as the owner of it. And isn't that akin to saying that SS now technically co-owns it, since its up and says I can't remove it? Indirectly speaking. - Maybe there's a scenario - where I work with a studio, to produce some work. I have the ok to upload and show it on my SS site. But what if, for some reason, they want it down? Granted, I can remove it from visibility. But I still have a duty to them to remove it from any place they don't want it. - I linked my Instagram, but it initially went to a more personal account, rather than a work oriented account (which I had picked anyway). But now personal images (safe for work, but still personal nonetheless), are in that Uploaded section. And they can't be removed. Not good. - Just looking at it practically - scrolling through the uploaded list can be a little cumbersome if there are a lot of old images in there. Some may be undesirable to use anymore, but there are still older ones that are pertinent, so you still have to go through the list. And it can be a little slow. - The functionality to do this very thing, is indeed there for Wix. Just tested it. There are more scenarios we can think of, but no point in going on and on. But from the perspective of the user and as a creator, it overall makes me a little wary of staying with SS, to be brutally honest.
  49. 2 points
    I had this exact same issue today and support wasn't sure either. However, I managed to figure it out! You need to select blog post title above the header. Not very intuitive. See below:
  50. 2 points
    Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use. --------------------------------------------------------------------- Hi @dan3. Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 . View Demo Site JavaScript Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script> CSS Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } This is of course experimental. Do let me know how it works for you, or if you have questions. If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date. -Brandon
This leaderboard is set to New York/GMT-04:00
  • Create New...