Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Reputation Activity

  1. Love
    nazaninp got a reaction from webbroi in Opensea NFT integration   
    Did you figure this out?  I also have a client interested in doing this and would love to know the best way to go about it.
  2. Like
    nazaninp reacted to amritanan in Opensea NFT integration   
    Hi...I haven't been able to figure it out. I've opened a ticket with the Level 2 team at opensea, waiting for them to get back to me. If you find a solution, please let me know as well! ūüôā
  3. Thanks
    nazaninp reacted to tuanphan in Blank space on the right side of my website shows up on larger desktops?   
    Try adding to Design > Custom CSS
    html, body {overflow-x: hidden;}  
  4. Thanks
    nazaninp reacted to tuanphan in Typewriter & delete effect? TypeIt or something similar   
    Just solved for 3 members. Add all to Code Block
    <div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script> Notes: Haven't tested with SS 7.0
  5. Like
    nazaninp reacted to jessone in Add a product add-on (at extra cost) at checkout   
    I came up with a solution!!! Not as good as a pop up, but will work for now. 
    This works on the product page,  you do have to add it to every page, but you could use filters and customize per product if you want. Not perfect, but it works pretty well. 
    I created all the add ons as products. They are all in a collection. 
    In the "additional information" section, I used a summary block and chose the collection. I used a grid option and reduced the size and spacing. I added quick view which made it simple for them to use as an add on! (can show price, I didn't).
  6. Thanks
    nazaninp reacted to Rebecca_Grace_Designs in Auto Scroll Carousel Block Squarespace 7.1   
    For anyone still looking, I found a workaround for autoplaying a Summary Carousel Block. It autoclicks the next button every three seconds. 

    Inject this is Settings > Advanced > Code Injection > Footer
    window.onload = function() {
      var nextArrow = document.querySelector(".summary-carousel-pager-next");
      function clickNext() {
      setInterval(clickNext, 3000);

    I updated this code to remove the use of JQuery (for page speed reasons) as well as to help with the refresh timeframe.
  7. Love
    nazaninp 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
    Blog Masonry
    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
  8. Like
    nazaninp reacted to cmoreira in Is it possible to add an interactive map?   
    Hi! I know this question is old, but it might help other users looking for the same.
    I developed a map generator that creates simple maps, with country outlines, where you can add markers that can have tooltips and perform actions when clicked. You can have a map of the world, a specific continent or even a specific country divided by regions.
    I wrote a quick tutorial on how it works and how to embed it on squarespace: http://cmoreira.net/blog/how-to-add-a-world-map-to-your-squarespace-website/
    It's a premium script, but it comes with support and the embed code is compatible with Squarespace, from the tests I performed.
    Hope it helps.
  • 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.