In this guide, we will demonstrate an effective method to enhance your product offering by upselling additional items alongside your main products. This technique can significantly increase your average order value and improve customer satisfaction.
Why We Use the Additional Product Feature?
The additional product feature is an effective tool for boosting sales and enhancing customer satisfaction on your e-commerce platform. By offering complementary products alongside the main item, you can:
- Increase Average Order Value (AOV): Upselling relevant products encourages customers to spend more per transaction.
- Improve Customer Experience: Providing related products simplifies the shopping process for customers, as they can purchase all necessary items in one go.
- Maximize Sales Opportunities: Highlighting complementary products can capture the interest of customers who might not have considered these items otherwise.
Businees can get benefits using Additional Product Feature
- Electronics Retailers: Offer accessories like chargers, cases, and screen protectors when customers buy phones, tablets, or laptops.
- Fashion Retailers: Suggest matching accessories such as belts, shoes, or jewelry to go with clothing items.
- Beauty and Health Stores: Bundle related products like skincare sets, makeup kits, or wellness packages.
- Bookstores: Propose related books, bookmarks, or reading lights when customers buy books.
Technical Implementation with Screenshots
Step 1: Creating Meta Objects
Define meta objects for your optional products. Ensure these objects have fields for both text and reference, enabling smooth integration with your primary products.
- Go to the Shopify admin panel.
- Navigate to Settings > Custom data > Products.
- Click on Add definition and create a new meta object named Additional Product.
- Add fields for Text (for the product name) and ref_product (for the product).
Please refer the screenshot below
- Now add product metafield with named additional_product choose the type metaobject.
- Select the metaobject defination from dropdown.
Refer the screenshot below
Step 2: Updating Meta Fields
Add relevant meta field entries for each product.
- Go to your product's page in the admin panel.
- Scroll down to the `Metafields` section.
- Select the `Additional Product` field and add the optional products.
Step 3: Modifying Theme Code
Locate the product page template and insert the provided code snippet.
- Go to Online Store > Themes > Actions > Edit code.
- Find the main-product.liquid file under the Sections directory.
- Insert the following code snippet to display additional products:
- Save the changes.
********************************* Additional Product GR Trading ****************************************** -->
{% when 'add_product' %}
{% if product.metafields.custom.additional_product.value %}
<div>
<h3>{{ block.settings.heading_txt }} </h3>
</div>
{% for additional_pro in product.metafields.custom.additional_product.value %}
{% assign add_gid = additional_pro.ref_product %}
{% assign gid_ref_product = all_products[add_gid] %}
<div class="main_cart">
<div class="parent_cart">
{% if gid_ref_product.featured_image %}
<div class="ref_image">
<img
height="auto"
width="50px"
src="{{ gid_ref_product.featured_image | image_url: width: 246 }}"
alt=""
>
</div>
{% endif %}
<div class="ref_name">
<strong>
<h3>{{ gid_ref_product.title }}</h3>
{% if gid_ref_product.variants.size>1 %}
<select id="_input_selectBox" class="_input_selectBox">
<option name="pro_id" value="-1">Select Option</option>
{% for product_varaint in gid_ref_product.variants %}
<option price_data= "{{ product_varaint.price | money}}" name="pro_id" value="{{ product_varaint.id }}">{{ product_varaint.title }}</option>
{% endfor %}
</select>
{% else %}
<style>
._single_var{
display:flex;
gap:10px;
}
._single_var .active{
background: green;
}
._single_var button{
background: #000000;
color: white;
border: none;
padding: 2px 11px;
border-radius: 5px;
cursor:pointer;
}
#_hid_checkbox{
visibility: hidden;
}
</style>
<div class="_single_var">
<button id='_is_selected_true'>Yes</button>
<button id="_is_selected_false"> No</button>
<input id="_hid_checkbox" type="checkbox" value="{{ gid_ref_product.variants.first.id }}" />
<script>
$(document).ready(function() {
$('#_is_selected_true').click(function() {
$('#_hid_checkbox').prop('checked', true);
$(this).addClass('active');
$("#_is_selected_false").removeClass("active");
});
$('#_is_selected_false').click(function() {
$('#_hid_checkbox').prop('checked', false);
$(this).addClass('active');
$("#_is_selected_true").removeClass("active");
});
});
</script>
</div>
{% endif %}
</strong>
</div>
<div class="checkbox">
<strong>
{% if gid_ref_product.compare_at_price %}
<span class=""> <s>{{ gid_ref_product.compare_at_price | money_with_currency }}</s></span>
<br/>
{% endif %}
{% if gid_ref_product.variants.size>1 %}
<span style="color:green;" class="_price_data">Rs. 0.00</span>
{% else %}
<span style="color:green;" class="_price_data">{{ gid_ref_product.price | money_with_currency }}</span>
{% endif %}
</strong>
</div>
</div>
</div>
{% endfor %}
<script>
$(document).ready(function() {
$('.product-form__buttons').on('click', function() {
var values = $('._input_selectBox option:selected').map(function() {
if(this.value!=-1){
return this.value;
}
}).toArray();
console.log(values);
if(values.length!=0){
setTimeout(addItemToCart(values),500);
}
});
$('.product-form__buttons').on('click', function() {
var chbx_value = $('#_hid_checkbox').val();
if ($('#_hid_checkbox').is(':checked')) {
console.log("val", chbx_value);
setTimeout(function() {
addItemToCart(chbx_value);
}, 500);
}
});
$("._input_selectBox").change(function(){
var _price_cr = $(this).find(':selected').attr('price_data');
console.log(_price_cr)
var spanElement = $(this).closest('.parent_cart').find('._price_data');
spanElement.text(_price_cr)
})
});
function addItemToCart(variant_id, qty, frequency, unit_type) {
setTimeout(function(){
data = {
"id": variant_id,
"quantity": 1
}
jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function() {
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
bubbles: true //this code is for prestige theme, is to refresh the cart
}));
}
});
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
bubbles: true // same code for prestige theme
}));
},1000)
}
</script>
<style>
.main_cart {
width: auto;
display:flex;
justify-content:center;
max-width:100%;
border-radius: 14px;
border: 1px solid;
}
}
.main_cart .checkbox{
display:flex;
}
.ref_image img{
border-radius:10 px;
}
.parent_cart {
display: flex;
align-items: center;
justify-content: space-between;
width: fit-content;
border-radius: 20px;
min-width: 100%;
}
.parent_cart div {
margin: 0px 5px 0px 5px;
padding: 5px 10px 5px 10px;
}
.checkbox strong {
margin-right: 2px;
}
@media only screen and (max-width: 600px) {
.ref_name h3 {
font-size: 10px;
}
}
.ref_name h3{
font-size: 11px;
}
.checkbox span{
font-size:11px;
}
.checkbox{
display:flex;
}
.ref_name{
max-width: 42%;
}
._input_selectBox{
border: solid 1px #121212;
width: 100%;
padding: 5px;
border-radius: 4px;
margin-bottom: 0;
outline: none;
box-shadow: none;
}
</style>
{% endif %}
<!-- ********************************* Additional Product GR Trading ****************************************** -->
JSON Schema
{
"type": "add_product",
"name": "Additional Product",
"settings": [
{
"type": "text",
"id": "heading_txt",
"label": "Heading "
}
]
},
Step 4: Adding jQuery Script
Include the necessary jQuery script in the header section of your theme.
1. In the theme code editor, find the `theme.liquid` file under the `Layout` directory.
2. Add the following jQuery script before the closing `</head>` tag:
<script src="https://code.jquery.com/jquery-3.6.3.js"></script> 
3. Save the changes.
Step 5: Customizing the Product Page Layout
Add and position the "Additional Products" block using the theme customizer.
1. Go to `Online Store` > `Themes` > `Customize`.
2. Navigate to the product page.
3. Add a new block named `Additional Products` and position it as needed.
4. Save the changes.
By implementing the additional product feature, you can create a more engaging shopping experience for your customers, ultimately driving higher sales and enhancing customer satisfaction. The provided code is specifically designed for the DAWN theme. If you are using a different theme or require further customization, our team is available to assist you. Please contact us for professional implementation services.
Related Keywords to additional product
Product upselling Complementary products E-commerce sales strategies Shopify upsell feature Increasing average order value Cross-selling techniques E-commerce product recommendations Product bundling Shopify meta fields Shopify theme customization how to add custom products in shopify shopify product page customization
More Articel :
How to create a logo in shopify,Add Free Stylish Slider Section in Your Shopify Store, Free Popup Code Installation Guide for Your Shopify Store,How to Hide Prices on Shopify? (How-to guide 2024), shopify upselling,gang sheet builder in shopify, ,how to add slideshow in shopify,free popup code installation guide for your shopify store,Slideshow Images For Mobile in shopif,How to replace buy button in shopify ,benefits using Additional Product Feature
Installation service for the additional product feature, tailored to any Shopify theme
