Shopify Archives - eCommerce Thesis

Category: Shopify

Shopify is a commerce platform that allows anyone to set up an online store and sell their products. Merchants can also sell their products in person with Shopify POS. … Whether you sell online, on social media, in-store, or out of the trunk of your car, It has you covered.

More than a million of the world’s most successful brands trust Shopify to sell, ship, and process payments anywhere. It is a subscription-based software that allows anyone to set up an online store and sell their products.

This company was founded in 2006 by three Canadian, inspired by their poor online e-commerce experience to sell snowboard equipment.

Now it is one of the leading e-commerce platforms, with almost 20% market share.

There are over 100 free and paid themes available. The App Store contains over 3,200 apps.

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 add a contact form to a product page in Shopify

Shopify has a default contact page option to add a contact form where your visitor can fill out the form and submit it to send a message. But if you want to add a contact form to a product page in your store then It’s will be hard before following this tutorial.

A contact form is a short web-based form published on a website. Any visitor can fill out the form and submit it to send a message to the site owner.

In this Shopify video tutorial, I am going to show you How to add a contact form to a product page in Shopify without hiring any developer.

Don’t worry, You do need to learn to code or write any code for that. I make this video super easy and cool for you. Just follow this video and use the code from below by copy and paste.

Step: 1 Open Sections Folder

Step 2: Find product-template.liquid file and open it

Step 3: Add the following code to this file.

      
<div class="contact-form form-vertical pcf-ui">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>

          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
Shopify Expert
Shopify Expert

How to Edit Robots.txt File in Shopify ?

robotstxt file tells search engine crawlers which pages or files the crawler can or can’t request from your site. This is used mainly to avoid overloading your site with requests; it is not a mechanism for keeping a web page out of Google.

If you are Shopify user then you are laucky from today because now you can edit robots.txt file, which gives you more control over how search engines crawl your site.

Tobi Lutke, Shopify CEO, broke the news this evening on Twitter while adding that it might take until Monday for this feature to roll out to everyone.

All Shopify stores start with the same robots.txt, which the company says works for most sites, but now the file can be edited through the robots.txt.liquid theme template.

Site owners can make the following edits to the robots.txt file:

  • Allow or disallow certain URLs from being crawled
  • Add crawl-delay rules for certain crawlers
  • Add extra sitemap URLs
  • Block certain crawlers

Shopify recommends using Liquid to add or remove directives from the robots.txt.liquid template, as it preserves the ability to keep the file automatically updated.

Shopify Expert
Shopify Expert

How to add Modal Popup to Shopify without App

Popup is an awesome feature of any online store for an eCommerce business. It helps you to increase the conversion rate. With Popup, you can reduce abandoned carts and promote all significant events of the store to customers.

In this tutorial, You can learn. How to add Modal Popup to Shopify without App. You no need to hire any Shopify Developer. Watch my video tutorial for easy understanding.

Types of Popup

  • Newsletter Popup
  • Video Popup
  • Coupon Popup
  • Countdown Popup
  • Product Popup

Newsletter Popup

  • This template will convert your visitors into subscribers & customers.
  • You can add MailChimp, Aweber, GetResponse, Constant Contact, Benchmark Email Newsletter

Video Popup

  • This will play a video.
  • Support Youtube, MP4

Coupon Popup

  • If you want to offer customers a discount or special gifts with the coupon, please use this popup.
  • Add Countdown.

Checkout popup

  • Encourage customers to checkout by limited offers

Discount Popup

  • Discount order by coupon

Product Popup

  • Show a product with a special price and Buy now button
<!-- The Modal -->

<div class="popup-wrap">
		<div class="popup">
			<div class="popup-timer"><span class="seconds"></span> second(s) left</div>
			<div class="btn-close">x</div>
      <img src="https://d1wnwqwep8qkqc.cloudfront.net/uploads/stage/stage_image/47653/optimized_large_thumb_stage.jpg"/>
		</div>
	</div>
	.popup-wrap{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		display: none;
		/*transition: all 1.7s ease;*/
	}

	.popup{
		position: relative;
		width: 450px;
		height: 450px;
		background-color: rgba(0,0,0,1);
		margin: 100px auto;
	}
.popup img{width:100%;height:100%;}
	.popup-timer{
		width: auto;
		height: 25px;
		color: #fff;
		position: absolute;
		right: 10px;
		line-height: 25px;
		padding: 0px 10px;
	}
	.btn-close{
		background-color: #fff;
		width: 25px;
		height: 25px;
		text-align: center;
		line-height: 22px;
		position: absolute;
		right: -10px;
		top: -10px;
		cursor: pointer;
		transition: all 0.5s ease;
		border-radius: 50%;
	}
	.btn-close:hover{
		transform: rotate(360deg);
	}
$(document).ready(function(){

		$(window).load(function(){
			$duration = 15;
			$('.seconds').text($duration);
			$('.popup-wrap').fadeIn(1500);

			$myTimer = setInterval(function(){ startTimer() }, 1000);
			$('.popup .btn-close').on("click",function(){
				clearInterval($myTimer);
				$('.popup-wrap').fadeOut(500);
			});
			
			function startTimer(){
				$duration--;
				$('.seconds').text($duration);
				if($duration==0){
					clearInterval($myTimer);
					$('.popup-wrap').fadeOut(500);
				}
			}
		});
	});

Add Shipping ICON to Announcement Bar in Shopify

Are you trying to add a shipping icon to your Shopify online store announcement bar? In this tutorial, I am going to show the easy process to Add shipping ICON to the Announcement bar.

I am going to use Font Awesome for Icon. So first of all You have to go into your theme. liquid in your Layouts folder in Online Store > Themes > Actions > Edit Code

Open the file and look for the closing head tag and place this before it:

<script src="https://kit.fontawesome.com/f7cf0a6419.js"></script>
//place this script above the closing head tag 
</head> // <---- This is the ending head tag

Then open your header.liquid file in your sections folder and ctrl + f for “announcement-bar__message”. You should see this line:

<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

change that to this:

<p class="announcement-bar__message">{{ section.settings.message_text | escape }} <i class="fas fa-truck"></i></p>

Now there should be a little truck at the end of your message.

If my solution helped you, please click on the like button and Subscribe to My Channel!
If you’d like to make any edits to your store, please send me a personal message and we can discuss what you’d like to accomplish 😀

Shopify Expert
Shopify Expert