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/22/2020 in Posts

  1. 4 points
    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
    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
    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.
  5. 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.
  6. 2 points
    CarrieT

    Search Bar Not Working

    Site URL: https://www.spiritofhealthkc.com/ For several months now our search bar has not been working properly. We have a title called, "Best Practices For Avoiding & Combating Viruses" but if you search the full title these ways, it says it can't find anything: "best practices for avoiding & combating viruses" "best practices for avoiding and combating viruses" "viruses" "Best Practices For Avoiding and Combating Viruses" However, if you write it exactly how the blog is written with the same punctuation (caps and & symbols), it will show up "Best Practices For Avoiding & Combating Viruses" or "Viruses" This happens with all of our blogs. I've reached out to Squarespace numerous times over the last few months about the issue. They've re-indexed the site several times and below is their most recent response. Is anyone else dealing with this? Any ideas on what is going on? "After taking some additional time to investigate, I can confirm the issue you're seeing with the built-in search bar is due to an issue on our end. In this case, the issue is preventing partial phrases or keywords from returning results. In order to view a specific post in search results, the exact title needs to be entered. I can also see you previously reported this issue in February, 2020 on a separate email request and can confirm we have noted your sites instance of this issue for our Design and Engineering teams to review. They’ll use this feedback when implementing fixes and improvements in future releases." "This bug's impact will vary depending on a number of factors like the type of site, the volume of content, how visitors navigate the site, and the ways the content is promoted or organized. For example, a lot of sites may never experience this behavior because of their site's structure/content or how often their visitors dig up older posts. For your site in particular, it looks like all of your posts are on a single Blog Page with posts dating back to 2014. If your visitors are frequently searching for older posts, you may want to consider creating multiple Blog Pages so you have an additional layer of organization - Blog Page, Category, Tag. Also, since the Blog Page and Summary Blocks display posts in chronological order, you may want to create a tag/category specifically for these popular posts. You may also want to consider hiding the Search Block from your Navigation due to its inconsistent results. You can do this from Design > Site Styles > Header:Layout > Search Position > Hide. This will encourage visitors to explore the other links and pages you've set up for finding this content."
  7. 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.
  8. 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!
  9. 2 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.
  10. 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
  11. 2 points
    Add to Home > Design > Custom CSS /* Variant dropdown size */ .ProductItem-details .variant-option select option { font-size: 20px; }
  12. 2 points
    Add to Home > Design > Custom CSS span.date { display: none; }
  13. 2 points
    tuanphan

    Carousel Scrolling Announcement Bar

    You can try this code. I tested on my demo site.
  14. 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
  15. 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
  16. 2 points
    Site URL: https://www.theraplant.com/ When I was first developing my site the standard prev/next prompts were displayed on each product page. I continued to customize the site & at some point realized they had disappeared. I'm having a difficult time finding out how to retrieve them. The product items style option for "Product Navigation" is set to "Both", so it should show both the breadcrumbs and the navigation, but alas, no prev/next anywhere on the site. Any help would be greatly appreciated! I have some minimal CSS code on the site but it does not appear that it is causing this particular issue.
  17. 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
  18. 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.
  19. 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; }
  20. 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
  21. 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
  22. 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!
  23. 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.
  24. 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
  25. 2 points
    Add to Home > design > Custom CSS body#collection-5ef1d384a1668a76c2629b73 header#header { background: green; }
  26. 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
  27. 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.
  28. 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; } }
  29. 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
  30. 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>
  31. 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 ⬇️
  32. 2 points
    Hi Use this code in Design -> Custom CSS @media screen and (max-width:767px){ .header-menu-nav-folder { transform: none; min-height: 130px !important; height: 100vw; } .header-menu-controls.container.header-menu-nav-item:first-child { display: none; } .header-menu-nav-folder-content { height: 100vw; margin-top: -100px; } .header-menu-nav-item-content { margin-top: 100vw; } .header--menu-open .header-menu .header-menu-cta { position: absolute; bottom: 10px; width: 100%; } nav.header-menu-nav-list { height: 100vw; } .header-menu-nav-folder[data-folder="root"] { height: 100vh; } .header-menu-nav-item:last-child {margin-top: 10px;line-height: 60px !important;} .header-menu .header-menu-nav a[data-folder-id="/free-resources"] { display: none; } .header--menu-open .header-menu .header-menu-nav-list { height: 100vw; } .container.header-menu-nav-item.header-menu-nav-item--collection:last-child { margin-top: 300px; } .header--menu-open.tweak-transparent-header .header-menu .header-menu-nav a { line-height: 60px; } } Please use the like button if it helps you! Best, Leopold
  33. 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; }
  34. 2 points
    bangank36

    Hide mobile navigation

    Hi there, you can use media query like so To add CSS, go to Design -> Custom CSS @media screen and (max-width: 767px) { header#header { display: none !important; } }
  35. 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
  36. 2 points
    IXStudio

    "Reveal" Page Transitions

    Hi Use this code in Design -> Custom CSS .Loader { position: fixed; top: 0; left: -100%; width: 100%; height: 1440px; z-index: 9999; background-color: transparent; -webkit-transition: background-color .3s ease-out,transform 0s .3s linear; -moz-transition: background-color .3s ease-out,transform 0s .3s linear; -ms-transition: background-color .3s ease-out,transform 0s .3s linear; -o-transition: background-color .3s ease-out,transform 0s .3s linear; transition: background-color .3s ease-out,transform 0s .3s linear; display: none }[data-mercury-loading] .Loader { background-color: rgba(255,255,255,.22); -webkit-transition: transform .3s cubic-bezier(0,0,0,.618); -moz-transition: transform .3s cubic-bezier(0,0,0,.618); -ms-transition: transform .3s cubic-bezier(0,0,0,.618); -o-transition: transform .3s cubic-bezier(0,0,0,.618); transition: transform .3s cubic-bezier(0,0,0,.618); -webkit-transform: translatex(60%); -moz-transform: translatex(60%); -ms-transform: translatex(60%); -o-transform: translatex(60%); transform: translatex(60%) }[data-mercury-loading='done'] .Loader { -webkit-transform: translatex(100%); -moz-transform: translatex(100%); -ms-transform: translatex(100%); -o-transform: translatex(100%); transform: translatex(100%) } .tweak-site-ajax-loading-enable.tweak-site-ajax-loading-bar-show .Loader { display: block } Please use the like button if it helps you! Best, Leopold
  37. 2 points
    Hi, There is almost nothing that you say it can't be done! Use this code in Design -> Custom CSS @media screen and (max-width: 640px){ .Header--top,[data-nc-base="header"] [data-nc-group="top"] { display: block; padding: 0; } .enable-load-effects .Site.loaded .Header [data-nc-container="top-left"],[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="primary-nav"],[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="secondary-nav"]{ display: none; } [data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="social"] { position: absolute; top: 24px; right: 70px; } } Please use the like button if it helps you! Best, Leopold
  38. 2 points
    I've experienced the same issue and extensively combed the html (view page source & expect element). The last time I worked on it was August 18th to get this function centered on the page in mobile - no problem there. Then I checked in on the page this week, August 24th and it's no longer there. Please fix this. The last known location was here with the breadcrumbs <nav class="ProductItem-nav"> Thanks to @Pointer for trying out a new trial site with no change. I was going to try that next - you saved me a step to debunking this error. Like @Melian I also have the Product Navigation set to both
  39. 2 points
    IXStudio

    Change Color of Cart Checkout Page

    Hi Please use this code in Design -> Custom CSS. body#cart.tweak-cart-icon-style-cart div#mainContent { background-color: white !important; /* White Color for BG */ color: black !important; /* Black Color for Main Text */ } body#cart.tweak-cart-icon-style-cart div#mainContent h2.cart-title { color: black; /* Black Color for H2 Title */ } body#cart.tweak-cart-icon-style-cart .main-navigation a { color: black !important; /* Black Color for Menu */ } body#cart.tweak-cart-icon-style-cart .site-branding h1 img { filter: brightness(0%); /* Dark Logo */ } Please use the like button if it works! Best, Leopold
  40. 2 points
    Also experiencing this issue. The ProductItem-nav-pagination div is not added to the HTML even though "Product Navigation" is set to "Both". Please fix this.
  41. 2 points
    EFL13

    Cannot edit pages

    I normally edit on a Surface using wireless keyboard and mouse connected via USB port. Initially found I could not edit text blocks in Chrome so switched to Explorer. Assumed it was a browser issue as had no problem editing in Explorer. My Surface just upgraded Explorer to Edge and had the same problem - couldn't edit any text blocks (shows a blue line around the block but no text editing toolbar). Tried all the recommended solutions e.g. clearing browser, checking cookies, javascript etc. No joy and extremely frustrating. Having read Reiko's post I just tried going back to a wired mouse and the Surface's original keyboard. This seems to have fixed the editing problem (fingers crossed) so appears to be a mouse-Surface connection issue.
  42. 2 points
    tuanphan

    Sidebar navigation in 7.1

    checking all the unanswered questions and seeing this. I recently purchased a course on this Do you still need help on this?
  43. 2 points
    I am so annoyed about this update and regret that moment I clicked upgrade. I've asked (via Twitter) if this can be reverted, and they said no. I complained more and put in Anthony Casalena (CEO). And nothing. I'm still waiting for a response from Customer Service. I put a long critique of their practices on Instagram and included everyone I could find of their directors. I'm going to cancel my subscription unless this reverts back. All the reviews about squarespace and their great looking templates are meaningless unless their service is backed up by thoughtful, robust functionality. Perhaps the new Adobe guy they have appointed will fix this. Because frankly, having a business that is based solely on user experience is just not good enough.
  44. 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>
  45. 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.
  46. 2 points
    Hi Holocene_X, I am looking to duplicate just a section within a page, not the whole page. This solution worked great with anything before 7.1 because made use of Indexes, and each "page" was a section, but I am looking to duplicate that experience with 7.1 and am not finding a way, and replicate just certain sections more quickly across several pages. (Unless I'm totally missing something, and Indexes are able to be replicated in some manner in 7.1)
  47. 2 points
    SarahElizabeth

    Quantity Discount threshold

    I have raised this as a feature request with customer support, the more people who do so will encourage them to add it to their priority list. I am in dire need of this feature!
  48. 2 points
    deliriou5

    Quantity Discount threshold

    Me too. I need price variants based on quantities up to 1000 products. This should be a main feature as ecommerce generally allows bulk discounts. I cant input a different price for 1000 products manually.
  49. 2 points
    JamesLD

    Quantity Discount threshold

    I have just had a support query answered on this and there isn't any way to offer multi buy/quantity threshold discounts. I'm looking to offer a "buy 3 and get the third for $X" or X% off on our website but there is no way to do this. The benefit of having this as a discount option is the ability to manage inventory effectively so that if people buy 3 of our single products and receive a discount on the third, the single product inventory still gets updated. There was a suggestion to just offer a discount if someone spends over the amount that 3 products cost but unfortunately we have different variants (size) and it wouldn't be able to account for that. They also suggested adding a new separate product that was just the bundle - then buyers could selected the variants from a drop down but this doesn't work in practice as the variants end up being too many to manage AND they don't link up to inventory of the single product pages. This would then mean having to continually update the single product stock level after every 3 product set was bought. I have asked this to be considered as a feature requested but based on the lack of responses on here to these queries that I can see, I don't know if it's a priority. They have finally suggested looked at custom CSS code for this and I'm looking into this now and will report back if I get anything that may work. Similarly if anyone on here can think of a way to create custom CSS to implement these quantity discounts, please let me know!! I know Shopify have their app store with products that offer this functionality - it's a pretty common e-commerce offering to be honest and I was quite surprised SquareSpace didn't have a way to offer it when I went to try and add it. Oh well!
  50. 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; }
This leaderboard is set to New York/GMT-04:00
×
×
  • Create New...