GraemeArmstrong

Thanks to @tuanphan and @DPruitt I achieved the Search Icon result I wanted in Desktop and Mobile following these instructions and using the code below.  Thanks guys.
www.khuramanarmstrong.com
Font Awesome search icon within the DIV Social Icon Wrapper of the header
1. First enable your social links in your header.
2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search
3. Add your Font Awesome Script to your Header Injection.
4. Include this Javascript within the Header to make the first link open in the same window:
Code Injection > Header
<script src="https://kit.fontawesome.com/[yourID].js" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
        $('.header-actions-action--social a:first-child[target="_blank"]').prop("target", "_self");
   $('.header-menu-actions-action--social a:first-child[target="_blank"]').prop("target", "_self");
      });
</script>
CSS
/*Custom Search Bar*/
.header-actions--right .header-actions-action--social .icon:first-child
{visibility:hidden}
.header-actions--right .header-actions-action--social .icon:first-child:after {
content: '\f002'; 
font-family: FontAwesome;
  position: absolute;
margin-left:-1vw;
  margin-top: 3px;
font-size: 15px;
color:#5F5F5F;
visibility:visible}
.sqs-svg-icon--list a:first-child
{display:none}
/*Mobile*/
.header-menu-actions-action.header-menu-actions-action--social:first-child {
    visibility: hidden;
    position: relative;
    margin: 0 !important;
}
.header-menu-actions-action.header-menu-actions-action--social:first-child a:after {
    content: '\f002';
    font-family: FontAwesome;
    display: block;
    position: absolute;
    bottom: -2px;
    right: 4px;
    font-size: 22px;
    color: #5F5F5F;
    visibility: visible;
    z-index: 10000;
    padding: 5px;
}
/*END Custom Search Bar*/

I have a similar requirement.  Please get in contact.
www.khuramanarmstrong.com

Site URL: https://www.khuramanarmstrong.com
Is it possible to dynamically change the product description based on the variation selected?  I have seen this done on other commerce websites.

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

You can try Summary Block
or use this guide. https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

I have no idea. You can try posting on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community

It turns out to be a problem with my hybrid laptop when effectively in tablet mode.  SquareSpace support were very helpful trouble shooting this one.  Thanks anyway.