bheiberg Posted February 7, 2020 Share Posted February 7, 2020 I have succesfully followed this thread to add a logo in the customer notifications, but how can I control the size of the logo? Its displays a bit too large. It is unfortunately no longer possible to add this question to the original thread, see https://forum.squarespace.com/topic/20627-how-do-i-put-my-logo-onto-the-order-confirmation-email/ Link to comment
tuanphan Posted February 7, 2020 Share Posted February 7, 2020 <a href="http://www.example.com" title="Check out example.com"><img src="https://example.squarespace.com/item/52851b0ce4b0ae1807bdc7cf?format=400w" alt="Example.com logo" style="display:block;width:100px;height:100px;"></a> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jjjuliejj Posted April 29, 2020 Share Posted April 29, 2020 Can you explain to a non-coder exactly how to make that code work to add a logo to the customer emails in 7.1? I don't know what to replace or where to get the replacement information. Thanks. Link to comment
ashleybillings46 Posted May 22, 2020 Share Posted May 22, 2020 Two step-by-step, detailed options to add a logo (both very similar) for v 7.1. Helpful comments: Do not add the text in red in your code Use <center> at the beginning of the code; </center> at the end of your code to center your logo (see option 2 for reference) The elements of the code you need to update to work for your site go between the "quotes" OPTION 1: Using your website logo Location: Main menu > commerce > customer notifications > header & footer (for all email comms) or donations (for that specific communication) Scroll down to "header box" Enter this code: <a href="http://www.example.com" title="Check out example.com"><img src="https://example.squarespace.com/item/52851b0ce4b0ae1807bdc7cf?format=400w" alt="Example.com logo" style="display:block;"></a> Where to edit for your site step-by-step: <a href="http://www.example.com" - enter your website here, when people click your logo in the email they will go to your website title="Check out example.com"><img - name of your asset src="https://example.squarespace.com/item/52851b0ce4b0ae1807bdc7cf?format=400w" - go to your website, right click on your logo & select copy image address, enter that link here. To change the size of your logo, change the number after "format=", but keep the "w" alt="Example.com logo" - this is the text that will show if your logo does not display on a user's computer style="display:block;"></a> OPTION 2: Using a static logo Uploading the static asset: Main menu > Design > Custom CSS Scroll to "Manage Custom File" & upload your file here Then click your file name, it will be added to the CSS box above in grey & http or https in purple You may see a "Syntax Error" in red at the bottom, that is fine Click save & copy the full URL Recommend opening another tab in case you need to toggle between this page & another Location: Main menu > commerce > customer notifications > header & footer (for all email comms) or donations (for that specific communication) Scroll down to "header box" Enter this code: <center><a href="http://www.example.com" title="Check out example.com"><img src="https://example.squarespace.com/item/52851b0ce4b0ae1807bdc7cf?format=400w" alt="Example.com logo" style="display:block;"></a></center> Where to edit for your site step-by-step: <center><a href="http://www.example.com" - enter your website here, when people click your logo in the email they will go to your website title="Check out example.com"><img - name of your asset src="https://example.squarespace.com/item/52851b0ce4b0ae1807bdc7cf?format=400w" - insert the URL of your asset from the Custom CSS box alt="Example.com logo" - this is the text that will show if your logo does not display on a user's computer style="display:block;"></a></center> **NOTE: when I uploaded my image, this portion of the code automatically changed to: style="display:block;width:150px;height:150px;"></a></center> - to change the size of your asset, change the px values (i.e. 150px to 100px) for width & height Link to comment
Shanty Posted July 29, 2020 Share Posted July 29, 2020 I am trying to do this with a static logo uploaded into my custom css files and it looks great on the screen preview as I have adjusted the width values however when I send the text email the logo is huge! Can someone please help... Link to comment
tuanphan Posted July 31, 2020 Share Posted July 31, 2020 On 7/29/2020 at 7:18 AM, Shanty said: I am trying to do this with a static logo uploaded into my custom css files and it looks great on the screen preview as I have adjusted the width values however when I send the text email the logo is huge! Can someone please help... Which code did you use? Or use this code <a href="http://beaverhero.com"><img src="https://example.squarespace.com/item/52851b0ce4b0ae1807bdc7cf?format=400w" alt="Example.com logo" style="display:block;width:100px;height:100px;"></a> replace with your url & image url Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Shanty Posted August 3, 2020 Share Posted August 3, 2020 I have used this code but as you can see the email test it comes through enormous no matter what size i put in the width sections.. <a href="http://www.hbandco.com.au"><img src="https://static1.squarespace.com/static/5e7aec2a8fd130469322a6ae/t/5ea8fb33f665732eb7632025/1596414165557/?format=1500w" alt="Example.com logo" style="display:block;width:50%;height:100%;"></a> Link to comment
tuanphan Posted August 3, 2020 Share Posted August 3, 2020 change 50% to 50px 5 hours ago, Shanty said: I have used this code but as you can see the email test it comes through enormous no matter what size i put in the width sections.. <a href="http://www.hbandco.com.au"><img src="https://static1.squarespace.com/static/5e7aec2a8fd130469322a6ae/t/5ea8fb33f665732eb7632025/1596414165557/?format=1500w" alt="Example.com logo" style="display:block;width:50%;height:100%;"></a> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.