Upsell products Shopify

Upsell products Shopify means that we creating upsell products on your e-Commerce store using Shopify source code. Upsell products help your store have more sales than normal, which leads to an increase in revenues and profits. But what is upsell? And how to create upsell products? We will learn more about it in the next part.

What is Upsell?

Upsell is a selling method that persuades customers to purchase a more expensive product or service in order to get more profits. In order to help you understand easily, we give you some examples in which you may find yourself, a customer of the upselling method.

Examples and Types of Upsell

Upsell by combo

Imagine that you are in a mart that sells 2 boxes of beer. The first one includes 12 cans of beer with the price $17 and the other includes 18 cans with the price $18. In this case, we will not hesitate to take the second one to the cashier. Perhaps you do not think that you will buy more beer like that. And of course, you will be happy to pay and store them in your refrigerator for future usage. Thus this store will have its sales increase a half. Actually, 12 cans are just a tool of the method upsell by combo.

Upsell by raving fans

At the end of 2019, Apple releases a new iPhone version which is iPhone 11 with three cameras. However, let’s go back to the moment that iPhone 7 was launched, its camera can take photos and video with quality 4k so the capacity is quite a lot. If the internal memory is 32Gb, it is pretty limited because iPhone does not support external memory card. It is better to have internal memory 64Gb. However, this version just provides you 2 options including 128Gb and 256Gb. In this case, the purchaser will try to pay more $100 to have a higher cell phone level. As a result, the sale of iPhone 128GB will increase naturally because customers are willing to pay. Most of the purchasers who buy the latest version of iPhone or Samsung mobile are the fan of these brands. Therefore, it is not a matter of money with them.

Upsell products Shopify

Upsell by cross-sell

Do you often have a fast meal at KFC? Normally, we will have a drink, particularly, a glass of fresh Pepsi to avoid satiety. A small glass costs you 5$ but the staff here will ask if you want to have a large one with $7. Most of us will agree with this offer. This is called upsell by cross-selling. Customers are likely to buy right after they agree to buy the first product.

From our examples above, you should have had your own plan to build suitable upsell products because you should apply specific selling art to specific product types.

Upsell products Shopify or on other platforms as well, there are many factors contributing to the success of Upsell but the most enormous tool is information technology. I will recommend a helpful product which is Globo Upsell – Related Product app. It is the app that I have used and extremely feel excited about. It has a free plan, don’t hesitate to download and apply to your store.

Embed Google form in website without iframe

According to surveys, Google form is commonly used to collect people’s opinions as well as information. Its advantages are free, high-speed, and easy to use. Normally, a Google link or a shortcut link in the format of goo.gl is used. In this article, we will talk about how to embed google form in website without iframe. In this way, you can add any form to any platform, to any location which may be your website, email or even mailchimp.

Preparation before “Embed Google form in website without iframe”

  • A Google account to create a Google form
  • (Option) A contact page used to add to Shopify. You may use Weebly.

Implementation “Embed Google form in website without iframe”

Create a form

Firstly, you get to the website with address https://www.google.com/intl/en-EN/forms/about/ . You should replace the language pair en-EN in the url with your language pair appropriately.

You could create a form. Here I use the default form of Google as below

Now, you click on Send button on the top right of the screen

A popup shows up so that you can select the embed icon as in the figure. Now you can select the form height and width. This custom form can be shared via social networks such as Google plus, Facebook, Twitter. In this article how to embed google form in website without iframe, after selecting the dimension, you click on Copy to copy form.

At the moment, you create a page in Shopify. In Editor, you switch to using html mechanism, paste the form here, and save it.

You should view this page to check. If the result is the same as below, you carry out correctly. If it is different, you should review each step carefully.

This article is quite simple. You can easily follow the above notes. The article how to embed google form in website without iframe comes to an end now.

If you use Shopify, Google form or default forms of Shopify are a good idea. However, I recommend that you should use custom form app for Shopify. It allows you to drag and drop fields with new field formats that Google form does not include such as Google map, Upload file. It also supports fully responsive to various screen sizes of different devices. Especially, you can have a lifelong app usage for free.

How to create shopify mega menu code

shopify mega menu code is a combination of html, css, js source codethat you can add to your website. You can use this free mega menu code to add to your project. This article will guide you on how to create and insert mega menu code in your website.

In this example, I will create a simple mega menu including a drop down menu, and images. Based on this example, you can customize it so that it can be suitable for your store and your hobby as well.

Create mega menu code

To facilitate the process of editing code, you could use software such as như note notepad++, phpdesigner, etc. Or you can open directly the Shopify’s file in the back end of Shopify.

In this example, we use phpdesigner to edit code. We will add shopify mega menu code to the website if everything is okay after testing.

Create index.html file with the following content

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>

Create style-megamenu.css file with the following content

* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

We will test the menu by opening index.html file on the browser. If there is any problem that needs to be edited, you edit it the file you have created.

Add code to Shopify

To keep your website safe, you duplicate the theme, and try this mega menu on the duplicated theme.

shopify mage menu code

We can use Preview status of Shopify by clicking on Action button. In the list of drop down menu, you click on preview as below. In this status, only you can see the changes on the website when you add mega menu code. This will be safe because your customers are not affected. And if there is something wrong with the interface, nobody knows this.

shopify mage menu code

Next, we will edit code

shopify mage menu code

Depending on the place you want the menu to be displayed, you select a proper file to edit. In this example, I use the default Debut theme. I will add Shopify mega menu code to the existing main menu of the theme.

Add html code to theme

In the Debut theme, the following code helps display the menu {% include ‘site-nav’ %}

Now, you open header.liquid file, search for code {% include ‘site-nav’ %} in line 177 of the original theme. We will edit this code as {% include ‘mega-menu’ %}

shopify mage menu code

Next, in Snippets, you click on Add a new snippet, enter texts “mega-menu”, and click on Create snippet

shopify mage menu code

In mega-menu.liquid file, you add all the html contents in index.html file we have prepared in the first step and save them.

shopify mage menu code

Add css to theme

Add these codes {{ ‘mega-menu.css’ | asset_url | stylesheet_tag }} to theme.liquid file

shopify mage menu code

In Assets, click on Add a new asset. A popup shows up, you click on Create a blank file. Enter the name of “mega-menu” file, choose format as “.css”, click on Add asset bordered in red.

shopify mage menu code

Next, enter the content of style.css file to mega-menu.css file just created, then save this.

shopify mage menu code

 

Now, you enjoy the result in the front end.

We have just created shopify mega menu code and add it to the website. This way in not time-consuming, you just need to copy and use the codes. But it is extremely difficult for people who do not know about codes. If you do not know about codes, I suggest that you should use mega menu app. When you use this app, you just need to drag and drop to create a menu. There are many menu types so that you can show your creativity. You can refer to this link https://apps.shopify.com/globo-mega-menu to try using the demo. Of course, your menu will be much more attractive. I really recommend you to use this app.