Shopify themes, liquid, logos, and UX
I have tried looking up solutions to this simple question but I haven't had much at finding anything that provides a solution.
At the moment, I can print out gift messages with Shopify's Order printer.
But is there a way to change the font so that it doesn't look so plain?
Currently it looks like below:
Also, if anyone knows how to move the messages slightly higher that would be great. At the moment it prints roughly about the middle and continues down and/or to the next page. Or would this be more printer related?
Solved! Go to the solution
This is an accepted solution.
I have actually. Had to go about it in an odd way, but the best way I found out to get it working was to set up classes for it. I still have to figure out how to set up the printing size, but at least the font works..See below for what I did to get it working.
<div class="GiftMessage">
<div style="width: 100%; margin: 0px;">
<thead>
{% for line_item in line_items %}
<tr>
<td>
{% for p in line_item.properties %}
{% assign property_first_char = p.first | slice: 0 %}
{% unless p.last == blank or property_first_char == '_' %}
<div class="ymq-property">
{% if p.last contains '/uploads/' %}
<div><img src="{{ p.last }}" style="max-width: 50px; height: auto;"></div>
{% else %}
{{ p.last }}
{% endif %}
</div>
{% endunless %}
{% endfor %}
</td>
</tr>
{% endfor %}
</thead>
<tbody>
</tbody>
</div>
</div>
<style>
.GiftMessage * {
font-family: "Caveat";
font-size: 14px;
font-weight: 300;
line-height: 18px;
box-sizing: border-box;
margin: auto;
padding: 0px 0px 30px 0px;
min-height: 0px;
max-height: 300px;
}
</style>
There's prolly redundant code in there, but if someone would help clean it up, it would be appreciated.
Have you found any solutions yet?
This is an accepted solution.
I have actually. Had to go about it in an odd way, but the best way I found out to get it working was to set up classes for it. I still have to figure out how to set up the printing size, but at least the font works..See below for what I did to get it working.
<div class="GiftMessage">
<div style="width: 100%; margin: 0px;">
<thead>
{% for line_item in line_items %}
<tr>
<td>
{% for p in line_item.properties %}
{% assign property_first_char = p.first | slice: 0 %}
{% unless p.last == blank or property_first_char == '_' %}
<div class="ymq-property">
{% if p.last contains '/uploads/' %}
<div><img src="{{ p.last }}" style="max-width: 50px; height: auto;"></div>
{% else %}
{{ p.last }}
{% endif %}
</div>
{% endunless %}
{% endfor %}
</td>
</tr>
{% endfor %}
</thead>
<tbody>
</tbody>
</div>
</div>
<style>
.GiftMessage * {
font-family: "Caveat";
font-size: 14px;
font-weight: 300;
line-height: 18px;
box-sizing: border-box;
margin: auto;
padding: 0px 0px 30px 0px;
min-height: 0px;
max-height: 300px;
}
</style>
There's prolly redundant code in there, but if someone would help clean it up, it would be appreciated.
Keep in mind the properties may vary depending on your own theme.
User | RANK |
---|---|
227 | |
180 | |
63 | |
53 | |
47 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023