Jump to content

Logo in Customer mails in V7.1

Recommended Posts

  • Replies 8
  • Created
  • Last Reply
<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
  • 2 months later...
  • 4 weeks later...

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
  • 3 weeks later...
  • 1 month later...

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

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>

image.thumb.png.e79037142e6c836eedbe287bc03b5926.png

Link to comment

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.