How To: Cross-Sell Products On The Product Page Without An App

How To: Cross-Sell Products On The Product Page Without An App

Step 1: Go into the theme code, find the product template liquid and paste the code below underneath the payment button/add to cart code

You may need to adjust some elements based on your theme

<! -- Add-on Item Start -->
{% for metafield in product.metafields.details.addon %}
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% if metafield == variant.sku %}
<label for="Add-on-product-template">Add-on</label>
<div class="add-on-product-container">
<div class="product__add-on__top">
<span class="add-on-element"><input class="add-on-product-checkbox" type="checkbox" name="id[]" value="{{ }}" /></span>
<a href="{{ product.url }}"><img src="{{ product.featured_media | img_url: 'x50' }}" class="add-on-image"></a>
<span class="add-on-element"><strong>Optional: {{ product.title }}</strong><span>
<span class="add-on-element">+ {{ product.price | money }}<span>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
<! -- Add-on Item End -->

Step 2: Still in the theme code, find your theme css file, and paste the code below to the bottom of the file

/* Product Add-on */
.add-on-product-container {
border-radius: 1px;
border: 1px solid black;
margin-bottom: 20px;
background-color: #fff;
-webkit-transition: .3s;
transition: .3s;
padding: 2px 17px;
.product__add-on__top {
display: flex;
-webkit-box-align: start;
align-items: flex-start;
cursor: pointer;
min-height: 58px;
padding: 16px 0;
.add-on-product-checkbox {
width: 22px;
height: 22px;
min-width: 22px;
border: 1px solid #1b437e;
border-radius: 4px;
margin-right: 15px;
transition: .3s;
background: #fff url(white-checkmark.svg) 50% no-repeat;
background-size: 0;
@media (max-width: 480px) {
.add-on-image {
max-width: 50px;
.add-on-image {
display: block;
margin-right: 15px;
max-width: 60px;
margin-top: -5px;

Step 3: Go to the Shopify settings -> custom data -> products and click "add a definition"

Step 4: Create a single line Shopify product metafield named "Product Add-on" with namespace and key labeled "details.addon" as shown in the image below

Step 5: Go to the Shopify product you want featured in the add-on and copy the SKU number

Step 6: Now go to the product you want to promote this featured add-on and paste the SKU on the bottom of the product page in the metafields tab labeled "Product Add-on". Click save and you're finished!


Click here to get in touch with me if you'd like a similar setup for your Shopify store.

Back to blog