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!

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

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.

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%; }

@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; } }

@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!

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

@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!

@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; } }

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!!

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!

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? 🥺🙃