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.

Thanks guys. Given that, is there a way to increase the spacing between the description rows to be more consistent with the general site text (as highlighted below). Thanks.

No luck with that either @tuanphan.

Hi @tuanphan. As mentioned your code was working perfectly but suddenly stopped. Do you know if something changed? I have tried other images without success so I suspect the directory path of /s may have changed.

This code suddenly stopped working. Has something changed?

Thanks Tuan. I was hoping for something more global, including in the product page itself and in the summary blocks. Also globally across all products, not hard coded per each if possible as we will have many products. Finally It would be preferable to pick up the description of the default variant, not hard coded. Any suggestions? Thanks.

Thanks Tuan. I was hoping for something more global, similar to what the summary blocks provide. Any suggestions?

Site URL: https://www.khuramanarmstrong.com/endarc-chocolat-store Hi. Can someone please advise how to change, or add to, the price description in the store so it includes the default variation description. In the case below it would include "per [6 pack]" where highlighted in yellow. Thanks.

Site URL: https://www.khuramanarmstrong.com/endarc-chocolat-store Hi. Can someone please advise how to include the product description in the store page between Title and Price (where the red arrow points in the image below). I'm using the Beaumont template.

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.

Hey Creedon. The code is in the Page Settings / Advanced / Page Header Code Injection field. Isn't that where it should be?