All things Shopify and commerce
Hi all, I have 2 digital freebies that I give away with every order. These print on a separate sheet of my packing slip and I don't know enough about code to know how to get them off. I've tried a couple things suggested by ChatGTP, but they didn't work to remove the digital freebies.
Can someone please tell me how to get these removed from my packing slip? They have increased my conversion rate, but they waste so much paper or give me the hassle of not printing those pages when I print my packing slips.
<div class="wrapper">
<div class="header">
<div class="shop-title">
<p class="to-uppercase">
<img src="https://cdn.shopify.com/s/files/1/0612/1019/8250/files/PacificLightsShopifyLogo.Black.jpg?v=1638909064" style="width: 300px; height: auto;">
</p>
</div>
<div class="order-title">
<p class="text-align-right">
Order {{ order.name }}
</p>
<p class="text-align-right">
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="customer-addresses">
<div class="shipping-address">
<p class="subtitle-bold to-uppercase">
{% if delivery_method.instructions != blank %}
Delivery to
{% else %}
Ship to
{% endif %}
</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 }}
{% if shipping_address.phone != blank %}
<br>
{{ shipping_address.phone }}
{% endif %}
{% else %}
No shipping address
{% endif %}
</p>
</div>
<div class="billing-address">
<p class="subtitle-bold to-uppercase">
Bill to
</p>
<p class="address-detail">
{% if billing_address != blank %}
{{ billing_address.name }}
{% if billing_address.company != blank %}
<br>
{{ billing_address.company }}
{% endif %}
<br>
{{ billing_address.address1 }}
{% if billing_address.address2 != blank %}
<br>
{{ billing_address.address2 }}
{% endif %}
{% if billing_address.city_province_zip != blank %}
<br>
{{ billing_address.city_province_zip }}
{% endif %}
<br>
{{ billing_address.country }}
{% else %}
No billing address
{% endif %}
</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>
{% comment %}
To adjust the size of line item images, change desired_image_size.
The other variables make sure your images print at high quality.
{% endcomment %}
{% assign desired_image_size = 58 %}
{% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}
{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
{% endcapture %}
{% for line_item in line_items_in_shipment %}
<div class="flex-line-item">
<div class="flex-line-item-img">
{% if line_item.image != blank %}
<div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
</div>
{% endif %}
</div>
<div class="flex-line-item-description">
<p>
<span class="line-item-description-line">
{{ line_item.title }}
</span>
{% if line_item.variant_title != blank %}
<span class="line-item-description-line">
{{ line_item.variant_title }}
</span>
{% endif %}
{% if 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 %}
{% if delivery_method.instructions != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Delivery instructions
</p>
<p class="notes-details">
{{ delivery_method.instructions }}
</p>
</div>
{% endif %}
<div class="footer">
<p>
Thank you for shopping with us!
</p>
<p>
<strong>
{{ shop.name }}
</strong>
<br>
{{ shop_address.summary }}
<br>
{{ shop.email }}
<br>
{{ shop.domain }}
</p>
</div>
</div>
<style type="text/css">
body {
font-size: 15px;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 831px;
margin: auto;
padding: 4em;
font-family: "Noto Sans", sans-serif;
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 {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.customer-addresses {
width: 100%;
display: inline-block;
margin: 2em 0;
}
.address-detail {
margin: 0.7em 0 0;
line-height: 1.5;
}
.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}
.to-uppercase {
text-transform: uppercase;
}
.text-align-right {
text-align: right;
}
.shipping-address {
float: left;
min-width: 18em;
max-width: 50%;
}
.billing-address {
padding-left: 20em;
min-width: 18em;
}
.order-container {
padding: 0 0.7em;
}
.order-container-header {
display: inline-block;
width: 100%;
margin-top: 1.4em;
}
.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: 1.4em 0;
page-break-inside: avoid;
}
.flex-line-item-img {
margin-right: 1.4em;
min-width: {{ desired_image_size }}px;
}
.flex-line-item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.line-item-description-line {
display: block;
}
.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}
.flex-line-item-quantity {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.subdued-separator {
height: 0.07em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}
.missing-line-items-text {
margin: 1.4em 0;
padding: 0 0.7em;
}
.notes {
margin-top: 2em;
}
.notes p {
margin-bottom: 0;
}
.notes .notes-details {
margin-top: 0.7em;
}
.footer {
margin-top: 2em;
text-align: center;
line-height: 1.5;
}
.footer p {
margin: 0;
margin-bottom: 1.4em;
}
hr {
height: 0.14em;
border: none;
color: black;
background-color: black;
margin: 0;
}
.aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}
.aspect-ratio::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(195,207,216,0.3);
}
.aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}
.aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
That is my current packing slip code. I'm on the Debut theme, if that matters. I appreciate any help!
I am having the same issue, were you able to find a solution to this?
No, not yet. I've tried a few things suggested. One of them succeeded in deleting the line items from the digital page, but the page was still printing! It was just blank except for the information identifying that these items were already sent etc. Very frustrating!
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024