Jump to content

MidnightClub

Circle Member
  • Posts

    145
  • Joined

  • Last visited

Reputation Activity

  1. Like
    MidnightClub got a reaction from Beyondspace in Looking for CSS code to have a Dynamic Header target one specific page   
    Hey @tuanphan
    here is the link : https://how-we-made-it.squarespace.com/
    password: mcforever
    For now, i want on this page the header to fade when reaching the top of the page, and have the background and logo disappear, while changing links and buttons colors (to white). What i have now is a bit brutal.
    And it's only on this page. Rest of the site, I'll have alway the logo in place, and a white background.
    Cheers,
    Fab
  2. Like
    MidnightClub got a reaction from florencepicol in How do I choose a blank template?   
    Why would they do that? it's a really convenient feature to start from a blank template..
    Squarespace, bring it back please! Help us design faster.
  3. Like
    MidnightClub reacted to TeachingStudios in Trying to add Vimeo On Demand Streaming (paid streaming)   
    Any new updates regarding this? 

    The Members Area is a good start but, what if we want to do Video On Demand for a set amount of time from date of purchase?

    In our case, we have video tutorials that paid customers can access but, they only have that access for a limited time. 30 days, 3 months, 1 year, etc., depending on the content. 

    Is there a way to set up expiration dates for each individual registered purchase?
     
  4. Love
    MidnightClub got a reaction from Badlandswolves in Use masonry style layout for Portfolio page   
    Problem here is that the portfolio page doesn't allow to display images in their original format, you have to force the format. So Masonry wouldn't work. I don't actually understand why Squarespace doesn't allow that option, it would make totally sense.
  5. Thanks
    MidnightClub reacted to tuanphan in [Share] Accordion Block: Useful code   
    Squarespace released an Accordion Block a few weeks ago.
    Here are some useful code when you use the accordion block (Add to Design > Custom CSS)
    #1. Change Dividers Color
    /* accordion divider color */ .accordion-divider { color: #ff00ff !important; } #2. Change Arrows Color
    /* accordion arrows color */ .accordion-block .arrow { border-color: #ffff00 !important; } #3. Add icons before Accordion Titles
    /* Accordion icons before titles */ li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } li.accordion-item:nth-child(1) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg); } #4. Different Color for Accordion Titles
    /* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: red; } li.accordion-item:nth-child(2) .accordion-item__title { color: blue; } li.accordion-item:nth-child(3) .accordion-item__title { color: violet; } #5. Change a specific word color in Accordion Content
    First make it bold then use this CSS
    /* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: red; } #6. Accordion Title Background Color
    /* accordion title background */ .sqs-block-accordion .accordion-item__title-wrapper { background-color: #32a4e6; } #7. Accordion Content Background
    /* accordion content background */ .sqs-block-accordion .accordion-item__dropdown--open { background-color: #262853; color: white; } #8. Add Unordered List in Accordion Content
    First, add some text then Underline them

    Next, use this CSS
    /* Accordion Content - Add Unordered list */ span[style*="text-decoration"]:before { content: ""; display: inline-block; width: 3px; height: 3px; background-color: black; vertical-align: middle; margin-right: 3px; } span[style*="text-decoration"] { text-decoration: none !important; } #9. Accordion Titles – Add Line Break
    If you use a Business Plan or higher, you can use another approach in this comment
    /* Accordion SubTitle */ li:nth-child(1) span.accordion-item__title:after { content: "Accordion Subtitle 01"; display: block; font-size: 15px; } li:nth-child(2) span.accordion-item__title:after { content: "Accordion Subtitle 02"; display: block; font-size: 15px; } li:nth-child(3) span.accordion-item__title:after { content: "Accordion Subtitle 03"; display: block; font-size: 15px; } Result

    #10. Accordion Title-Content Text Size on Mobile only
    /* accordion title - content text size on mobile */ @media screen and (max-width:767px) { /* accordion title */ span.accordion-item__title { font-size: 12px !important; } /* accordion content */ .accordion-item__description * { font-size: 10px !important; } } #11. Simple Style 01
    Add a Code Block under Accordion >> Use this code
    <style> /* accordion title color */ .accordion-item__title-wrapper { background-color: #1a252f; color: white; padding-left: 20px !important; padding-right: 20px !important; } .accordion-item__click-target { padding-top: 15px !important; padding-bottom: 15px !important; } /* make first item round corner */ li.accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius: 10px; border-top-right-radius: 10px; } /* make last item round corner */ li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* remove divider between accordion items */ .accordion-divider { display: none; } /* accordion content padding */ .accordion-item__description { max-width: unset !important; padding: 20px !important; } /* arrows color */ .plus>div { color: white !important; } </style>
    Coming soon.
    #12. Accordion Content Link Style
    /* Links underline */ div.accordion-item__description p a { border-bottom: 1px solid black; } /* Links font style */ div.accordion-item__description p a { color: red !important; font-size: 30px; font-family: monospace; letter-spacing: 2px; } #13. Add a button inside Accordion Content
    First, you need to add a text link. Next, add this CSS to turn link to button
    /* turn accordion link to button */ div.accordion-item__description p a { background-color: black; color: white !important; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; border-color: red; border-width: 1px; border-style: solid; } #14. Add an Image inside Accordion Content
    Use this CSS to add image to top or bottom of accordion content
    /* Add an image into Accordion Content */ /* replace demo image with your image url */ /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg); background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } #14.2. Add Image to Accordion Content (Use JS code)
    Suppose you want to add this image 
    https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01

    Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result

    If adding 3 images, doing this



    and use this code
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content
    You can also use this approach
    Enter Image Url 

    highlight the text url > Add same image url (enable Open in New Window)

    then use this code to Code Injection or Page Header Code Injection
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style>  
    #15. Change Plus/Minus (+/-) to custom icon
    Replace demo image urls with your icon urls
    /* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } /* Minus */ [data-is-open="true"] .plus { background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important; background-size: contain; background-repeat: no-repeat; } [data-is-open="true"] .plus div { display: none; } #16. Change style of a word on Accordion Title
    See this comment

    Wrote by @tuanphan
  6. Like
    MidnightClub got a reaction from kjsgeorge in Changing the section theme (colors) of the shopping cart page   
    Here's a solution from @SergioC using the squarespace app.
  7. Like
    MidnightClub got a reaction from paul2009 in Remove site title link from homepage   
    Wow, didn't know about this .homepage class! thanks Paul!
  8. Thanks
    MidnightClub reacted to paul2009 in Remove site title link from homepage   
    As you want this to apply to the homepage you don't need to worry about identifying and using a Collection ID as you can use the homepage class like you did in your first example. 🙂
    .homepage .site-title-link { pointer-events: none; }  
  9. Thanks
    MidnightClub got a reaction from BluFangs in Change Gallery Arrow Background - Jasper Template   
    Sure
    .sqs-gallery-controls .previous:hover { background-color: transparent; } .sqs-gallery-controls .next:hover { background-color: transparent; }  
  10. Thanks
    MidnightClub got a reaction from SmDDB in Remove site title link from homepage   
    Hi @SmDDB,
    Try this:
    #collection-5d01791ff7754c00012b4be8{
    .site-title-link{pointer-events: none;}
    }
    Basically only on the homepage, you deactivate the possibility to have an action on click on the logo.
    Cheers,
    Fab
  11. Like
    MidnightClub got a reaction from SquareRefresh in Change Gallery Arrow Background - Jasper Template   
    HI @BluFangs,
    You can add some css to make the background transparent;
    .sqs-gallery-controls .previous { background-color: transparent; } .sqs-gallery-controls .next { background-color: transparent; } Cheers,
    Fab
  12. Thanks
    MidnightClub got a reaction from BluFangs in Change Gallery Arrow Background - Jasper Template   
    HI @BluFangs,
    You can add some css to make the background transparent;
    .sqs-gallery-controls .previous { background-color: transparent; } .sqs-gallery-controls .next { background-color: transparent; } Cheers,
    Fab
  13. Like
    MidnightClub reacted to tuanphan in Limit the number of related products   
    Add to Home > Design > custom CSS
    /* related product 3 items */ .ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+4) { display: none; }  
  14. Love
    MidnightClub reacted to paul2009 in Pick Up Email Notifications   
    The new local pickup option is certainly a major step forward, but I agree it isn't perfect yet. However, I think they made the right decision to release something workable now, rather than wait another twelve months until it’s perfect - which is what Squarespace used to do.
    Order notifications are more flexible than they used to be so, with some adjustments to the wording, it is possible to use the Order Confirmed and Order Fulfilled emails for pickups. That said, Squarespace built it with the intention that the order confirmed email would be used for pickup. Only the order confirmed email contains the pickup information.
    They did this so that the order fulfilled email would be sent when the customer collected their order. this helps the merchant to know whether orders have been fulfilled - collected or sent - and is an important step in the workflow. You wouldn’t want a customer showing up twice claiming they hadn’t collected the order the first time. 
    However, merchants would prefer to send a notification when the order is ready for pickup, and are therefore using the ‘fulfilled’ email to do this. They don’t want customers to consider picking up an order until they’ve signalled that it is ready. As you said, your products are made to order, so you don’t want customers showing up as soon as they’ve placed an order. Unfortunately the fulfilled email does not contain the pickup information - for the reasons explained above.
    For this reason, I’d like to see a new step in the order fulfillment process for pickups: Confirmed > READY > Fulfilled. This would help with the notifications - we could have an Order Ready notification, but it would also help with the ORDERS panel, because at the moment orders show as Pending or Fulfilled. Ideally, I'd like to see 'Ready for Pickup' as a status that can be filtered by merchants so they can manage their orders entirely on Squarespace without having to send emails manually (using their email system) or keep track of collections in a spreadsheet.

  15. Thanks
    MidnightClub reacted to tuanphan in [Share] Squarespace 7.1 CSS ID List   
    Some CSS Class/ID for Squarespace 7.1
    Announcement Bar
    Announcement bar: .sqs-announcement-bar-dropzone Announcement bar text: .sqs-announcement-bar-dropzone p Announcement bar link: .sqs-announcement-bar-dropzone a Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header
    Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header Site Title: a#site-title Site Title (when overlay menu open): .header--menu-open a#site-title Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a 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 Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button   Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List
    Blog List: [class*="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: [class*="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 Blog Grid
    updating
    Blog Masonry
    updating
    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 List Simple
    List Simple: .user-items-list-simple Image: .user-items-list-simple img First Item: .user-items-list-simple li:nth-child(1) Second Item: .user-items-list-simple li:nth-child(2) List Content: .user-items-list-simple .list-item-content Title: .user-items-list-simple h2.list-item-content__title Description:  .user-items-list-simple list-item-content__description OR .user-items-list-simple p List Slideshow
    List Slideshow: .user-items-list-banner-slideshow Image: .user-items-list-banner-slideshow img First Item: .user-items-list-banner-slideshow li:nth-child(1) Second Item: .user-items-list-banner-slideshow li:nth-child(2) List Content: .user-items-list-banner-slideshow .slide-content Title: .user-items-list-banner-slideshow h2.list-item-content__title Description:  .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg Button: .user-items-list-banner-slideshow .list-item-content__button List Carousel
    List Carousel: .user-items-list-carousel__slides Image: .user-items-list-carousel__slides img First Item: .user-items-list-carousel__slides li:nth-child(1) Second Item: .user-items-list-carousel__slides li:nth-child(2) List Content: .user-items-list-carousel__slides .list-item-content Title: .user-items-list-carousel__slides h2.list-item-content__title Description:  .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p Arrow Circles: .user-items-list-carousel__arrow-button Arrow Icons: .user-items-list-carousel__arrow-button svg Button: .user-items-list-carousel__slides .list-item-content__button Fluid Engine
    Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine
     
    Checked & Wrote by tuanphan
  16. Like
    MidnightClub got a reaction from rrising in Changing the section theme (colors) of the shopping cart page   
    Here's a solution from @SergioC using the squarespace app.
  17. Thanks
    MidnightClub got a reaction from gabrielle.lods in Making my Squarespace Site Multilingual and Multi-currency   
    Great guide! very useful info.. thanks for sharing @gabrielle.lods!
  18. Like
    MidnightClub got a reaction from RyanFontana in Changing the section theme (colors) of the shopping cart page   
    Here's a solution from @SergioC using the squarespace app.
  19. Like
    MidnightClub reacted to SarahAnnSargent in Redirect "Add To Cart" Button to Scheduling App   
    Just FYI guys,
    After the above code ended up working out from @creedon (thank you!) - I realized that I needed different booking links for each service. So here's the breakdown of what I ended up doing after lots of research:
    GOAL: Redirect Add to Cart link to Acuity Scheduling session link
    OUTCOME:
    First, I tagged each product that I wanted to change with "hideorder" I hid the Quantity and Add To Cart button with CSS Then I made any links in the product description into a button, making it easy for me to redirect to any link of my pleasing!  EXAMPLE: https://leleandbeane27.squarespace.com/services/p/tennessee-wedding-package (password is password)
     
    //Add "hideorder" tag to any product or service to remove dropdown, quantity, and order button //

    //Remove Select Size Dropdown//
    article .tag-hideorder .variant-option {
        display: none;
    }
    //Remove Quantity Dropdown//
    article .tag-hideorder .product-quantity-input {
        display: none;
    }
    //Remove Order Button//
    article .tag-hideorder .sqs-add-to-cart-button-wrapper {
        display: none;
    }
    //Make Link A Button Within My Branding//
    .ProductItem-details .ProductItem-details-excerpt a {
      text-decoration: none!important;
      border: solid 1px #3B3C36 !important;
      color: #3B3C36 !important;
      transition: all .4s cubic-bezier(0.75, 0, 0, 1) !important;
      margin-block-start: 1.5rem;
      padding: 1.5%;
      background-size: 202% 100%;
      background-color: transparent !important;
      background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, #3B3C36 50%) !important;
      text-transform: uppercase;
      letter-spacing: .1em;
      width: 35%;
      text-align: center;
      font-size: .7rem !important;
    }
    .ProductItem-details .ProductItem-details-excerpt a:hover {
      color: #fff !important;
      background-position: -99% 0% !important;
    }
     
  20. Like
    MidnightClub reacted to gabrielle.lods in Making my Squarespace Site Multilingual and Multi-currency   
    Site URL: https://www.greencondom.club/
    Hey peeps, 

    This is not a question per se, more like sharing a solution I found.
    I needed to make my website multilingual and multi-currency a while back. I really struggled to find solutions meeting my requirements, so I came up with a solution: Use Weglot for the translation (no page duplicate, can translate the checkout) Duplicate the shop section of my Squarespace site for the 2nd currency (and pay Commerce again) Set up Geotargetly to redirect people according to their location  Use Datafeedwatch to list our products on Google Shopping and Facebook Catalog I wrote a detailed guide on how I've done it. Hopefully, it helps someone.
    Cheers 
  21. Like
    MidnightClub got a reaction from johnay in how to slow down animations even more.   
    Yeah! 
    Glad I could help @johnay!
    Take care
    Fab
     
  22. Like
    MidnightClub got a reaction from johnay in how to slow down animations even more.   
    alright!
    so on your homepage, i saw the blocks with horizontal clip anim. Speed is at 800ms, which I guess is default.
    So if you add that to your css it should do the trick:
    .image-block-outer-wrapper.combination-animation-horizontal-clip .image-block-wrapper{ transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1); } .image-block-outer-wrapper.combination-animation-vertical-clip .image-block-wrapper{ transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1); } I set it to 3600ms so that the difference is obvious, for both horizontal and vertical clip animation. So you just have to change that value to change the speed.
    Let me know if it work.
    Cheers,
    Fab
  23. Like
    MidnightClub reacted to orangechandesign in Anchor links do not work correctly on mobile   
    @C-A Add the following code to "code injection" --> "footer".
    <script>
      
    $('.header-menu-nav-item > a').click(function() {
      $('.header-burger-btn').click();
    });
    </script>
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.