This is May from Shopify.
Did you add the logo to the template by using the '<img>' HTML tag? If so, you can add some CSS styling in the tag to resize the logo! For example:
<img src=”your URL” style=”width: 30%;”/>
You will want to use a percentage for your width, to ensure that your logo stays on the top of the invoice. You can change the percentage depending on how big you want your logo to be. If you’d like to center the logo, you can add some additional stylings like such:
<img src=”your URL” style=”width: 30%; margin-right: auto; margin-left: auto”/>
Let me know if this helps! If this is not what you are looking for, please let me know and I’ll be more than happy to help!
Thanks for your response May.
This is the code I have in the template, but adding the extra code which you provided hasn't made any difference to the logo
<img src="https://i.postimg.cc/13MRbw0C/Bonza-Logo.jpg" style=”width: 20%;”/>
Have I missed something?
This is an accepted solution.
Hi again, Julie!
I'm sorry to hear that the code did not work for you. There seem to be nothing wrong with your code, and I don't think you are missing anything. I tested the code out on my test store and it looks like it works. Although, I did notice one thing when I copied and pasted the code. Sometimes, when you copy and paste codes (instead of typing it out manually), the code might lose its formatting. For example, when I copied and pasted this code: style=”width: 20%;", the formatting looks a little bit off. Here's what it looks like in the code editor:
When adding an attribute inside an HTML tag, the elements inside the quotation marks should be in one colour, to indicates that they are grouped together. If you look at the code on line 1 inside the green box, you can see that the elements inside style="..." are in uniform green font colour, whereas the one marked in orange, the width is in green and the size in in black font. To fix this issue, you can either remove style=”width: 20%;", and type it out manually, or you can remove and re-add the quotation marks around it like this.
Let me know if this helps! If you're still not able to resize the image, please let me know. 🙂