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

Click on Search >> redirect to search page.

Yes thanks

www.khuramanarmstrong.com

Thanks for this code. How do I get the icon to appear in the mobile menu?

Awesome. Thanks. Just need to correct the uppercase N in "position" on the second row.

Sorry it's now https://www.khuramanarmstrong.com/endarc-zen-store

The desired Sale icon format and placement can be seen in the Featured Products summary block on https://www.khuramanarmstrong.com/endarc-zen The Store format, where I want to change the Sale icon, can be seen here https://www.khuramanarmstrong.com/endarc-store

Site URL: https://khuramanarmstrong.com I would like to change the default "Sale" icon in the Store page to match how it appears in a Summary block (see screenshots attached). Any code suggestions please?

Site URL: https://www.khuramanarmstrong.com Is there a way to change the colour theme by category within the same store? In our main store the default theme is red (bright 1), but I want one category to present in our blue theme (lightest 2).

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.

That worked perfectly thank you. How do I find the collection reference, eg #collection-61232490fa9cf435f1508a85, so I can apply this to other pages?

https://khuramanarmstrong.squarespace.com/endarc-chocolat. The format change is required in the Summary block. Thanks.

Screenshot 1 the same as screenshot 2.