Shopify Tutorial Archives - eCommerce Thesis

Tag: Shopify Tutorial

How to Change Cart Icon from Shopify Store

Shopify was started in Ottawa, Canada, in 2004 by three Canadians, inspired by a poor online shopping experience with snowboarding equipment. It is one of the most popular eCommerce platforms on the planet, with a 23 percent market share in the U.S.

In this tutorial, I am going to share How to Change Cart Icon from Shopify Store without hiring any developer. I have included video guidelines for you. So that you can do this very easily.

Even you no need to write any code because I have shared the code also. Just follow my video and insert the below code.

I hope you will enjoy this video and subscribe to my channel.

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 8503.9 14173.2"><path d="M8305.4 4978.4c-125.8-148.5-315.6-233.7-520.7-233.7H2071.9l-79.7-458.5c-65.7-394.4-407.3-973.4-1220.3-973.4H460.9C220.5 3312.8 0 3482.8 0 3793.3c0 356.2 236.5 450.5 460.9 450.5h310.9c153.8 0 310.9 133.1 336.2 284.8l837.2 5022.9c65.7 394.4 430.5 703.4 830.3 703.4H7784.7c138.3 0 360.5-135 360.5-460.5 0-307.9-222.1-460.5-360.5-460.5H3195.5c-279 0-351-94.8-396.2-334.8l-33.6-271.4 4541.7-434.1c388.3-33.8 742.7-361.4 806.7-745.9l336.2-2017.3c33.7-202.3-19.1-403.5-144.9-552H8305.4zM7462.4 5829.7c-10 58.6-224.7 1322.1-224.7 1322.1 -21.3 133.6-158.4 266-287.7 277.7L2595.1 7798.7l-363.2-2131.8 5068.9-8c47.2 0 106.9 17 131.9 47.7C7457.6 5737.4 7472.3 5771.1 7462.4 5829.7z"/><path d="M3182.5 10670.4c571.9 8.3 1028.8 478.6 1020.5 1050.5 -8.3 571.9-478.6 1028.8-1050.5 1020.5 -564.8-8.2-1018.9-467.5-1020.6-1032.4 1.6-573.6 467.9-1037.3 1041.5-1035.7 3 0 6.1 0 9.1 0.1V10670.4z"/><path d="M6933.5 10670.4c571.9 8.3 1028.8 478.6 1020.5 1050.5 -8.3 571.9-478.6 1028.8-1050.5 1020.5 -564.8-8.2-1018.9-467.5-1020.6-1032.4 1.6-573.6 467.9-1037.3 1041.5-1035.7 3 0 6.1 0 9.1 0.1V10670.4z"/></svg>
Shopify Expert
Shopify Expert

How to redirect to cart after “add to cart” – Debut Theme


I have created a single product Shopify online store for one of my clients as part of my eCommerce Service Provider business. My client only has 1 product. But the problem he and I face that when customers click on the “add to cart” button they stay on the same page. Actually, that is not good UX rules because as there no more products than customers no need to stay on the same page. It’s just 1 unnecessary click and surely leads to abandoned carts.

SO in the tutorial, I am going to fix this issue how to how to redirect to cart after “add to cart” – Debut Theme. This tutorial will be very helpful if you are using Shopify Debut Theme.

Find this code In asset->theme.js->find “$.post(params)“.

If your theme contain this then follow this:

add location.href=”/cart”;

So it look like:

$.post(params)
        .done(
          function(item) {
            this._hideErrorMessage();
            this._setupCartPopup(item);
             location.href="/cart";
          }.bind(this)
        )
Shopify Expert
Shopify Expert

Want to modify or custom changes on store Hire Me.

Stay on the product page after adding products to the cart – Shopify

In some Shopify Online Store Product Page, I found a problem when I work for some clients. The problem is that when I add a product to the cart, It will take me to the cart page but I wanted to add more from the same page.

For this problem Lack of UX strander, I have to go to the shop page again and add another product, and to do continues.

But this problem does not found in all Shopify themes. some Shopify themes only face this problem.

So In this tutorial, I am going to show you how to fix that without hiring any developer.

This tutorial lets customers stay on the product page after clicking the Add to cart button so that they can continue shopping.

