Shopify themes, liquid, logos, and UX
I'm trying to change a few things on the packing slip, but can't seem to figure out how to do so on my own.
I'm trying to print on thermal receipt paper (continuous, 2 7/16" roll) and would like to:
- minimize the white space between the left and right sections
- make the font larger
- minimize the outside margins/padding
- retain formatting/alignment
See image below for what my code currently generates compared to what I'm trying to achieve:
If I try and up the font size within my current code, the right section doesn't shift and subsequently gets cut off:
My current code:
<body><div class="wrapper">
<div class="header">
<div class="shop-title">
<p class="to-uppercase">
{{ shop.name }}
</p>
</div>
</div>
<div class="customer-addresses">
<div class="shipping-address">
<p class="subtitle-bold to-uppercase">
Ship to
</p>
<p class="address-detail">
{% if shipping_address != blank %}
{{ shipping_address.name }}
{% if shipping_address.company != blank %}
<br>
{{ shipping_address.company }}
{% endif %}
<br>
{{ shipping_address.address1 }}
{% if shipping_address.address2 != blank %}
<br>
{{ shipping_address.address2 }}
{% endif %}
{% if shipping_address.city_province_zip != blank %}
<br>
{{ shipping_address.city_province_zip }}
{% endif %}
<br>
{{ shipping_address.country }}
{% else %}
No shipping address
{% endif %}
</p>
</div>
<div class="billing-address">
<p class="sub-bold to-uppercase">
Order {{ order.name }}
</p>
<p class="order-title">
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<hr>
<div class="order-container">
<div class="order-container-header">
<div class="order-container-header-left-content">
<p class="subtitle-bold to-uppercase">
Items
</p>
</div>
<div class="order-container-header-right-content">
<p class="subtitle-bold to-uppercase">
Quantity
</p>
</div>
</div>
{% for line_item in line_items_in_shipment %}
<div class="flex-line-item">
<div class="flex-line-item-description">
<p>
<span class="line-item-description-line">
<strong>{{ line_item.title }}</strong>
</span>
{% if line_item.variant_title != blank %}
<span class="line-item-description-line">
{{ line_item.variant_title }}
{% if line_item.sku != blank %}
•
{{ line_item.sku }}
{% endif %}
</span>
{% elsif line_item.sku != blank %}
<span class="line-item-description-line">
{{ line_item.sku }}
</span>
{% endif %}
</p>
</div>
<div class="flex-line-item-quantity">
<p class="text-align-right">
{{ line_item.shipping_quantity }} of {{ line_item.quantity }}
</p>
</div>
</div>
{% endfor %}
</div>
{% unless includes_all_line_items_in_order %}
<hr class="subdued-separator">
<p class="missing-line-items-text">
There are other items from your order not included in this shipment.
</p>
{% endunless %}
<hr>
{% if order.note != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Notes
</p>
<p class="notes-details">
{{ order.note }}
</p>
</div>
{% endif %}
<div class="footer">
<p>
Thank you for shopping with us!
<br>。:゚૮ ˶ˆ ﻌ ˆ˶ ა ゚:。
</p>
<p>
<strong>
{{ shop.name }}
</strong>
<br>
{{ shop.email }}
<br>
{{ shop.domain }}
</p>
</div>
</div>
<style type="text/css">
@font-face {
font-family: "VT323";
src: url(https://cdn.shopify.com/s/files/1/1319/9245/files/VT323-Regular.woff2?v=1631648865);
}
body {
font-family: 'VT323', monospace;
font-size: 30px;
}
p {
font-family: 'VT323', monospace;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 871px;
margin: auto;
font-family: 'VT323', monospace;
font-weight: 250;
}
.header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
}
.header p {
margin: 0;
}
.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}
.order-title {
width: 100%;
display: inline-block;
margin: 1em 0;
margin: 0.35em 0 0;
line-height: 1.5;
text-align: right;
}
.customer-addresses {
width: 100%;
display: inline-block;
margin: 1em 0;
}
.address-detail {
margin: 0.35em 0 0;
line-height: 1.5;
}
.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}
.sub-bold {
font-weight:bold;
margin: 0;
font-size: 0.85em;
text-align:right;
}
.to-uppercase {
text-transform: uppercase;
}
.text-align-right {
text-align: right;
}
.shipping-address {
float: left;
min-width: 14em;
max-width: 50%;
}
.billing-address {
padding-left: 16em;
min-width: 14em;
}
.order-container {
padding: 0 0.35em;
}
.order-container-header {
display: inline-block;
width: 100%;
margin-top: 0.7em;
}
.order-container-header-left-content {
float: left;
}
.order-container-header-right-content {
float: right;
}
.flex-line-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 0.7em 0;
page-break-inside: avoid;
}
.flex-line-item-description {
-webkit-box-flex: 9;
-webkit-flex: 9;
flex: 9;
}
.line-item-description-line {
display: block;
}
.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}
.flex-line-item-quantity {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.subdued-separator {
height: 0.035em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}
.missing-line-items-text {
margin: 0.7em 0;
padding: 0 0.35em;
}
.notes {
margin-top: 1em;
}
.notes p {
margin-bottom: 0;
}
.notes .notes-details {
margin-top: 0.35em;
}
.footer {
margin-top: 1em;
text-align: center;
line-height: 1.5;
}
.footer p {
margin: 0;
margin-bottom: 0.7em;
}
hr {
height: 0.07em;
border: none;
color: black;
background-color: black;
margin: 0;
}
</style></body></html>
Any help appreciated, thanks!
Hi @Sailormean ,
Please share the url where you want modification ?
I was able to change the Notes section on my packing slip to make the gift message much larger by adding ONE line of code to the HTML for the packing slip:
BEFORE (ORIGINAL CODE):
.notes .notes-details {
margin-top: 0.7em;
}
AFTER ADDING ONE LINE:
.notes .notes-details {
margin-top: 0.7em;
font-size: 2.0em;
}
This worked fabulously for me!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024