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.

Woocommerce hide related products

Woocommerce hide related products and solution to this problem

“ Woocommerce hide related products ” is an issue for which lots of people searched. Hiding the whole products on your store is a piece of cake. However, in this article, I will help you understand more about related products, thus you can decide on hiding or focusing on them to improve your revenues.

Woocommerce hide related products

Related products are a list of items that have similar or same price, vendor, category, etc. Or they may have no relevant relation but you want to showcase them together. Showing related products along with the currently viewed item is pretty beneficial. It will persuade your customers to purchase more. Normally, on the product detail page, there exist a main product, “add to cart” button, product description, and a list of related products.

If you want to Woocommerce hide related products, there are two recommended ways as follows:

First method: Apply CSS

This tactic is quite simple as you can use attribute display none. It can be done by all of you. Please follow these steps:

Step 1: Go to a page including related products > right click and select Inspect

Step 2: Select a class wrapping these products, copy the following class related-products-wrapper product-section

.related.related-Products-Wrapper.product-part  {

display :  none  !important;

}

You can absolutely ignore the above steps, copy the code snippet above and add to the end of the CSS file of the theme, and save. In order to make the changes, you can use the edit feature of the theme (however, this feature is unavailable in WordPress version 5.x.x and later ones) or apply FTP software such as phpdegnide, notepad ++ or use file edit feature of hosting.

Second method: Apply PHP code

This method is just suitable for people who are skillful in WordPress, Woocommerce. You should create a backup file so you can revert back if there is any problem with the changes. Now, open file function.php and add the code below to the end of the file.

remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );

Next, please reload the web page and check if it is updated. After that, please check all the functions to make sure there is no effect on your current functions. If yes, please remove the added code and find where the cause is. In case you cannot figure it out yourself, just find a developer for support.

I hope that the article about “  Woocommerce hide related products ” can help you. However, it had better if relevant products are recommended. They will help increase the conversion rate and improve your revenues as well. If you are working with Shopify platform, I would like to recommend this app Related Products  It allows you to configure different relevant conditions such as Same vendor, Same collection, or Manual Recommendation for each products. Please refer to this link for more information.

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 add a drop down menu in Shopify?

Drop down menu is one type of menu including a parent menu and submenus. When you hover or click on the parent menu, a list of submenus belonging to parent menu will show up. Drop down menu makes your websites more tidy, attractive and professional. Drop down menus on Shopify are different from other source codes. So, how to add a drop down menu in Shopify? This article will help you answer this question.

The first step is that you log in the back office of Shopify. The link for you to login is http://yourdomain/admin . Use your account to log in the website. Please make sure that your account has right to create and edit menus. To check this right, you click on Online Store, and click on Navigation. If you can add menu, you are allowed to continue. If not, you should use another account or request for your account to be given extra rights.

how to add a drop down menu in Shopify

Add a parent menu

You can edit a menu in the list of existing menus by adding a drop down menu. Or you can create a new menu.

Title: You input the name of the menu

Add menu item: Here you add menu items. For example, in this article, items are Home, Shop, Sale, Collection, Blog, Pages

how to add a drop down menu in Shopify

After adding menu item, we have a menu as below

how to add a drop down menu in Shopify

Add submenus

You may ask why the question how to add a drop down menu in shopify is related to submenus. If you do not know the answer, I will explain to you. Drop down menu includes a parent menu and submenus. Usually, on the screen, parent menu displays and submenus hides. When you hover mouse cursor to the parent menu, a list of submenus will display.

how to add a drop down menu in Shopify

One special thing of Shopify is that the name of submenu should be set as the same as that of the menu item. In the following example, we create submenus for home item. We will set the name as “home”. We add custom items with names home page 1, home page 2, home page 3, etc. for example.

how to add a drop down menu in Shopify

We have run through the article how to add a drop down menu in shopify. If you have the same question such as how to make a drop down menu in shopify , or how to create a drop down menu in shopify, I believe you have your own answer. It is too easy to create a drop down menu on Shopify. I believe that you can do that.

If you want to create a drop down menu with unlimited submenus, I suggest that you should mega menu app. It supports to add not only unlimited submenus but also contact form, html, image, and best-selling products, which makes your website more lively, increasing customers’ experiences and your revenues.

If you are good at html, css code, please read this article which will help you to create a menu with code

 

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.