Note: This tutorial is not supported by Shopify. You must know basic HTML, CSS, JavaScript, and Liquid.

You can hire me as a Shopify Expert if you aren’t comfortable doing the steps in the tutorial.

Of Course, I recommend you to watch my video.

To edit your theme code:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Layout directory, click theme.liquid.
  4. Find the closing </body> tag. On a new line right above the closing </body> tag, paste the following code:
{% render 'ajaxify-cart' %}
ajaxify-cart

Click Save.

  1. In the Snippets directory, click Add a new snippet:
  2. Name your snippet ajaxify-cart, and click Create snippet: Your new snippet will open in the code editor.
  3. In your new ajaxify-cart.liquid file, paste this code hosted on GitHub.

Caution: In the pasted code, replace all instances of .size() with .length. The .size() method is depreciated as of JQuery 1.8.

Click Save.

If you use Debut, then continue to the next steps:

  1. In ajaxify-cart.liquidfind the opening <script> tag at the top of the file. On a new line right below the opening <script> tag, paste the following code:

    window.onload = function() { 
  2. Find the closing </script> tag. On a new line right above the closing </script> tag, paste the following code:

  3. In the same file, find the following code:

    cartCountSelector: ‘.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count’, 
  4. Replace it with:

    cartCountSelector: ‘#CartCount’, 
  5. Click Save.
  6. In the Sections directory, click header.liquid.
  7. Find the following code:

    {% if cart.item_count > 0 %} 
  8. Replace it with:

    {% if cart.item_count > -1 %} 
  9. Click Save.
Shopify Expert
Shopify Expert

Need Live Support? Contact with Me

Best Shopify App to set up a complete referral program in your online store

💻 Welcome to * Best Shopify App to set up a complete referral program in your online store 🎁 referralcandy Shopify*

📝 Video Description: Hey There,

Welcome to my youtube channel. In this video, You are going to learn how to set up a complete referral program in your Shopify online store.

IF you are started your online business with Shopify and wanted to make more sales and brand your company then this video for you.

So Let get started.

First of all, Ask you a question :

Why You Need a Referral Program?
or What is the benefit of the Referral Program?

OK, I am going to give your answer.

  1. Information from friends is trusted more
  2. Easy promotion opportunities

65% of social media users learn about brands, products, and services through social networks, according to Nielsen.

70% of social media users hear about their friends’ and colleagues’ experiences using products and services.

  1. Referrals remind customers why they choose to purchase with your company

When a customer refers a friend, close colleague, or family member to a certain product or service, they explain the reasons why purchasing from your business is the best option.

  1. Referrals show that your business is performing well
    It is easier to refer someone to a good organization that offers quality products and services than to one with poor services and a bad reputation.
  2. Increased marketing scope
  3. Referral clients become more valuable to a business

Customers who have been referred to your business have already formed a positive attitude toward your company. This is because they have already been informed of the benefits that come from choosing to work with you based on being referred by someone they trust.

  1. Increased return on investment (ROI) value

If you like the video don’t forget to:

👍 Give It A Thumbs Up
🎯 Hit The Subscribe Button
👉 Don’t Forget To Share

📌Subscribe: https://www.youtube.com/c/FoysalAhmedWebDesigner?sub_confirmation=1
📌 Follow me on Facebook: https://web.facebook.com/foysalonlinetrainer
📌 Follow me Linkedin: https://www.linkedin.com/in/foysal-ahmed/
📌 Follow me on Twitter: https://twitter.com/foysalwordpress
📌 Visit my website: https://www.ecommercethesis.com
📌 Visit my blog: https://foysalahmedwebdesigner.blogspot.com
📌 Ask me quora: https://www.quora.com/profile/Foysal-Ahmed-23

💻 My Services: https://www.fiverr.com/users/foysalelementor 🚀

🎤🎤 You can also check out the below playlist: 👇

🛑 Shopify Tutorial: https://bit.ly/32LVD21

🛑 Elementor Page Builder Tutorial: https://bit.ly/2Kj7oUT

🛑 Digital Marketplace using Mayosis Theme: https://bit.ly/3eFelxq

Thank You 🙃🙃