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

Leaderboard


Popular Content

Showing content with the highest reputation since 08/28/2020 in all areas

  1. 3 points
    (Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font 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 !important; } /* Nav item hover color */ .header-nav-item>a:hover { color: red !important; } .header-nav-folder-item:hover a { color: red !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.
  2. 3 points
    tuanphan

    Customize order confirmation page

    Can you place an order & share order confirmation page? We can check easier. I also wrote this guide, maybe useful: Customize Order Confirmation Page
  3. 3 points
    Hi, Use this article to make multi-language website. It has written by @tuanphan https://beaverhero.com/squarespace-2-languages/ Please use the like button if it helps you! Best, Leopold
  4. 3 points
    rapgamestevejobs

    Adding anchor links in 7.1

    Here's how I did it: 1. Name and enter your link: ex: #about 2. Add your anchor: code block: <p id="about"></p> 3. Smooth our scroll: Open custom css and add: html { scroll-behavior: smooth; } Site is still private for a client but I can link to it as proof once it's live.
  5. 2 points
    tuanphan

    FTP

    You need to enable Developer Mode to get this. (read carefully the guide) Home > Settings > Advanced > Developer Mode > Enable > You will see FTP Info.
  6. 2 points
    tuanphan

    [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
  7. 2 points
    Hi there, Having fun with Squarespace 7.1 for the first time. Is there a way to generate a number of unique discount codes in batch? It is important for us to generate unique discount codes for our members. Creating them one by one is looooooooooong. So we're looking for a way to generate them in batches, and ideally export them from Squarespace for easier distribution. Alternatively, we're open to import coupons if this is also possible. Patrick
  8. 2 points
    Hello! This should be an easy fix. Go to Design > Logo and Title I believe the first field there is "Site Title" and this is where it is pulling from. I'm guessing you are using Squarespace 7.1? I have a couple of clients using it and there must be a bug where occasionally this field decides to erase itself. Keep an eye on this as you make changes to the site as this will likely happen again.
  9. 2 points
    Hi Use this code in Design -> Custom CSS .sqs-add-to-cart-button { padding: 1.2em 3.5em !important; } Please use the like button if it helps you! Best, Leopold
  10. 2 points
    paul2009

    Line break in product name

    I wrote a guide for this: Split product titles onto two lines with Squarespace. This uses pure JavaScript, so is much more efficient and doesn’t require jQuery.
  11. 2 points
    tuanphan

    [Free template] Pricing Table

    Some free code to create Pricing Table. Table 01. 1. Add 2 Markdown Blocks with syntax #### Standard $19 Per Month * Free custom domain * SS Security * Unlimited Storage * SEO Features * Premium Templates * Contributors * Premium Extensions [Sign Up][1] [1]: https://beaverhero.com 2. Add Code Block & Insert this code <style> .markdown-block { background: #F2F5F7; margin-left: 17px; margin-right: 17px; transition: all 0.25s; } .markdown-block:hover { transform: scale(1.04); } /* title */ .markdown-block h4 { font-family: monospace; margin-bottom: 5px; padding-top: 20px; } /* price */ .markdown-block p:nth-child(-n+4) { font-family: monospace; } .markdown-block h4+p { font-size: 2em; } /* list */ .markdown-block ul { list-style: none; padding-left: 0; margin-bottom: 0; } .markdown-block ul li { color: #626262; padding: 5px; } /* Line between price - list */ .markdown-block ul li:first-child:before, .markdown-block ul li:last-child:after { content: ""; background: rgba(255,255,255,0.75); height: 1px; width: 50%; display: block; margin: 0 auto; margin-bottom: 20px; } .markdown-block ul li:last-child:after { margin-top: 20px; margin-bottom: 0; } /* buttons */ .markdown-block p:last-child { padding: 20px; } .markdown-block a { background: #0091CE; color: #fff; border-radius: 3px; padding: 10px 30px; display: inline-block; } /* Center all text */ .markdown-block * { text-align: center; } /* remove text padding */ .markdown-block p { margin-top: 0; margin-bottom: 0; } </style> Table 02. 1. Add 2 Markdown Blocks with syntax #### Standard $19 Per Month * Free custom domain * SS Security * Unlimited Storage * SEO Features * Premium Templates * Contributors * Premium Extensions [Sign Up][1] [1]: https://beaverhero.com 2. Add Code Block & Insert code <style> /* title */ .markdown-block h4 { background: #0098D9; color: #fff; padding-bottom: 5px; font-family: monospace; margin-bottom: 0; } /* price */ .markdown-block p:nth-child(-n+3) { background: #00A8EE; color: white; font-family: monospace; } .markdown-block h4+p { font-size: 2em; } /* list */ .markdown-block ul { list-style: none; padding-left: 0; background: #354153; margin-top: 0; margin-bottom: 0; border-top: 1px solid #293341; color: #A0ABBF; } .markdown-block ul li { border-bottom: 1px solid #293341; border-top: 1px solid #424F64; padding: 5px; } /* buttons */ .markdown-block p:last-child { background: #354153; border-top: 1px solid #424F64; padding: 20px; } .markdown-block a { background: #0091CE; color: #fff; border-radius: 3px; padding: 10px 30px; display: inline-block; } /* buttons hover */ .markdown-block a:hover { background: #0082B9; } /* Center all text */ .markdown-block * { text-align: center; } /* remove text padding */ .markdown-block p { margin-top: 0; margin-bottom: 0; } </style> Code by Tuan. Table style from Codecanyon Will update many other tables soon.
  12. 2 points
    @HarKS Yes, there is a way to do this, and it is very easy to do so! Just go to your Squarespace site-click edit-then click the header and click the button that says “Edit header”. After you pressed that button, there should be a few different sections such as header layout, logo and site title,etc. You will want to press the section that says “style”. Now you can customize the link spacing, and more! I sent screen shots down below to help you more. Do you have any other questions? Thanks!
  13. 2 points
    paul2009

    Transferring a domain and email

    You can create your own page to do this. See https://support.squarespace.com/hc/en-us/articles/205814388-Creating-a-landing-page
  14. 2 points
    Hey, I would mix the code from @WillMyers for tabbed content and then use the accordion in one of those sections: https://www.will-myers.com/articles/how-to-add-tabs-in-squarespace-70-71 https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace
  15. 2 points
    Add to Home > Design > Custom CSS /* Variant dropdown size */ .ProductItem-details .variant-option select option { font-size: 20px; }
  16. 2 points
    Add to Home > Design > Custom CSS span.date { display: none; }
  17. 2 points
    tuanphan

    Carousel Scrolling Announcement Bar

    You can try this code. I tested on my demo site.
  18. 2 points
    Hi Lynne You can add HTML to Markdown Blocks, so instead of using the link button, you can simply add the HTML. For example: <a href="www.squarespace.com" target="_blank">Squarespace</a> Change the url and description to match your needs. Note that this will open a new “browsing context”. This usually means "new tab" instead of "new window", but it will depend on the visitor’s browser settings. You have no influence over that. -Paul
  19. 2 points
    jevu-sqsp

    Site migration

    You can reach out to Customer Support via email or Live Chat as the prorated refund would need to be manually processed. Automatic refunds only apply when you cancel a site within 14 days of the site's payment, so prorated refunds have to be manually issued. You'll still need to upgrade the new site to a paid plan, but you'll receive a refund for the unused time remaining on the old/canceled site.
  20. 2 points
    AnnVivo

    Repeating events on calendar

    SOOOOO Frustrating not to be able to put the repeating weekly schedule on the calendar without duplicating EACH item and then editing it for the next week. Come on folks.
  21. 2 points
    You are welcome! Use this code in Design -> Custom CSS @media screen and (min-width:678px){ .tweak-products-width-inset .products.collection-content-wrapper h3.nested-category-title { font-size: 40px !important; } } @media screen and (max-width:677px){ .tweak-products-width-inset .products.collection-content-wrapper h3.nested-category-title { font-size: 20px !important; } } Please use the like button if it helps you! Best, Leopold
  22. 2 points
    Remove your code & use this code @media screen and (max-width: 767px) { .homepage #page section:first-child { min-height: unset; height: 30vh; } } This is a bit complex. I will check again tomorrow
  23. 2 points
    Site URL: https://www.creativeblackwomansplaybook.com/ As designers, we always love the opportunity to engage in a collaborative project with people who value great design, so we were thrilled when Weglot approached us with the idea to collaborate on a multilingual website to showcase the work of a talented artist while demonstrating the translation capabilities using Weglot and Squarespace. After considering some colleagues to be the focus of the project, we thought Co–Conspirator Press was perfect. Co–Co press is a publication platform that operates out of Los Angeles based Women's Center for Creative Work. They work with independent artists, writers, and other creatives to help them share their voice. After proposing the project to them, we decided to showcase “The Creative Black Woman’s Playbook” by author Veronica Cammile Ratliff. A digital version of the book was created for this project to be sold on the Squarespace site as well as a Spanish translation (working with Weglot for the translation) of the ebook. The site features snippets from the book, information about the author and Co–Co Press, as well as the ability to toggle between English and Spanish for the website content. We had a blast working on this, come see why it was so fun.
  24. 2 points
    #block-yui_3_17_2_1_1599495604788_125794 a { color: blue !important; } #block-yui_3_17_2_1_1599495604788_125794 a:hover { color: red !important; }
  25. 2 points
    You should be able to modify the message by replacing the CSS with something like this: #confirmed-page { // Order Confirmed title h1 { font-size: 34px!important; } // Order details text p { font-size: 20px!important; } // Your purchase includes digital... h3 { font-size: 0!important; visibility: hidden; } h3:after { content: "To access your purchase, please click the link below. Thank you!"; font-size: 28px!important; visibility: visible; font-weight: bold; } // Link to digital content a { font-size: 20px!important; color: blue!important; border-bottom: 1px solid blue!important; } }
  26. 2 points
    tuanphan

    Carousel Scrolling Announcement Bar

    First, enable Announcement Bar next, edit Footer > Add Code Block > paste this code <!-- Scrolling bar - Codepen --> <div id="text-carousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="row"> <div class="col-xs-offset-3 col-xs-6"> <div class="carousel-inner"> <div class="item active"> <div class="carousel-content"> <div> <p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p> </div> </div> </div> <div class="item"> <div class="carousel-content"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! </p> </div> </div> </div> <div class="item"> <div class="carousel-content"> <div> <p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p> </div> </div> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#text-carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#text-carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <style> .carousel-content { color:black; display:flex; align-items:center; } #text-carousel { width: 100%; height: auto; padding: 50px; } </style> Then share site url. We will give the code to move scrolling bar into Announcement bar
  27. 2 points
    Hi, Insert this code in your Footer Code Injection. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#block-yui_3_17_2_1_1599412523559_8193 .image-card-wrapper .image-button-wrapper .image-button-inner').html('<a href="" data-leadbox-popup="2M4HPLXiWwLAuThfhXRuWm" data-leadbox-domain="brandistanley636.lpages.co">Click here to subscribe</a>'); }); </script> Please use the like button if it helps you! Best, Leopold
  28. 2 points
    mrswtgjr

    Image display on Social Media

    I am having the same issue as Pepin and Dave. Two shared posts from our Web site earlier in the week (on Monday and Wednesday) posted to Facebook as expected: with the link and the article image. The third link I shared to Facebook (on Friday) shows the link, but the image is the dreaded black box. I used the Facebook debugger tool and the image showed up there as expected yesterday; today, I see the "missing image" icon. I do get this warning in the debugger: The following required properties are missing: fb:app_id. This same error showed up yesterday when I could see the expected image and also today when I get the missing image icon. Not sure why this is an issue now when we've changed nothing on the Web site or the Facebook page in the last two days. Help would be greatly appreciated!
  29. 2 points
    christyprice

    moving text left on banner

    You can target just that one text block, so something like #block-5f524e504e7c943516ebdfe6 .desc-wrapper { margin: 0 !important; text-align: left!important; } Use the Squarespace ID finder Chrome extension to easily find your unique Block ID.
  30. 2 points
    They used this code [data-section-id="5f473814f0f6cc540dfff7e5"] .section-background { background-image: linear-gradient(100deg,#3874ba,#edccc9) !important; background-size: 400% !important; text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; } Each section has different ID. Use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en
  31. 2 points
    Add to Home > design > Custom CSS body#collection-5ef1d384a1668a76c2629b73 header#header { background: green; }
  32. 2 points
    Hi Use this code in Design -> Custom CSS section[data-section-id="5f43f4cd52536f034effcd81"] .content-wrapper { padding-bottom: 0 !important; } div#block-293b945193742f90a356 { padding-bottom: 0 !important; } section[data-section-id="5eba98feb9b26c76303f6b53"] .content-wrapper { padding-bottom: 0 !important; } Please use the like button if it helps you! Best, Leopold
  33. 2 points
    creedon

    Reordering Categories

    It can be done. Put the following CSS in Store Settings > Advanced > Page Header Code Injection. <style> /* reorder Store categories Brine template family */ /* desktop */ @media only screen and (min-width: 641px) { .ProductList-filter-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -moz-flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child(2) { order: 4; } .ProductList-filter-list-item:nth-child(3) { order: 6; } .ProductList-filter-list-item:nth-child(4) { order: 2; } .ProductList-filter-list-item:nth-child(5) { order: 5; } .ProductList-filter-list-item:nth-child(6) { order: 7; } .ProductList-filter-list-item:nth-child(7) { order: 3; } } /* mobile */ @media only screen and (max-width: 640px) { .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -moz-flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child(2) { order: 4; } .ProductList-filter-list-item:nth-child(2) { order: 4; } .ProductList-filter-list-item:nth-child(3) { order: 6; } .ProductList-filter-list-item:nth-child(4) { order: 2; } .ProductList-filter-list-item:nth-child(5) { order: 5; } .ProductList-filter-list-item:nth-child(6) { order: 7; } .ProductList-filter-list-item:nth-child(7) { order: 3; } } </style> @EKSJ communicated with me that the category order should be... The CSS assumes all categories are defined in the Store even if there are no products with those categories attached. You can use a table like the following to help you figure out what number to put where in the CSS. Category Default Order Reorder All 1 1 All Rings 2 4 Earrings 3 6 Engagement 4 2 Necklaces 5 5 Sale 6 7 Wedding Bands 7 3 Each time you add or delete categories the CSS will need to be updated. There are other posts in this forum covering this technique if one wants to do further research. Let us know how it goes.
  34. 2 points
    jQuery is a JavaScript library that simplifies programming. It makes it easy for non-developers to add code to websites like Squarespace, so you'll find lots of code examples on this forum that have been written in jQuery by people who are learning to code. These snippets of code need to load jQuery before they will work. For example, you'll find a line of code on your website in Settings > Advanced > Code Injection that looks like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> This loads a very old and insecure version of jQuery known as version 2.2.0. In fact, on your site it appears more than once, but it shouldn't. To update jQuery to the latest version, remove the outdated code (all of them), and add the latest version instead. You only need to add this once. <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> The example above is for version 3.5.1, which is the latest version of jQuery today (May 2020), but you should update this when a new vulnerability is discovered. If you are reading this post months or years later, you'll find details of the latest version here. One word of caution. After you've updated jQuery, check that your code still works correctly. This is because the newest versions of jQuery may not contain all the functions from old jQuery libraries. If this is the case, you may need to re-write the code snippet that relies on jQuery. If this helps you, please click "Like" below ⬇️
  35. 2 points
    tuanphan

    Center page title on mobile (7.1)

    Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .products.collection-content-wrapper .nested-category-title { text-align: center !important; justify-content: center; } }
  36. 2 points
    Thanks @IXStudio If you use Business Plan, you can use this guide. https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template
  37. 2 points
    Edit this code <script>$('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html('');</script> to this <script> jQuery(document).ready(function($) { $('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt'); }); </script>
  38. 2 points
    paul2009

    changing order of categories

    If you are using Squarespace 7.1, you can change the category order without code! There's a built-in panel where you can drag and drop the categories into the order that you prefer. For more information, see my post below. It includes a video sequence showing the steps. If this helps you, please click "Like" below ⬇️
  39. 2 points
    tuanphan

    Styling author profiles in 7.1

    Add to Home > design > Custom CSS .blog-item-author-profile-wrapper * { text-align: center !important; justify-content: center !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; } span.author-name { font-weight: bold !important; }
  40. 2 points
    Use this code instead before. #headerWrapper header#header { height: 100vh !important; padding: 15px !important; /* change to anything you want */ } Please use the like button if it helps you! Best, Leopold
  41. 2 points
    Add to Page Settings > Advanced > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { try { var container = Y.one("#page-section-5f319a27fa5d637772c3c12a"); var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":2000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script>
  42. 2 points
    Hey all. if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell. The easiest way to do this is add HTML text to the caption itself. This allows you to have much more control over the text and font without the need to apply 100 lines of CSS. Images attached are of my new website. You can see the text overlay and on the second image, you can see the hover effect. This was all done using simple CSS. If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0. Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time. If you need CSS help, id be happy to send across. Goodluck and hope this helps.
  43. 2 points
    At this point, regardless of the covid situation, an easy in-store pickup option should be standard. But, like the Squarespace commerce platform in general, it's a sh%#show to get it to work. Customers are SO confused by the process. And my clients are also confused by why they can't do seemingly simple things on their website.
  44. 2 points
    I would also love to be able to do this and haven't found anything just yet. I'm not sure why it's not built in, as a customer all you can do is go back to main page of shop? Should be: Shop>Category>Item
  45. 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.
  46. 2 points
    PDChappelle

    Social Sharing on 7.1

    What's even more confounding, is that the controls are there. They simply don't work as yet. Social sharing is such an integral part of marketing for most of us, and it would seem to me that implementing this function should have been at the top of the list of things-to-do for the Squarespace team.
  47. 2 points
    PDChappelle

    Social Sharing on 7.1

    I really wish Squarespace would hurry up and roll out this feature. The ShareThis buttons are ugly and criminally outdated. They looked cool in 2009, not so much now.
  48. 2 points
    tuanphan

    Image Block Alignment

    add to home > Design > Custom css @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1574532362580_9047 { margin-left: 0 !important; } }
  49. 2 points
    Add the following to your custom css area after any code that may already be there // Change color of close, next and prev icons .sqs-lightbox-close, .sqs-lightbox-next, .sqs-lightbox-previous { &:before { color: #000 !important; // Substitute whichever color you want - I have set it to black #000 } } // Force arrows to always be visible .sqs-lightbox-next, .sqs-lightbox-previous { opacity: 1 !important; }
  50. 2 points
    You can’t. It makes the feature useless for anything other than brand new sites.
This leaderboard is set to New York/GMT-04:00
×
×
  • Create New...