Shopify Archives - eCommerce Thesis

Category: Shopify

How to add a contact form to a product page in Shopify

In this tutorial, I am going to show you – How to add a contact form to a product page in Shopify?

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>

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 ecommerce business. It;s 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 unnderstanding.

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

How To Add Instagram Feed On Shopify Store

Shopify is a commerce platform that offers a way to quickly launch your dream business and start selling to your customers. Instagram is a free social media platform for sharing photos and videos. 

1 billion Instagram users (official statistics), 1.16 billion estimated as of Q3 2020

According to Statista, In 2019, there were almost 815 million users who accessed the photo-sharing platform Instagram on a monthly basis. In 2023, this figure is projected to reach nearly 1.2 billion users, as the most recent forecast suggests.

As an entrepreneur, you can use Instagram for your online store or eCommerce business to sell more products by driving traffic.  90% of people now follow a business on Instagram.

In this tutorial, I am going to show you ” How to Embed Instagram Feed On Shopify Website? “

How To Add Instagram Feed On Shopify Website

This tutorial We will do this in 2 steps. First, we learn How to create an Instagram Feed then we will create the feed. 2nd We will add Feed in our Shopify store. Of Course, We no need any apps or hire any developer.

How To Create An Instagram Feed

Step. 1 – Log in to your Taggbox Widget account & you will see the dashboard

Step. 2 – On the dashboard click on the Add Social Feeds option to add feeds on your widget.

Step. 3 – A new pop-up will appear, choose “Instagram” as the source of feed (content)

Step. 4 – A new pop-up will come, enter the necessary details from which you want to collect content 

  • Hashtags
  • Handle
  • Mentions
  • Tags

Step. 5 – Click on the “Create Feed” option, and you will be asked to connect to “Instagram Business” to complete the process.

Step. 6 – Enter your login details & once Instagram is connected, you will get the relevant posts from Instagram to your widget.

How To Embed Instagram Feed To Shopify Website

Step. 1 – From you Taggbox Widget editor, click on the “Publish” option at the bottom left.

Step. 2 – Now choose “Shopify” as your website platform from the pop-up.

Step. 3 – Set your Feed width & height from the new pop-up & click on “Get Code.”

Step. 4 – Copy the given code & paste it in your Shopify website

Steps to add embed code on shopify website

1. Log in to your Shopify website

2. Under the Sales Channels, click on Online Store

3. Click on the Themes option & you will see customize option

4. Click on Custom content on the left side of the page

5. Then click on Custom HTML & paste the copied code

Tada! You have successfully embedded the Instagram feed on Shopify website. Once you add Instagram feed to website, you can see it live in action.

Shopify Expert
Shopify Expert

Add animate effect in Shopify drop down menu

You know, we can make our Shopify store more attractive and professional. To be honest I don’t like Shopify’s default menu style or design. First It does not open on hover. Customers have to click on the drop-down menu to open the sub-menu. Second, when the drop-down menu opens there is no animate effect.

In my previous tutorial with video I have shared “How to show Drop Down Menu on Hover Instead of Click – Shopify Debut Theme” and In this tutorial, I am going to show you “How to add animate effect in Shopify drop down menu

Add animate effect in Shopify drop down menu

The very first step is add a css class in Shopify theme. From Shopify Dashboard, navigate to your Theme editor

Step 1: Access theme editor

Step 2: Open  header.liquid file

Step 3: Open  header.liquid file and add dropdown-animate class in menu ul

Step 4: Open  css.liquid file and add below css code

/******** Animate Menu **********/


.site-nav--has-dropdown:hover .site-nav__dropdown {
   display: block;
}

.site-nav__dropdown { top: 100%; }

.site-nav > li > .site-nav__dropdown {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: block;
    transform: scale(0);
    transition: ease-out 0.3s;
}
.site-nav--has-dropdown:hover .site-nav__dropdown {
    transform: scale(1);
    background: var(--predictive-search-focus);
    border: var(--color-overlay-text-focus);
    border-radius: 5px;
}
.dropdown-animate
{
	border:none;
	display: block;
  	transform: scale(1)!important;
	height: 0px;
	overflow: hidden;
	padding: 0px;
	top: 180px;
	transition: all .3s;
}
.site-nav--has-dropdown:hover .dropdown-animate
{
	display: block;
	top: 100%;
	height: inherit;
}
Shopify Expert
Shopify Expert