Dilon

Hi @tuanphan , I would like to create an image in my site, and replace it with a custom whatsapp image with text etc and make it clickable. How do I make it so when customer clicks this button, it will pop out a new tab to whatsapp, quite similar to version 1 that you suggest, just that it is for a specific image, therefore would require a link for the image.  Thank you for your guidance!

On 9/27/2021 at 6:10 AM, paul2009 said:

You can achieve this with a single 'I agree....' checkbox that is set to 'required'.

Hi Paul,

I have been using your work around for my website. It works, but I want to make it more intuitive. I do not what a check box, but merely a disclaimer saying something along the line that 'You agree to the terms and conditions when placing the order', therefore a checkbox no longer required. I could not find any way to have this feature at the check out. Any ideas?

Thanks in advance.

Regards,
D

On 5/15/2023 at 10:08 AM, VeerDigital said:

Hello thread, 

I am currently working with a client that uses Squarespace.  I have been banging my head to get this to correctly work with Google Adwords.  We can't run the ads until I know this is set up correctly.  Blows my mind that WordPress, which some would deem more complicated, makes this so much of an easier process. Nevertheless, maybe I'm just making the process harder than it should be.  

We have set up about 4 different conversions, basically trying all 4 times, to no avail. This seems to be the clearest website instructions, https://squarefeed.io/implement-google-ads-conversion-tracking-on-squarespace/

Now, when I follow the instructions to a T, we still are not detecting it when I turn Squarespace into test mode and try and trigger the Google Tag through the checkout process by completing the test transaction.  I've even let the thing go for days on Google Adwords, hoping that it would trigger soon enough.  I thought maybe the cache on Squarespace wasn't loading.  As others have said in this thread, much research has been done with this process which blows my mind, because Google Adwords is a total must for so many businesses to compete. 

Is there something that is not being included in the link above?  Like maybe a new release of Squarespace, that made those instructions void?  I'm totally at a loss, any help would be much appreciated.  Thanks!

 

Hey mate,

It is 8th July 2023 as we speak. I did what was given in the link https://squarefeed.io/implement-google-ads-conversion-tracking-on-squarespace/, it worked perfectly fine for me, I did some extra steps to test and close the loop. These are the conditions that worked for me:

- I used GTM (Google Tag Manager) and have it installed on my SS header code injection. I have conversion linker setup for my GTM (google this if you dont know). P.S. I think if you use Google Tag itself works too, GTM is not the only way.

- Under Google Adwords, I create a new conversion (website) -> add a conversion manually then I chose Purchase as the conversion along with the other details in the window.

- Under Google Tag setup for the purchase conversion above, I chose 'Install the tag yourself'. I took the page load snippet code ( I added the other details like currency, transaction id etc as per the link you provided) and paste it to my 'Order Status Page' in SS code injection.

- After that, I turn on test payment mode in SS to do a test payment to test this snippet code.

- Next, I go to Google Adwords, I click on the 'troubleshoot' red word at the purchase conversion that I created (under conversion summary). After clicking on this troubleshoot, google tag assistant will fire and now you will be prompt to key in your web URL and your website will be loaded. https://www.youtube.com/watch?v=NyiiwpdZlBg&t=160s Refer to this link to troubleshoot.

- Next, I just do a test purchase on my website that was fired up to close the loop. After I have done the test purchase, google tag assistant recognises the snippet code that is fired up and everything is setup.

- Finally, I turned off test payment mode and deleted that purchase transaction in my SS account.


P.S. if you want to do it purely via GTM way. This youtube link is super helpful. I personally think GTM is the way to go since you can view everything through google analytics instead of segregating them. https://www.youtube.com/watch?v=tFNX6Z0gQpo 

Goodluck setting it up. If you follow the steps above, it should work perfectly.

On 10/25/2022 at 12:19 AM, Beyondspace said:

Try adding to Home > Desgin > Custom Css

.product-block .product-quantity-input {
  display: none;
}

.product-block .sqs-add-to-cart-button-inner {
  font-size: 10px;
}

.product-block .productDetails .product-title {
  font-size: 16px;
}

Support me by pressing 👍 if this useful for you

Hi there, 

Thanks for the code above. I am looking to have the button to stretch to the size of the product block. Currently it is a fixed width. I tried different ways (below) and it doesnt work. Could you please shed some light on how I can have the width of the button to match the width of the product block? Thanks in advance!

.product-block .sqs-add-to-cart-button-inner {
  width: inherit;
}

.product-block .sqs-add-to-cart-button-inner {
  width: 100%;
}

