Order Printer app template

Solved
Highlighted
Tourist
12 0 1

Hi

 

I have added a logo onto my template, but it is huge - can anyone explain how I can resize it please?

 

Many thanks

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 126

Hi, Julie!

 

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!

 

Kind Regards,

 

May

Shopify Support

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
12 0 1

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? 

Thank you

1 Like
Highlighted
Shopify Staff
Shopify Staff
335 32 126

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: 

26-48-o9rwy-jfzap

 

 

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

 

Kind Regards,

May
Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Highlighted
Tourist
12 0 1

Yes, thank you very much. 

0 Likes