Jump to content

colin.irwin

Circle Member
  • Posts

    3,605
  • Joined

  • Last visited

  • Days Won

    92

Posts posted by colin.irwin

  1. The following css will shift the addons below add to cart. 

    .pdp-product-add-ons {
      order: 4 !important;
    }

    Choosing an add on doesn't update the displayed price because:

    • The displayed price is a unit price for the item with selected variants. Changing a variant updates the unit price. 
    • Add ons are standalone products, rather than being bundled with the main product.  
  2. As mentioned in the first response above, it can take some time for Google to find a new website and then more time for it include results from that site in its index. 

    The .com and .org.uk sites are treated as completely separate entities by Google, so there's a danger that your old site will continue to rank higher than the new one because it has been around longer. 

    To resolve the situation I would do the following:

    First, install Google Analytics (GA) on your new site. You'll need this later and it's best to do it before you move on to the next step.

    Second, add the old .com domain name to your .org.uk Squarespace site while ensuring the .org.uk remains as the default domain. This is achieved by changing the DNS settings for your old .com domain as per instructions in Squarespace admin system

    This means that your old site is no longer accessible and people trying to access .com will be redirected to .org.uk

    This is only  part of the solution because the page names will be different between the two sites and visitors could be directed from search results to a 404 - Page not available  error. 

    Third, look at the landing pages to your new site in the Google Analytics site you set up. 404 errors will show up as page names from the old site. If any of them are getting significant traffice you can set up URL mappings . These URL mappings should point from the page url of the old site to the most relevant page url on the new site

    For example:

    /aboutus.html -> /about-us 301
    /oldurl -> /newurl 301

    When I've done this for some large site migrations we often set up a lot of URL mappings in advance and then check Google Analytics for any that slipped through the cracks. 

    Depending on the level of inbound traffic to the old site from search, links on other sites & blogs, social posts, etc you should be able to set up all the URL mappings you need by initially checking Google Analytics hourly (for busy sites) or daily for most sites. After a few days I would then switch to checking once a week for a couple of weeks. That should trap all the 404s that are getting any significant traffic. 

     

  3. I've had a client's insurers flag up the lack of a CSP. 

    The single domain fix used by @Cinthetic and @mdemartin breaks the editor because the CSP needs to include all domains that provide scripts, media, etc.  Effectively, the CSP meta tag is blocking loading of the editing interface. 

     

    I've experimented with a multidomain CSP meta tag

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.squarespace.com *.squarespace-cdn.com *.squarewebsites.com www.google-analytics.com ajax.googleapis.com www.gstatic.com www.googletagmanager.com static1.squarespace.com">

    However, it still breaks sites because inline styles and scripts are blocked by the Content Security Policy and I can't see a way of signalling them as being trusted. 

     

  4. 13 hours ago, houghtoncreative said:

    Same issue here. Just stopped working last week. Just shows a black background on chrome. Site using 7.0

    https://www.tobyrandall.co.nz

    I've been experiencing video banner problems for months on a number of sites. 

    The site in your link shows the same console error as I see.  The performance script throws a 500 error. I suspect the performance script includes code for building video backgrounds and retrieving content from Vimeo / YouTube. 

    The only solution I've found (and I'm not certain it's a robust solution) is to upload the videos to the Squarespace site via the video loader. They seem to work that way but video uploading is only part of 7.1 sites. 

    image.thumb.png.b6ff1d3742240dd74bdb601a1dc980e7.png

  5. The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages. 

    This is just for the news section, which is a blog. 

    First the JavaScript (this requires jQuery to be installed).  Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){

    window.Squarespace.onInitialize(Y, function(){  
    	processBreadcrumbs();
    });
    
    function processBreadcrumbs() {
      var thisPath = window.location.pathname;
      var thisPage;
      var breadcrumbLink;
      if (thisPath.includes('/news')) {
        $('.BlogItem-title').addClass('pad-site');
        thisPage = $('.BlogItem-title').text();
          $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>');
      }
    }

     

    Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site. 

    The second class,  .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated.  It looks like this:

    image.thumb.png.8fd851ba527a50ffc0300cf555ae72f4.png

    The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links. 

    The Custom CSS

    .pad-site {
      padding-top: 34px;
      font-size: 28px;
    }
    
    .truncate {
      display: inline-block;
      width: 320px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: bottom;
    }
    
    [id^="breadcrumb"] {
      font-size: 16px;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      letter-spacing: .1em;
      a {
        color: @black;
        border-bottom: 1px dotted @black;
        &:hover {
          opacity:0.8;
        }
      }
    }

     

    Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly. 

  6. Here's what you need to do. 

    First, wrap your code as follows

    <script>
    window.Squarespace.onInitialize(Y, function(){
    
    // Your code here
    
    });
    </script>

     

    This will execute the code on each page load. 

    Next, you may need to modify the code so that it only runs for the specific page. You do this by testing the body tag for the presence of the specific collection id. 

×
×
  • 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.