1 hour ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>

  $( ( ) => {
  
    const selector = '.user-items-list-simple .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
  
  </script>

 

@tuanphan I tried to put that code in the footer code injection but unfortunately it didnt work. Still unable to click and drag the carousel.

FYI - This is what I currently have in CSS to make the button the size of the image and it is disabled for mobile.
 

/* Make carousel image clickable, disables in mobile (only works when button for carousel is enabled) */
li.list-item {
  position: relative;
}
.list-item-content__button-container {
  position: static;
}
a.list-item-content__button.sqs-block-button-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  color: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
.list-item-content__button-container {
  position: static !important;
  transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
  visibility: hidden;
}
.user-items-list-carousel__slide {
  pointer-events: initial !important;
  user-select: unset !important;
}

@media (max-width: 767px) {
  a.list-item-content__button.sqs-block-button-element {
    display: none;
  }
  .user-items-list-carousel__slide {
    pointer-events: none !important;
    user-select: none !important;
  }
}

13 minutes ago, tuanphan said:

Link to site only, no need to provide admin access

@tuanphan 

www.mancheront.com/watches/pacer/black-black
www.mancheront.com/watches/pacer/black-steel
www.mancheront.com/watches/pacer/white-steel

Thanks a lot - really appreciate your help!

18 hours ago, tuanphan said:

Can you share link to this page?

What is site url?

Above CSS disabled that. You can remove that code + share link again, we will check & give new code

@tuanphan Sure, can you please provide your email? The website is live already. I am happy to provide you with administrator access. Thanks!

On 4/14/2023 at 7:54 PM, tuanphan said:

Did you solve or still need help?

@tuanphan Unfortunately no, would be fantastic if you could kindly share the Javascript code that enables click and drag for the carousel while having the click function working too. Currently, only click function works, click and drag does not, hence not as intuitive. Thanks so much!

7 hours ago, Dilon said:

Hi @tuanphan, I have injected your code so that the images are clickable. You also mentioned that there is an additional Javascript code to make the click and drag function still available.

please would you be able to share it? Would be absolutely amazing to have it here thanks so much for everything!!

@tuanphan with the help of your code and Chat GPT, we are able to somewhat get the below code, what it does is that, it removes the clickable function for mobile. I and with the help of gpt (past 1 day trying different prompt) failed to get the click and drag function to still work. I think click and drag to move through the carousel is very intuitive and important, would be amazing if you could help!

 

// Make carousel image clickable, disables in mobile
li.list-item {
  position: relative;
}

.list-item-content__button-container {
  position: static;
}

@media (min-width: 768px) {
  a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
  }

  .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
  }
}

@media (max-width: 767px) {
  .list-item-content__button-container {
    position: static !important;
  }

  .user-items-list-carousel__slide {
    pointer-events: none !important;
    user-select: none !important;
  }
}

On 2/15/2023 at 8:22 PM, tuanphan said:

Yes. You can remove CSS code I sent, I will give new Java code

Hi @tuanphan, I have injected your code so that the images are clickable. You also mentioned that there is an additional Javascript code to make the click and drag function still available.

please would you be able to share it? Would be absolutely amazing to have it here thanks so much for everything!!

On 3/25/2023 at 9:58 PM, paul2009 said:

If you upload your videos to Squarespace, video blocks and background videos use the same <video> HTML element to embed a video media player. As it is the same code, the reliability of an autoplay video should not be any different from the same mobile device.

The difference is that, when you add a background video, it will always include the autoplay, muted and loop attributes so that the video automatically begins to play as soon as it can do so (before it finishes loading). When you add a video block, you choose whether to enable these attributes for autoplay, or wait until the user clicks 'play' manually.

That said, you can also upload your video to a video hosting service but, if you do that, the reliability of playback will also depend on your that third party service and how well it interacts with Squarespace. Using YouTube for background videos is not recommended.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks for the detailed response. This clears up for me then. I thought the video block would be a different component code wise to the background hence it would perform differently.

If that is the case,  I would just keep using the background video instead, it is able to crop the sides for mobile which is perfect too. Unfortunately, like we understand, they dont work all the time for various reasons.

Thanks for the heads up and have a nice day!

17 hours ago, paul2009 said:

Have you tried adding a video block to a different page so one of your friends can compare it?

I saw it on a friends's friends phone when he checks out the webpage, so i will have to dig to check out what phone he was using.

Regardless, from your experience, is a video block more "reliable" when it comes to displaying video? I.e. it will have better viewing compatibility as compared to background video (that doesnt show sometimes due to varies reasons)? 

Hi @paul2009 is this only for backgorund video or video block?

I am using background video now, and I realized some of my friends mobile is not playing. I am considering swapping to a video block instead if a video block guarantees playability.

Any clue? Cheers...

I have a couple of carousel with just images in my site, these are section carousels. In desktop, they have arrows that appears at the bottom and showing a couple of images, for mobile its just showing one image and arrows at the bottom of the images.

When I see how my friend navigate my site especially in mobile, I realized that they are not really aware that it is a carousel and that there are more images to swipe left or right to, until they saw the button after scrolling down by then, they are not interesting in swiping and just kept looking downwards the page which is a shame.

Nav dots are so powerful in that sense. The current carousel section does not offer that, I tried searching online for a custom code to inject but failed, even tried it out with Chat GPT4, but failed.

Would appreciate if a Pro here could shed some light. Thank you very much in advance!

@tuanphan Do you think you can help me? 🥺🙃