Laravel is a web application framework with expressive, elegant syntax. It is an open source PHP based framework. It uses the commonly known MVC (model-view-controller) architectural pattern. The key features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, utilities that aid in application deployment and maintenance, and its orientation toward syntactic sugar (easy to rea, sweet to the eyes of the programmer).
Laravel uses the powerfull yet easy to use Blade templating engine to render views. It has support out of the box for authentication systems and it is capable of working alongside any front-end framework like Vue or React.
Before moving onwards, make sure you have the latest PHP version installed on your system. You can read one of our previous articles to learn how to do that.
Depending on your operating system there are a few ways to install Laravel and get started. Here is the simplest way, using composer:
For managing dependencies, Laravel uses composer. Make sure you have a Composer installed on your system before you install Laravel. In this article, you will see the installation process of Laravel and composer.
Follow each step below to install it:
Step 1 − Visit the following URL and download composer to install it on your system.
https://getcomposer.org/download/
or a more complete documentation and an expanded list of operating systems, visit: https://getcomposer.org/doc/00-intro.md
Step 2 − After Composer is installed, check the installation by typing the Composer command in a new terminal window (command prompt)
Step 3 - Create a new folder dedicated to your projects, open that folder in a terminal window and type in the following commands:
composer create-project laravel/laravel PROJECT-NAME-HERE
cd PROJECT-NAME-HERE
php artisan server
Now if you visit localhost:8000 in your browser, you will see your new Laravel project up and running.
Next up is time to dig into coding. Laravel's project folder structure is easy to understand and easy to keep your code organized. All of the logic, including models, controllers, middlewares, https requests are contained in the /app folder. Routing, including api routes, are inside the /routes folder. Views, and other front-end related files are inside the /resources folder.
]]>
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.
What distinguishes PHP from something like client-side JavaScript is that the code is executed on the server, generating HTML which is then sent to the client. The client would receive the results of running that script, but would not know what the underlying code was. You can even configure your web server to process all your HTML files with PHP, and then there's really no way that users can tell what you have up your sleeve.
The best part about using PHP is that it is extremely simple for a newcomer, but offers many advanced features for a professional programmer. Don't be afraid to read the long list of PHP's features. You can jump in, in a short time, and start writing simple scripts in a few hours.
Depending on your operating system there are a few ways to install PHP and get started. Here are the simplest ways:
Afterward you will need to add it to the system's PATH.
Next, open up a terminal window ( command prompt ) and type: php -v.
This command should output the version of PHP you have installed. You are now ready to go.
First step for mac os users is to make sure you have "Homebrew" package manager installed. To check that, open up a terminal window and type brew -v.
If a version shows up, Homebrew is installed. If it is not, paste the following command in your terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
The second step is actually installing PHP using brew. In the same terminal window type:
brew install php
This command will install the latest version of PHP on your system.
To check if everything was in order, type php -v in your terminal and the outcome should be the current version installed. It is now ready to use.
First step is to make sure the package repos are up to date and the system is up to date:
sudo apt update
sudo apt upgrade
After that proceed to install the required dependencies, add the apt repository and add the GPG key:
sudo apt install -y lsb-release ca-certificates apt-transport-https software-properties-common gnupg2
echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" | sudo tee /etc/apt/sources.list.d/sury-php.list
wget -qO - https://packages.sury.org/php/apt.gpg | sudo apt-key add -
sudo apt update
sudo apt install php8.0
And that is it. PHP is now ready to use on your system. Type in php -v to check if it was properly installed and ready to use.
]]>Almost certainly every website uses images to express something or to enhance the visual experience of the visitor. As they say, "a picture is worth a thousand words". How would you imagine online shopping if there were no images for the product you are looking at, or how would a travel blog look like if it did not use any images to show all the beautiful views?
Well all those images have a direct impact on the page speed and overall performance of the website. Whenever someone visits your website, the browser needs to download that image and show it. Even if the images are compressed or use the latest encoding standards, all of the images need to be rendered in place at page load. So even if you visit a page that has a small banner at the bottom of the page, you have to wait for it do be rendered before even scrolling down to see it. The loading times only go higher if the visitors use a low bandwidth connection or a low-end device.
Lazy loading comes to the rescue. Its purpose is to prevent the render of any image outside the view at page load and only requests it at the moment it comes into view. For example when visiting Amazon, you will see the frontpage banner and some of the products at the moment the page loads, but as you scroll down, you will see all the images being loaded as you scroll.
Essentially it works in the same manner as a lazy person would. "Why should I do this task since nobody is looking anyway".
One of the metrics Google Analytics use is called "Bounce rate". It measures the time each user spends on each particular page of your website and calculates a percentage based on their behaviour. A higher bounce rate means lots of visitors just "bounce off" the page for some reason. Even if the content presented is relevant to the user, but the page is super slow to load, the user will leave the page before it even loads the content. Lazy loading all the images will decrease the bounce rate by making sure all the off-screen images do not render if they are not needed.
Also page speed score is affected. For the sake of example, we take a page with 10 large images, each having around 500Kb in size. Without lazy loading all 10 images will be downloaded and rendered at page load. That is about 5Mib of data transfer required only for the images and the user will not see anything on the page until they get loaded. On top of that if we put a slow internet connection or a low-end device with under 1Mb download speed, that is around 5 seconds of wait time only to load some images that are not even in the initial view. With lazy loading all images, the user will see the content on that page almost instantly and the images will load and render only when they are needed.
There are currently 2 approaches to lazy loading images, both of them having their pros and cons, but no matter the cons, lazy-loading is a must have.
Starting August 2019 google chrome supports lazy loading images without use of any extra javascript. Of course not by itself (that would be ideal), since as a developer you have to set the lazy attribute to each image.
Example:
Image without lazy:
<img src="dog.jpg" alt=".."/>
Image with lazy:
<img src="dog.jpg" loading="lazy" alt=".."/>
This approach is the easiest since it only requires some basic HTML knowledge to implement and the browser does all the heavy lifting.
The issue with this approach is that other browsers might not support this feature. To check browser compatibility you can use the Caniuse tool.
You can see the effect in the example below with 2 identical images, one using lazy and the other not using it. Check it out in different browsers.
Lazy loaded | Not lazy loaded |
This approach gives you as a developer more control over the images and more important it works across all browsers. There even are a few libraries that make lazy loading images as easy as crossing the road.
Ok, you might think that this is the best approach, choose a library, implement it and done. Well technically yes, but open source software like the above libraries tend to cover as many user needs as possible and may be bloated with unnecessary code that your website might not need.
For example, jquery-lazy adds 35 KB to a page’s size if you implement it for image lazy loading. Might not seem much, but if you have a website with 4 images, then it is a lot and will drag your page speed score further down since JavaScript is a more demanding resource than the image itself. In this case a more lightweight approach is needed.
Of course you are not required to use a library. If you are an experienced developer you can use plain JavaScript to DIY the lazy loading for your website.
To do this, you will need to attach event handlers on resize, orientationChange and scroll, check which images come into view and get the source from the data-src attribute, put it into the src value and eventually load the image. May be a lot of work, but this is the most lightweight approach.
The future of the internet is heading towards performance optimization and content quality. The days when you could just do whatever you wanted on a website and still work as supposed are starting to become history. Lazy loading images is part of this evolution and is a must have feature for any website.
]]>more than 1,000,000 businesses and growing every day. Due to the fact that it is so easy to use and no technical skills are required to start a business, owners have more time to focus on important matters like marketing strategies, product sourcing, improving conversions and so on, without having to meddle with coding, designing, hiring developers to build elements/features on the website.
Although setting up a store and start selling can be done in a short time, there are some features that can extend your store's capabilities and features, only available by installing additional software. In the Shopify ecosystem these are called Apps and can be found listed in the Shopify Appstore. At this moment there are more than 5,000 apps listed in the Shopify Appstore and finding the ones that will fulfil your needs may be a bit time-consuming.
In this article you will find a list of the top 5 types of apps your shop may need and the best ones from that category, as well as some alternatives.
Customers tend to rely on other people's opinions when confronted with any type of decision making. This also applies to customers visiting your shop. By having a review & rating system set up, your products will slowly gather reviews and ratings that other customers will see and aid in the process of taking a decision. So by by far this seems to be the most important matter to address and since gathering many reviews takes a long time, installing a review app should be the first thing to do.
Having a better optimized SEO store than your competitors will make the difference in the search results, since on the long term most of the customers that will reach your store will be organic visits, coming from Google, or other search engines. SEO also does not provide immediate results, so it is better to start installing these apps as soon as possible. Breadcrumb secondary navigation will help customers know exactly the path a user takes to a certain point, but most important it also provides the same information to search engines. Even if you do not want to display them on your storefront, having structured markup containing breadcrumbs as well is a must-have.
Dropshipping is a big thing today and lots of Shopify business owners run a dropshipping business. When starting, the most important matter is finding products to sell and people to sell them to.
Creating a shop for a single product or a handful of products may seem an easy task, but most businesses feature a large inventory composed of several hundreds or thousands of products. Adding them manually can take a huge amount of time, thus not being productive. Also importing products or content from other platforms like Etsy or Woocommerce can be atedious process if done by hand.
Your online store is just one channel for selling your products. For a much larger audience you must bring your products to other channels as well. Facebook, Instagram and Google shopping. Each app is mad by Shopify and are free to install. You only pay for the advertisement campaigns.
These hand-picked apps will help you get ahead of your competition from the very start, and also have a very low impact on the store performance and speed score. There are as well other apps that will definitely help you but you can install them as time goes by.
To sum it up here is a list of the free Shopify apps that will help you get started much more easily. This list includes some of the apps presented above and some others.
As time goes on the list will grow with apps that are noteworthy for helping you right at the start.
]]>Such a place is the so-called announcement bar at the top of the website. Some themes may already have this feature implemented and it is just a matter of adding some text to it, but this article will explain how you can add it if your theme does not have this feature.
Of course you can choose an app from the Shopify Appstore to do this for you, but for such a small and simple feature I do not recommend installing any additional apps since that will impact the store's speed and performance
This guide will help you create a simple announcement bar that will work with any theme structure or configuration. Also this guide requires editing the theme's code so before venturing onwards, please make sure to make a backup of the theme, or simply create a duplicate and work on that.
First step is creating a new section:
Second step is including the new section on the storefront:
The third and final step is to initialise the new section and announce something:
If the bar does not show up at all, make sure the {%- section 'announcement-bar' -%} is present in the theme.liquid file and the asset is saved.
If the bar shows up lower than the top of the page, for example under the menu, make sure to include the section higher in the theme.liquid file.
For other cases, you can contact me and I will provide a solution.
{% if section.settings.show_announcement %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.color_bg }};
text-align: center;
position: relative;
z-index: 10;
}
.announcement-bar--link:hover {
{% assign brightness = section.settings.color_bg | color_brightness %}
{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
{% endif %}
}
.announcement-bar__message {
color: {{ section.settings.color_text }};
display: block;
font-size: 1em;
font-weight: 600;
padding: 10px 22px;
}
</style>
{% if section.settings.link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
{% endif %}
<p class="announcement-bar__message">{{ section.settings.text | escape }}</p>
{% if section.settings.link == blank %}
</div>
{% else %}
</a>
{% endif %}
{% endif %}
{% endif %}
{% schema %}
{
"name": "Announcement Bar",
"settings": [
{
"type": "header",
"content": {
"da": "Meddelelseslinje",
"de": "Ankündigungsleiste",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"hi": "घोषणा बार",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"ms": "Bar pengumuman",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pt-BR": "Barra de anúncio",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "show_announcement",
"label": {
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"hi": "घोषणा डिखाएं",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"ms": "Tunjukkan pengumuman",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pt-BR": "Exibir anúncio",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"da": "Kun startside",
"de": "Nur Startseite",
"en": "Home page only",
"es": "Solo página de inicio",
"fi": "Vain kotisivu",
"fr": "Page d'accueil uniquement",
"hi": "केवल होमपेज",
"it": "Solo home page",
"ja": "ホームページのみ",
"ko": "홈페이지만",
"ms": "Halaman utama sahaja",
"nb": "Kun på startsiden",
"nl": "Alleen startpagina",
"pt-BR": "Apenas na página inicial",
"pt-PT": "Apenas a página inicial",
"sv": "Endast hemsida",
"th": "หน้าแรกเท่านั้น",
"zh-CN": "仅主页",
"zh-TW": "僅限首頁"
},
"default": true
},
{
"type": "text",
"id": "text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "Meddel noget her",
"de": "Hier Ankündigung platzieren",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fi": "Ilmoita jotakin tässä",
"fr": "Annoncer quelque chose ici",
"hi": "यहां कुछ घोषित करें",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"ko": "여기에 공지하십시오",
"ms": "Mengumumkan sesuatu di sini",
"nb": "Kunngjør noe her",
"nl": "Kondig hier iets aan",
"pt-BR": "Anuncie algo aqui",
"pt-PT": "Anunciar algo aqui",
"sv": "Meddela något här",
"th": "ประกาศข้อความที่นี่",
"zh-CN": "在此处进行公告",
"zh-TW": "在此公告資訊"
}
},
{
"type": "url",
"id": "link",
"label": {
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"hi": "लिंक",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"ms": "Pautan",
"nb": "Kobling",
"nl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"zh-CN": "链接",
"zh-TW": "連結"
}
},
{
"type": "color",
"id": "color_bg",
"label": {
"da": "Bjælke",
"de": "Leiste",
"en": "Bar",
"es": "Barra",
"fi": "Palkki",
"fr": "Barre",
"hi": "बार",
"it": "Barra",
"ja": "バー",
"ko": "바",
"ms": "Bar",
"nb": "Felt",
"nl": "Balk",
"pt-BR": "Barra",
"pt-PT": "Barra",
"sv": "Fält",
"th": "แถบ",
"zh-CN": "栏",
"zh-TW": "橫條"
},
"default": "#1c1d1d"
},
{
"type": "color",
"id": "color_text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": "#fff"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
]]>
If you know how to work with the code editor follow these steps to remove it from the code. No coding skills are necessary since we are just erasing a small part of a line of code.
For most of the themes on Shopify it will look like this:
<small class="site-footer__copyright-content site-footer__copyright-content--powered-by">{{ powered_by_link }}</small>
However there may be variations in the code and the footer may is a snippet and not a section. In this case you will find in the snippets folder and not in the sections folder. Or the powered_by_link looks different than in my example ( the example is from the "Debut" theme ). If you believe you are not sure about what to erase, my advice would be to just follow the first solution as it is surely fail-safe.
]]>Once submitted, the products will be made available to all of the Google services, but only if the submissions are error-free of course. One of the most common errors any merchant can get is the Mismatched value (page crawl) [price] error.
This means that the initial specified price does not match the value present on the shop. Google periodically crawls each product page and looks for information in the structured data present on the product page.
Schema structured data is an advanced markup code added to your website. Websites with Schema are easier for search engines and other crawlers to index, meaning it’s easier for them to understand the content of your store, and serve it to more relevant people. In this particular case it is also used to match information provided in the Google merchant console, with the information on the shop.
Usually the Mismatched value (page crawl) [price] error is prone to show up for products containing multiple variants that differ by size, colour or small details and each of them has a different price. Even if the default price is the same for all of them, one of them may be on offer for a limited time and a mismatched value error can come up.
So to take things one at a time, the first thing to check is that your website does indeed have a valid schema structured data markup present on the product pages. This is a mandatory requirement since Google will use it to sync all data.
To check this, you can use the structured data testing tool. Just copy-paste the product page url in the tool and it will show the existing structured data markup. If any of course.
If your website does not have any structured data markup, now would be a great time to add it.
For Shopify store owners this is as easy as installing an app: Schema & Breadcrumbs. For other platform users you can follow the official guidelines in building a comprehensive structured data markup for your store.
If your store does have the markup set up but it shows errors, it will be a good time to fix them now.
Even if the structured data markup is properly set up, it does not mean this particular error will go away.
One way of getting rid of it is to manually update the prices in the merchant center for all the products and variants, but that would mean some tedious work since every time you have an offer or change something to a product, you have to manually change values in the merchant center.
The more automated approach would be to yet again, change your structured data markup and instead of one product having an "Offer" attribute for each variant, you should make a "product" object for each variant and make use of the "inProductGroupWithID" property to group them on the main product.
An example using "inProductGroupWithID" will look like this:
[
{
"@context": "https://schema.org/",
"@type": "Product",
"sku": "44E01-M11000",
"gtin14": "98766051104218",
"inProductGroupWithID": "44E01",
"image": "https://www.example.com/coat_small_green.jpg",
"name": "Small green coat",
"description": "Small wool green coat for winter",
"brand": {
"@type": "Thing",
"name": "Good brand"
},
"audience": {
"@type": "PeopleAudience",
"suggestedGender": "unisex",
"suggestedMinAge": 13
},
"color": "green",
"size": "small",
"offers": {
"@type": "Offer",
"url": "https://www.example.com/coat?s=s&c=g",
"priceCurrency": "USD",
"price": 39.99,
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock"
}
},
{
"@context": "https://schema.org/",
"@type": "Product",
"sku": "44E01-K11000",
"gtin14": "98766051104201",
"inProductGroupWithID": "44E01",
"image": "https://www.example.com/coat_small_darkblue.jpg",
"name": "Small dark blue coat",
"description": "Small dark blue coat for winter",
"brand": {
"@type": "Thing",
"name": "Good brand"
},
"audience": {
"@type": "PeopleAudience",
"suggestedGender": "unisex",
"suggestedMinAge": 13
},
"color": "light blue",
"size": "small",
"offers": {
"@type": "Offer",
"url": "https://www.example.com/coat?s=s&c=lb",
"priceCurrency": "USD",
"price": 39.99,
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock"
}
},
{
"@context": "https://schema.org/",
"@type": "Product",
"sku": "44E01-X1100000",
"gtin14": "98766051104391",
"inProductGroupWithID": "44E01",
"image": "https://www.example.com/coat_large_darkblue.jpg",
"name": "Large dark blue coat",
"description": "Large dark blue coat for winter",
"brand": {
"@type": "Thing",
"name": "Good brand"
},
"audience": {
"@type": "PeopleAudience",
"suggestedGender": "unisex",
"suggestedMinAge": 13
},
"color": "light blue",
"size": "large",
"offers": {
"@type": "Offer",
"url": "https://www.example.com/coat?s=l&c=lb",
"priceCurrency": "USD",
"price": 49.99,
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock"
}
}
]
The main differences here are the square brackets that contain all the product objects, the inProductGroupWithID property that is used to give information regarding to the main product id and also the color and size properties that give information about the differences between the variants.
This markup will result in a "product" object for the main product and each of the variants, each of them having different url's, prices, or other attributes, but they will be all grouped under the same main product.
Following this approach will "instruct" Google to crawl each variant individually and the Mismatched value (page crawl) [price] error will now go away for each of the products.
Know a more interesting approach? Feel free to let us know in the comments below.
]]>An average website can bring in anywhere between $0 to ~$3000 each month. It is a big spread, yes, but the income is strictly related by how much traffic your website has each month. The other factor that influence the actual revenue is RPM, which is calculated based on a combination of your traffic, CTR (click-through-rate), and CPC (cost per click).
Let`s assume you have a RPM around $3 and you get 1000 visits per day, the average earning will be $3/day which gets to around $90/month. Pretty low and maybe nowhere near what you would have thought of, but there is still hope.
Increasing traffic is one way of boosting revenues. Of course no one will visit a website without any interest, so content-writing is your friend. Always bring fresh new readable content to your website and visitors will sure to follow. Writing a nice blog post every other day for a year will grow your article count by ~300, which means more traffic. Taking the above example with a RPM of $3, which is quite low, it can go as high as $50 for high-tier websites. Increasing the daily traffic from 1000 to 10.000 will mean your website can bring ~$30 each day and ~$900 each month. It already starts to look better.
Another way of increasing earnings is trying to increase your RPM. To better explain this I am going to use an example.
A general blog, even with thousands of articles, will have a general lower RPM than a niche tech blog for example. The ad publisher has to pay more to publish his electronic gadget ad ( as an example ) on the tech niched blog, than on the more general blog. This is determined by lots of algorithms analysing what type of traffic goes where. So having a more niched website will bring up the RPM and having an RPM near $10, that would mean ~$100/day at only 1000 visitors each day.
Increasing both traffic and RPM would mean the best possible way to gain more. However do not concentrate solely on doing this. Traffic will come naturally if you keep adding fresh content and RPM will go up if you keep adding niched and quality content.
Never try to create a new website for the sole purpose of generating income through AdSense. It will never work. It may not even get approved by Google in the first place.
If you do everything right, your website may get up there in the top 1% of websites that can generate enough income to make a living out of them.
Most of the websites remain, though, in the rest of the 99% that make a few $ each month or even less, not enough for anything.
]]>The COVID-19 global pandemic is likely the biggest "event" of 2020 and it will have implications that last well into the following years. Social distancing measures, restaurants, shops, small businesses shutting down for safety reasons are now something common for each and every one of us.
This may also be the very catalyst that would drive people to shop online more and go out in brick-and-mortar stores less.
A considerable uplift in eCommerce B2C shipments, can be seen, at both local and global levels which has specifically been driven by the COVID situation and the fact that all traditional bricks and mortar stores have transitioned to online. Everyone simply has to order online without the choice of physically going to a store.
The number of online shoppers went crazy up right at the beginning of the pandemic when the WHO announced the severity of the situation and people started ordering loads of medical supplies online. As the demand increased, so did the prices.
Humans respond to crises in different ways. When faced with an uncertain, risky situation over which we have no control, we tend to try whatever we can to feel like we have some control.
The coronavirus outbreak is not only transforming the way consumers shop but also how they pay for their purchases. Contactless payments received an unprecedented boost during the pandemic, seen by consumers as a cleaner way to pay in-store. Consumers are also trying out new payment methods while purchasing from E-commerce websites, and favour those methods that have the strongest protection against fraud losses.
Overall, total payment volumes are expected to decrease in 2020 due to losses in travel and in-store segments, but resume growth in 2021 and benefit from the shift to cashless payments and online shopping.
The SARS crisis in 2003 is widely known for kickstarting Alibaba’s and other Chinese companies’ e-commerce successes in Asia. Alibaba launched its online marketplace for consumers during the SARS crisis when many Chinese were at home in quarantine. Likewise, Chinese JD Multimedia (now JD.com) migrated the business from offline to online channels in response to SARS and is ow one of China’s largest retailers. The SARS pandemic accelerated the behavioral change of the internet becoming the mass medium in China.
The COVID-19 crisis will result in permanent change to our shopping behavior and ways of conducting business
As people are making buying choices based on new and ever-changing global and local circumstances, the product categories that are being purchased are also changing.
Market research company Nielsen has identified six key consumer behavior thresholds tied to the COVID-19 pandemic and their results on markets.
These are:
As we progress through these stages, the items people choose to buy and the product categories that thrive continue to change.
]]>Seems like an easy task, but as soon as you get the file from AdSense you will notice there is no way to upload it to Shopify and be accessible at the root of the website ( https://website_url/ads.txt ).
There is, however, a workaround for this issue. To make it work just follow these steps:
By creating this redirect rule, the file is now accessible at the root url, thus getting rid of the warning.
It will take time for Google to stop showing this warning, it will not be instant, but it is the only working solution.
]]>This article will better explain how to create the best balance between earning through ads and maintaining a professional looking online store.
In case you have already embedded Adsense on your Shopify store, you may have noticed a quite significant drop in the page load speed times. It is a normal behaviour since most of the ads shown on the store come from different locations, whole new JS libraries need to be loaded, there is more graphical content on the front-end and so on. This may be quite a big issue, especially on a website that serves as an online store, where performance and a clean design is a key factor for a higher conversion rate.
Also showing ads amongst your products is not such a great idea. The primary objective of the store is to sell your products, so advertising for others may be bad for your sales.
The following steps require a small amount of technical knowledge. In case you already placed the Adsense code in your "theme.liquid" file you are qualified enough.
You can read more about how to add Adsense on Shopify here.
Shopify, by offering such a neat "templated" website structure, gives us, the end-users, the ability to decide exactly where any element will load. Each of the page types on a store uses a template. For example the product page uses the logic written inside the templates/product.liquid file. These templates names are globally accessible inside the code by calling "template.name".
To achieve the best balance between performance and ad revenue, Adsense should only be allowed to place the ads on the blog and article pages. These pages are likely to have the least graphic content and a lot less JavaScript logic running in the back so they are fast by default. Also by not showing ads on your homepage, collections and product pages, you can "split" your website in the professional-looking store and the blog. This way you are most likely to make the most of both the store and the ads showing on your blog.
To achieve this behaviour you simply have to add a conditional statement around the Adsense code in your "theme.liquid" file:
It should look like this:
By doing this, Shopify will load the Adsense script only inside the blog and article templates. Simple as that.
Also you can choose any templates to show the ads. It is completely up to your decision.
]]>Let`s take the hero banner/slider as an example. Almost all of the themes feature this section. To use it you select the section from the list, add it to the site and then you add blocks. Each block represents a slide/banner and each of these blocks has some settings like image, title, subtitle, link, buttons and so on.
But what if you want to feature the same banner/slider on a different page like your contact page? Well you can`t; at least not by default, but you will now learn how to make this work.
The following steps require some technical knowledge and you should be used to working with Shopify`s code editor and liquid language.
We will use a rich text section for this example, just to keep it simple. I have created a section called "RTE example" that holds one type of block: richtext. Placed on the homepage it works like any other section. Add blocks and the content shows up on the page:
The code looks like this:
{% if section.blocks.size > 0 %}
<div class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="rte text-center">
{% for block in section.blocks %}
<div>
<p>{{ block.settings.richtext }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
{% schema %}
{
"settings": [],
"blocks": [
{
"type": "richtext",
"name": "Test block",
"settings": [
{
"type": "richtext",
"id": "richtext",
"label": "Featured text"
}
]
}
],
"presets": [{
"name": "RTE example",
"category": "tests"
}]
}
{% endschema %}
In order to add the same section on a normal page, like the contact page, we need to include this section inside that template. Usually each theme has a template file for the contact page called "page.contact.liquid" under the templates folder. That is the one I am using. However you can create a new template for each resource type ( page, collection, product...).
To place the section inside the template:
Now if you choose to customize your theme and navigate to the page template you just altered, you will notice the section.
In some cases by doing this workaround, the same contents of a section may be automatically rendered on each template. To fix this you need to create an identical section for each usage. Taking my example: "rich-text-example_contact.liquid" for the contact page and "rich-text-example_product.liquid" for the product page.
Also the HTML code can be moved in a snippet to keep the code cleaner and easier to maintain.
The above example used a simple rich text section with only one type of block and no settings. However if you do find yourself in a more complicated situation and the above guide does not work for you, feel free to leave a comment and I will make a complete guide that will also cover your particular case.
]]>
A very common warning, especially for merchants, that Google can throw is the missing product identifier one. Google says that a product`s structured dat should contain one of gtin, mpn, isbn global identifier.
What are global identifiers?
Product identifiers are a series of numerical or alphanumerical digits - a barcode assigned to a product. They help to identify and recognize a specific product.
Product Identifiers consist of a unique barcode to locate products online. Usually, they include Global Trade Item Numbers (GTINs), Manufacturer Part Numbers (MPNs) and brand names.
GTIN, or Global Trade Item Number is used to identify trade items worldwide. Significance of GTINs is about their global role.
They help Google match products to catalog. That increases the chance of showing products up in relevant search results.
MPN is a manufacturer-assigned, alphanumeric value. It is used to identify a product among other products from the same manufacturer.
An MPN is required for all products that do not have a manufacturer-assigned GTIN. Exceptions include custom made products or products that don’t have a clearly associated MPN
BRAND attribute is simply product's brand name.
This globally referenced UPI is mandatory for all products that have a clear brand name.
These identifiers essentially define the product you are selling. They distinguish products and help match search queries with your offers.
How do I fix this issue?
Almost certainly merchants that stumble upon this issue use a CMS for their webshop. Like Wordpress(Woocommerce), Shopify, Magento...etc.
The following steps will require some technical knowledge and implies messing around with your website`s code, so before making any changes, make sure to create a backup of the file you are going to work on to prevent any damage. Or you can always look for a professional that also deals with small tasks like this.
First step towards fixing this issue is to log in to your shop`s admin and reach the code editor. All CMS platforms use a templating form of structuring content, so this means there is for sure a product template file inside the code. For Shopify, this file will be called product.liquid and will be found inside the templates folder. Other CMS`s will probably have other folder structures, but it should be fairly simple to identify the template.
After finding the said template file, it will be fairly easy to identify where the structured data is located. There are two possible types:
<div itemtype="http://schema.org/Product" itemscope>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",.......
If your website uses micro-data:
If your website uses JSON+LD structured data, the code may reside inside the product template, or in a separate file. In either case you should identify the code in order to modify it.
The steps are the same as above. Insert the following right below the "description": line: "gtinNUMBER": "BARCODE", and as above replace the NUMBER and BARCODE with your values. Save and then test to see if everything looks ok.
This will make this warning go away as Google now has enough info about the product you are selling.
]]>Google Analytics is a helpful and free tool that helps you understand, using metrics and data, how your website is performing as a whole. It is the industry standard when it comes to gaining insights and setting benchmarks for your website performance and effectiveness.
With the Google Analytics tool, you can measure website traffic, conversion rates and ad performance. You can also use this tool to gain knowledge about your current audience, what kind of content they are looking for, what content they interact with most and how they’re engaging with your content.
Shopify comes with its set of analytics right in your admin panel and it does offer quite a lot of information regarding user visits and their behaviour on your website. They even offer a Live View that pinpoints where the visit is coming from and different colors for converted visitors, sales tracking, conversion funnel and so on. So their tool is also quite complex and offers lots of data.
So why do you need another set of data from Google if you already have analytics? Well Google provides lots of information regarding ways to improve your marketing plan by giving you paths for trackable results, they present your data in easy-to-digest ways, and they give you the data that only Google can give you — which is, really, the only data you need considering Google receives more than 60,000 searches every second on any given day.
So in order to use Google Analytics on your Shopify store follow these steps:
Make sure to copy only the code and no extra content or HTML content.
That is it. You can now go to your Google analytics dashboard where you will see your new property.
The best part is you can also download their mobile Android app (not sure for iOs) and you can have all that information with you everywhere.
]]>
For most of the users that currently have snippets of code that used data-vocabulary.org, this will translate at first into a warning notification on your Search Console with a message looking like this: "data-vocabulary.org schema deprecated".
First of all let us understand what data-vocabulary.org or schema.org is. Or even what is structured data and how it helps us and where is it located.
Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on. Google uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general.
Data-vocabluary.org data resides inside the HTML code of your website and looks like this:
<div itemscope itemtype="http://data-vocabulary.org/breadcrumb">...</div>
Schema.org data type looks quite similar, but it is the supported type now:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">...</ol>
Notice how data-vocabulary uses <div> to declare breadcrumbs then <span> and schema.org uses <ol> (ordered lists) and then <li> (list item). This is just a simple reason Google chooses schema.org type. It is much more better organized as a list than divs.
Before April 6th 2020 users that use data-vocabulary.org will receive a warning in their search console, but after this date the warning is replaced by an error. Also after this date data-vocabulary structured data will no longer generate rich results snippets.
Fixing the "data-vocabulary.org schema deprecated" error/warning
If you are using a CMS like Shopify or Wordpress that use templates for different pages it is simple:
For non-CMS users the solution is exactly the same, except you will most certainly have the code structured in another way. Find all data-vocabulary.org values and replace them with schema.org.
A more advanced approach could be to replace the micro-data with JSON-LD schema. Micro-data resides inside your HTML code and is quite hard to manage as your website scales. JSON-LD schema can stay inside a single file and included in all the pages. This makes it extremely easy to maintain and with some clever coding it can even generate data dynamically. Also Google states that although it supports both micro-data and JSON-LD schema, the latter is prefered.
No matter the approach you chose to handle this issue, make sure to have only one type of structured data installed on your website, as multiple instances of the same thing will cause conflicts or errors, or maybe Google will ignore all of them and not generate rich snippets.
]]>Having this issue does not mean your page does not get indexed by google. It will get indexed, but Google will never generate rich results snippets for it, no matter how high it ranks. Rich results snippets can make quite a difference in traffic and conversion rates as visitors will most likely follow a link from Google that has more information related to it such as ratings and prices right in the search results.
These snippets are generated by search engines if your website offers any type of structured data associated with the items on each page. The most commonly used type is schema type. It is easier to maintain and write.
A typical product item`s schema will have these attributes:
There are more attributes that can be used, but the above list covers those that are necessary to generate a rich result snippet. The error will show up in case one of those properties are missing from your schema structure.
This issue did show up at some point fore some people even if the structured data contained all the properties. After some intense troubleshooting we found out the issue was caused by some <meta> tags with "price" itemprop in the wrong place. Google understood that there was a price on the page, but the offers were not declared. The solution was to remove all the HTML micro-data from the website and use schema structured data instead.
Solving the issue
Even if you do not have values for any of those fields, at least one of them should be present in the schema structure. Otherwise you will only get errors and no benefits.
The Offers attribute is the easiest to use since your products must have prices. In order to solve the error if you are using schema structured data, use the code below and insert it inside your product object and change the variables with your product`s details.
The Offers should look like this:
"offers": {
"@type": "Offer",
"availability": "https://schema.org/InStock",
"priceCurrency": "USD",
"price": "22.35",
"priceValidUntil": "2021-02-23",
"itemCondition": "https://schema.org/NewCondition",
"url": YOUR_PRODUCT_URL,
"image": "PRODUCT_IMAGE",
"mpn": "MPM",
"sku": "SKU",
"seller": {
"@type": "Organization",
"name": SHOP_NAME
}
}
The above solution, however, works only in case you are using schema structured data. It is possible that your store has HTML micro-data inside the markup. In this case, my recommendation is to remove all that micro-data and switch to schema structured data.
If you do choose to keep using micro data, you can find below an example of offers written with micro-data. In order to use the code snippet, copy-paste it on your product page, somewhere at the beginning of the file.
<div itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
<link itemprop="url" href="https://example.com/anvil" />
<meta itemprop="availability" content="https://schema.org/InStock" />
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
<meta itemprop="price" content="119.99" />
<meta itemprop="priceValidUntil" content="2020-11-05" />
<div itemprop="seller" itemtype="http://schema.org/Organization" itemscope>
<meta itemprop="name" content="Executive Objects" />
</div>
After adding the offers information to the product object, you can use Google Structured Data Testing tool to check everything is working fine. You will still see some warnings stating that the review field or aggregateRating field is recommended and to add values for them. These are just warnings and if you do not have real values to add you can leave them like that.
If you do not get any more errors while testing the page, you can go back to your Search Console and submit the pages for validation. Even if you have some warnings, Google will generate rich results snippets for your products.
Make sure to check which of these approaches suit your website. Do not mix them, as that can also cause unwanted errors or warnings.
]]>Times have changed since then and now everything should be done properly, as the consumer is the one that gives your website its power. If by any means you try to trick the system, you get penalised. In order to stay on the path and do things properly, as a webmaster you need to use tools that provide information. Any webmaster`s portfolio of tools used for their website should include Google Search Console.
Google Search Console is a free service offered by Google that helps you monitor, maintain, and troubleshoot your site's presence in Google Search results. You don't have to sign up for Search Console to be included in Google Search results, but Search Console helps you understand and improve how Google sees your site.
Search Console offers tools and reports for the following actions:
By using this tool you will gain insights for how your website/webshop is performing and most important, if you have any errors or warnings that may cause problems.
The most common errors or warnings you might receive from Google are:
These errors or warnings may appear to any website owner wether it is a blog or landing page or shop. However there are other errors or warnings that are specific for each type of website. The most common ones occur to shop owners, as the product pages are more complex than the average blog post or simple page. Most of the CMS providers like Shopify or Wordpress offer pre-built themes. These themes at the moment of their design usually featured HTML micro-data for each page template. These micro-data attributes provide details to search engines as to what objects are featured on that page. They are designed to offer a general insight about them and are often missing certain information.
As I have stated above, most of the themes available for the most-known CMS already use micro-data HTML attributes. I believe there is no best-practice for which is best, but I believe that JSON+LD schema is a bit easier to manage and write. It simply has a better structure.
The downside of installing JSON+LD schema on an existing theme that already has micro-data in it, is that you then have to manually remove al the micro-data tags in order to keep a clean and error-free website. This has to be done manually form the website`s code itself. JavaScript can also be used, but that will have a huge impact on the page speed load because it has to loop on each element on the page and remove attributes on each page load so I strongly advise against using such a solution.
Also by using JSON+LD schema you can easily have all the markup written in a small snippet file in your code with conditional statements and include it in the header of the page. In this case you only have one single file that holds all the schema so it is much more easily to maintain or modify. The same file can contain information about the website itself, organization, products, pages, blogs, blog posts and other improvements needed.
For Shopify store owners there is an app, Schema & Breadcrumbs, that adds Schema to your shop, along with breadcrumbs navigation and the best part is you get assistance in removing deprecated tags or conflicts. Just ask for support and you will get an error-free search console in no time
The most common errors or warnings Search console can report are not hard to solve as it is a tool for everyone, but even so it is quite easy to break something when messing around with the code, so if you do not know exactly what you are doing it is always better to ask for assistance.
]]>Google AdSense provides a way for publishers to earn money from their online content. AdSense works by matching ads to your site based on your content and visitors. The ads are created and paid for by advertisers who want to promote their products. Since these advertisers pay different prices for different ads, the amount you earn will vary.
You offer ad spaces on your website, the highest paying ads appear on your offered spaces and then you get paid for that. Simple as that
Even if you run an online store, you may want to add an extra income in your pockets by placing some ads. It does not cost anything to do so and Google`s ads are not even that intrusive and you can choose where and how to appear, or just leave them automated.
Setting everything up
This was all the initial setup necessary. Go back to AdSense page and tell Google you uploaded the code and it will begin the verification process. This means it will verify if your site complies with their policies, if it has enough content and so on. It typically takes about a few days to a week to process, but it may take longer.
If your site does get the OK from them, you should start seeing ads on your sites within a few hours.
However you will get a warning message on your AdSense account page that will tell you to solve an issue with the ads.txt file, or your income will be affected. You have to upload a file on the root of your site, that has to be accessible on the path https://example.com/ads.txt. This may sound like nothing, but Shopify does not let you upload files/assets like that. All the files and assets are served over cdn (content delivery network), so the route to the file will look different.
Here is the solution to this issue:
Now if you go to https://yourShop.com/ads.txt you will see the file. AdSense may however notify you in the future about this issue, but the warnings go away quickly. This is somewhat a workaround, but the only working solution for Shopify so it is normal to get these warnings now and then.
Final thoughts
There are though a few cons for using ads on your website, be it on Shopify or any other platform.
The first and most important is that if you do have an actual shop running, those ads might cause customers to leave your website by clicking one of the ads. Think of it this way: you have a shop selling phone cases and while browsing through them, a customer sees an eye-catching ad for another similar product from one of your competitors and clicks on it. You do get paid for the ad click, but you will probably lose the customer if he buys from another site.
Performance is the second issue. Even if you do have 1-3 ads showing up on each page of your website, they still have to be loaded. That means a few more javascript files and graphics that load at page load or shortly after. This will cost your website a few good points in terms of page speed load, no matter how optimized it is before adding ads to it.
Another issue that comes to mind is kind of related to the first one. Having an online store is all about selling your own products and trying to reach out to as many potential customers as one can. It surely is not quite professional to show ads for different stuff among your own products. However if your website is more blog/other content oriented, this will be your only source of income.
Putting all the pros and cons in a balance, it is up to you to decide if working with AdSense is a good or bad thing to do.
Find out more about how to balance earnings and performance for your store by reading more in our next article: Make the most out of Google Adsense on your Shopify store
]]>
Search engine optimization is a process to improve website visibility and ranking in search engines. Every website owner tries to do its best to rank higher and be ahead of competition. It takes a lot of work and time to do and the results do not show right away.
Many of you may have asked yourselves the question: "How long does it take to see any results?".
A lot of SEO firms will explain you that it takes 4 to 6 months to start seeing results. That’s generally accurate, but bear in mind this is when you start seeing results, and SEO results grow over time.
It takes so long mainly because there are a lot of factors to be considered when ranking a website. Before your website can appear on the Google search engine, it has to be indexed first. While this doesn’t really mean you should have so many pages ranked on Google, It means having quality pages indexed. There are studies that point to a relationship between indexed pages and rankings. The more quality pages rank, the better but don’t fall into the trap of creating pages for the purpose of ranking.
Contents are the major key to ranking on Google. In short, it is the only factor that we SEO experts can vouch for when it comes to ranking factors. But then not any type of content gets you to rank. Your content has to do/give something extraordinary to the person reading it. Your content can make or destroy all your SEO efforts. Hence your content needs to be original, and unique, have at least 1000 words and well presented for readability.
A factor you need to keep an eye out for is the competition level in your niche. It could be extremely hard to rank when thousands or more websites already exist and rank well in the same niche. The only possibility is to have something amazing in terms of content so people would prefer your website. Hard to achieve, but doable.
The age of the domain also plays an important role in SERPs (search engine result page rankings). Search engines tend to trust more an old domain, without penalties, than a newly created one. It would take a new domain +6months to achieve what an old one could have in the first weeks. This practice is encouraged by black-hat SEO doers, so it is not actually on the list of best-practices.
Target audience. It does matter wether you target a specific audience like a geographical region, or a more larger audience. Targeting a small region may actually help you rank faster for a simple reason: searching for "Pizza in New York" might actually put you restaurant in the top results, but searching for "Pizza" at a global scale, will most certainly not list your website. But this metric is relevant for local businesses only. If you are a blogger, you write content for everyone, not only for your friends in New York.
Handling SEO for your website can be split up in 3 steps:
SEO is not an easy task, and not everyone knows how do deal with it. Even if you use a CMS site builder like Wordpress or Shopify, you still have to take on SEO by hand.
There are though, a lot of apps and tools that help by automating some tasks for you, such as optimizing images, adding schema markup, beautifying urls and so on.
Or you can always contact a SEO expert or a company that deals with SEO to help you out, but this solution is quite expensive because, as you already know, SEO does not provide immediate results and it needs constant work.
A common mistake is to abandon SEO work after a couple of weeks or sooner after seeing little to no results. If you do have faith in your content and feel it has to be in the top, then never abandon SEO work. If your website were to be a plant, SEO would be the water and care you offer it. It takes a lot of time, but after you plant the seed, it grows until everyone sees it.
]]>After completing a purchase on any store powered by Shopify, the customer is redirected to the order status page, or "Thank You page" as most of us call it. It is the last step of a sell, telling the customer something nice and shows a summary of their order.
It is an automatically generated page, similar to the checkout pages, so your ability to customize and modify it is quite limited.
It does not matter what is your Shopify plan, as the following tips work for everyone.
All the text on the page is generated dynamically so it can be found in the language settings. You can change the default text into anything you like. For example instead of saying "Thank you for your purchase" you can say "Have a good day".
This can be done from the language settings:
If your main theme language is any other than english you will see this:
If your main theme language is english, then you will see only the first field and simply replace the default value with the text you want.
Ok, I know I said custom thank you page and this is not even close to that, but hang on there as I will now show you how to actually add custom content to the page.
You may want to show a custom text box, or another button, a picture of Donald Trump...etc. Fortunately, Shopify provided a mean to do this using the additional scripts box on the Checkout settings page.
The bad news is that you actually have to enter scripts inside (JavaScript) and more bad news, it does no validation, so the code must be without bugs or the whole page may break.
The good news is that it accepts almost any JS code so you can make a lot of nice things.
This is also the place where you place the scripts for tracking purposes like Yotpo Reviews or other purchase tracking softwares.
You can find the additional scripts box here:
If you have not made any changes here, it should look like this:
In order to add another text box to the page use the following code:
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>YOUR_CUSTOM_TITLE_HERE</h2>',
'<p>YOUR_CUSTOM_TEXT_HERE</p>',
'<p>ADD_ANOTHER_PARAGRAPH</p>'
)
</script>
Add any elements you can think of such as <img>, <span>, <button>. These elements will be shown in a content box right bellow the main box on the thank you page.
With some proper coding skills, the entire page can be modified to suit one's needs, even though Shopify does not encourage this. The page looks and feels good as it is. Adding another content box will do no harm and may be useful.
The additional scripts box also supports liquid templating, so you can make use of it and show order or customer related information, conditionally show extra shipping and delivery information such as the estimated delivery date based on the orders's shipping address or simply offer a discount code to be used for the customer's next purchase.
In order to add elements to other places of the page, you will need some more advanced knowledge for creating said element and appending it where you want it. If you do need a more custom element than a content box leave it in the comments bellow and I will add a step-by-step way to do it.
]]>
In this article you will find those terms that are most frequently used in the world of online commerce and their meaning.
Above are the terms that usually pop up when working online. There are loads of terms used in the world of commerce, but most of them are the same for standard and online. Anyone can tell what a barcode is or what inventory means.
The list of terms will be periodically updated with the latest trending terms. Every day you learn something new.
Now that you have this list you are just a bit better prepared to tackle the world of ecommerce, and talk easier with freelancers, influencers, bloggers that may help you on your journey to profit.
]]>In terms of online marketing and e-commerce, conversion is the term used to describe the act of converting a visitor/customer in to a paying customer. A marketing tactic that encourages the customer into taking actions, precisely encouraging people to buy and complete the purchase from your shop.
Conversion rate represents the number of customers that actually bought something out of the total number of visitors.
But what is a good conversion rate? If you're already achieving 3%, 5% or even 10% conversion rates, is that as high as you're going to go? But what is a good conversion rate? Across industries, the average landing page conversion rate was 2.35%, yet the top 25% are converting at 5.31% or higher.
What are abandoned carts?
One of the most hated terms in the world of e-commerce is abandoned cart.
Customers just add products to their shopping carts and when looking at their order summary on the cart page decide to abandon it due to various reasons (shipping costs, hidden costs, changed their mind...etc).
So after knowing these terms it would be easy to assume that a lower rate of abandonment results in a higher conversion rate? Yes it does.
Read through: Step by step Beginner’s Guide for Generating Online Business Leads
But how to reduce the abandonment rate you may ask yourselves.
Here are a few ideas:
Almost anyone can fall for the "buy now or miss the deal" tactic. Even if you do not have any discounts or special deals, just by telling the customer they have a limited time to complete the purchase will result in a conversion.
This is a cost-effective and simple way of increasing conversion rates and reduce abandoned carts.
After the countdown ends it is up to you to decide what it should do. You can empty the customer`s cart making him believe he actually missed that offer, or you could do nothing. Just put a time of 20-60 minutes (no one will ever stay that long) and after the timer reaches 0 just let it show 00:00.
Shopify users can find an app that does just this on the app store called Cart Countdown Timer.
If you do know other simple strategies for improving conversion rates, please do leave them in the comments bellow and we will discuss more on them.
]]>Schema is an advanced markup code added to your website. Websites with Schema are easier for search engines and other crawlers to index, meaning it’s easier for them to understand the content of your store, and serve it to more relevant people.
I can only assume that this is not a topic you hear a lot of talk about. If you are not a developer of course.
In any case schema is quite important to your Shopify store. We are almost in 2020, the internet is full with websites, e-commerce platforms and stores, apps, etc...In a such competitive world, every small detail makes a difference.
You can see in the above image the difference schema markup can make for a product search on google. They are two different websites, but the first one has a much more detailed result, telling hte customer a lot more details about the product.
Clearly there are a lot of benefits. Four new details were shown to the customer right when he made the search. Guess which one he is going to trust more? That`s right, you never know ( still 80% of the cases it will be the most detailed ).
You do not have to be a developer to use schema on Shopify, you do not even have to know how to edit your theme code. On Shopify there is always an app that does the job - Schema & Breadcrumbs.
This app is the most simple app that can add schema for Shopify, plus you also get do display breadcrumb navigation on your storefront.
The video below will show you exactly how to use the app and for more info and FAQ, here is the app details page.
For any issues or questions please Contact us or leave a comment. Thank you.
]]>Once upon a time there were two little children named Hansel and Gretel. Living hard times back then, their parents decided to take them in the woods and abandon them because they simply could not watch them die of hunger in their own home....Fast Forward...The boy hears his parents talking about this and fills up his pockets with breadcrumbs so he can drop them on the ground and leave a trail behind so he can follow the path back home.
In this story the breadcrumbs failed to meet their purpose, but it`s just fantasy. We live in the real world where breadcrumbs actually work
On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around.
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application.
Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.
Breadcrumbs usually appear in a horizontal format pointing from the highest level (home) to the lowest level of hierarchy (current page).
Some guidelines to follow when using breadcrumbs:
Why should I use breadcrumbs on my website?
But this does not mean that only users can see these breadcrumbs.
Breadcrumbs are equally beneficial to the search engines as they are to users. They provide logical access to all the inner and outer pages of your site, a practice highly favoured by search engines.
This is how they affect SEO of your website:
According to moz, Schema.org (often called Schema) is a semantic vocabulary of tags (or microdata) that you can add to your HTML to improve the way search engines read and represent your page in SERPs.
To be more efficient, breadcrumb navigation and schema markup can go hand in hand and you could implement everything in one go.
Schema.org is the result of collaboration between Google, Bing, Yandex, and Yahoo! to help you provide the information their search engines need to understand your content and provide the best search results possible at this time. Adding Schema markup to your HTML improves the way your page displays in SERPs by enhancing the rich snippets that are displayed beneath the page title.
This depends mainly on the type of your website and how it is built.
For Shopify users you can use an app to make it super easy. Here you can find an app, currently still in development, but it works, free of charge that adds both schema markup and breadcrumbs navigation with one click.
For users that do not use Shopify, you can find more information on this article and Google offers a helpfull tool called Structured Data Markup Helper. It is somehow a bit of work, but you only have to do it once and it may be worth it.
A usefull tool for anyone working with structured data is Google`s Structured data testing tool. After adding any markup on your website, it is best to test it right after to avoid any mistakes you may have made
]]>All of us have been thinking at some point of starting a business, being our own boss, getting rich and staying home.
Well that is extremely possible, not easy to achieve, but at least possible and as you will see below, not that expensive.
First things first I am not talking about how to start a business, what to sell, where to sell, how to create your logo, choosing your niche and so on. This article`s purpose is solely to cover the upfront costs of starting your online store.
As we already established by now, Shopify is the to go platform for this one so the first costs you will have is by subscribing to one of their monthly plans:
Shopify offers four different plans:
Each of those plans offer the base needs plus extra features if you choose a more expensive one. You can see the difference between them here and choose the right one for you.
I for one recommend choosing the basic plan to start with and upgrade later on the way if needed.
You then need to choose a theme for your store. I recommend going for a free one offered by Shopify, but if none of them suits your type of business or design patterns, fell free to choose one of their paid themes, or third party-theme.
Keep in mind that a paid theme can cost you anywhere from $50 to $2-300, depending on complexity.
So just from these 2 steps your costs can be around $29 a per month or $29 per month plus an upfront cost up to a couple of hundred $. Solely your choice, but at the start you may want to keep the costs as low as possible.
At the moment of launching your store you need a domain name. You can buy one from Shopify, buy one from any other provider like GoDaddy ( I recommend it ), or maybe you already have one lying around.
A domain name can be as cheap as a few $ per year or if you want to buy one with a specific name that is for sale, maybe hundreds or even thousands of dollars, but that is not really a smart move right at the start.
You also need a business e-mail address that your domain provider will offer for a cheap price. It is necessary to "look good" on your online presence.
Thankfully you do not need to invest a dime in security, because Shopify has one of the best and offers it for free. Well not free, but the costs are in the monthly subscription fee you pay.
Well not quite. If you want to actually make some money from the start, you need some marketing. SEO and other channels will bring visitors to your store, but not right away, so you need to run some ads.
Use social media channels like Facebook and Instagram to promote your products. Use paid ads at a rate of aprox. $5 per day to reach a good amount of targeted clients, and you can make the first sale right on the first day.
Use Google ads to be the first in the search results. You can use a budget of $2-300 at the very start and hopefully your store will gain enough traction to go by itself.
This depends solely of your choices. Best case scenario you have to pay $29 per month for the subscription, around $50 per year for your domain and email and by not running ads it comes up to a maximum of $33-35 per month. Not bad at all.
If you choose a more advanced plan, a better domain and you run lots of ads, well then the costs from day one can easily go over $2-500 per month or even more.
But I am sure that if you choose to go with higher costs you have a good strategy in mind and expect a faster ROI ( Return Of Investment ).
I can only wish you good luck and lots of sales by following this path. If you enjoyed reading please do share this with your friends.
]]>Wordpress is a piece of software that you download for free, but you need a hosting provider and a ssl certificate and a domain name just to begin with it. You need to know how to use FTP to connect to your hosting provider and you need to feel comfortable editing php files to add more functionality to your Wordpress site. Indeed it is not necessary as you may find a theme that needs no changes. You also need to install lots of plugins for security, customizing, functionality.
According to Wikipedia ( going safe here )
WordPress (WordPress.org) is a content management system (CMS) based on PHP and MySQL that is usually used with the MySQL or MariaDB database servers but can also use the SQLite database engine.
To function, WordPress has to be installed on a web server, either part of an Internet hosting service like WordPress.com or a computer running the software package WordPress.org in order to serve as a network host in its own right.[14] A local computer may be used for single-user testing and learning purposes
The upside is that you effectively own your site. You can put it on a thumb drive and move it anywhere you want to, and it is highly customizable.
The downside is that you need to be a bit of a tech-savy to make it work, but with enough patience and will to learn, anyone can make it.
Shopify on the other hand is a self hosted platform. What this means, when creating a shop/website on Shopify, you do not actually own that website. You can not move it anywhere.
On behalf of Shopify, Wikipedia says that it is an e-commerce platform for online stores and retail point-of-sale systems. Shopify offers online retailers a suite of services "including payments, marketing, shipping and customer engagement tools to simplify the process of running an online store for small merchants."
But the advantage of Shopify is that it is so easy to use. I am sure that my grandma can set up a store without having to get lost along the way. When creating a store you get a .myshopify.com domain, ssl certificate and hosting, all included in the Shopify plan you chose. The best part is you do not even have to pay anything untill you reach 50 orders (for the free plan) so no tech knowledge are necessary.
You may now be asking yourselves why do people still use Wordpress? Well it is still number one platform for blogging and widely used for e-commerce simply because it is so customizable. Shopify works at its best as an e-commerce platform and not as widely used for blogging or presentation websites.
Do not think of it from this point of view. The basic plan, which is more than enough for any new entrepreneur out there, maybe a bit high for a new blogger, but think of what you get for that price.
You have hosting, a permanent .myshopify domain ( that may not be very useful when you launch but still you have it ) ssl certificate, and the ease of updating and modifying your site without having to spend your time stuck in some hosting company Cpanel making changes.
For a Wordpress website you have to pay for each of these separately. One domain provider, one hosting provider, one ssl provider, and on top of that you have to set them up yourself and make them work. Of course this may mean a cheaper price per month, but not so easy on newbies.
By using Shopify you get lots of things already set up for you. For most of the themes you will get out of the box all the meta tags and all title tags set up. Robots.txt and sitemap.xml are generated automatically, and adding the title and description of your site is as easy as placing them in a text form on the preferences page.
Being an E-commerce platform SEO is a key part of the online store so it should be obvious that Shopify is good at it.
For every blog post, product page or simple page you can manually edit the search engine listing preview.
Every image you upload has a field for editing the alt tag.
The only downside may be the blog articles url. It is still not ugly and search engines will index them, the article title is not right after the domain name, as you can see in the image above it is domain-name/blogs/news/article name. The right way should be domain-name/article name. I did not put to much attention into that, but Shopify offers url redirects so you can use any url to redirect to the article and look good if you want to.
So why do people talk about Shopify having bad SEO?
Like I said before, Shopify was not always this good. For example a few years ago you could not add alt tags for images or edit search engines preview only by diving in the code, so those who were not so tech-savy did not manage to get it done.
However this is not the case anymore. With a bit of time on your hands and without any coding skills you can actually get an almost perfect SEO score for your website.
You can find a good SEO guide here, that may help you with your Shopify store. There is also a snippet of code you can use on any theme to show breadcrumb navigation for your visitors and for SEO purposes.
Also for shopify users check out this app that may improve your SEO and is just too easy to use. It does not solve all issues, just adds breadcrumbs and schema markup - Schema & Breadcrumbs
Wordpress, on the other hand, has a ton of plugins that help you set up SEO, like Yoast, but as built-in performance may not be as good as Shopify for the E-commerce part. Wordpress e-commerce is actually another plugin, Woocommerce, so you do have to put some work into making it perform good in terms of SEO.
As a comparison think of these two platforms as two pieces of furniture ( I know, weird ).
Shopify, you go to your local furniture store, see the chair you like to buy, buy it, go home, put some screws to put it together and it is ready to use.
Wordpress, you see a nice looking chair in a magazine, then you start by cutting pieces of wood by following the specs, glue them together and start to make improvements untill it looks and feels like the one you saw in the magazine.
I know it was a pretty rough comparison, but is somehow sums up the difference between them.
There can not be a clear winner between these two platforms because both of them have benefits and drawbacks. However if you want an E-commerce website, Shopify is the go for it, and if you are into blogging then Wordpress is the best.
But who am I to tell you what to do? I have my website on Shopify and it is not an E-commerce one, so do whatever you like, I just made a comparison between them, mainly from a SEO point of view.
]]>Organic search stands for actual searches on Google, Yahoo, Bing or other search engines, performed by actual persons. If your page pops up in the results and the person clicks on it, that translates to organic traffic.
]]>SEO stands for Search Engine Optimization which is the practice of increasing the quantity and quality of your traffic through organic search.
Organic search stands for actual searches on Google, Yahoo, Bing or other search engines, performed by actual persons. If your page pops up in the results and the person clicks on it, that translates to organic traffic.
Although all the major search engines will understand the content of your webpage, SEO is giving them more and exact information about your website
Of course the easy way will be paying for a lot of ads on Google and social networks and traffic will pour in, but it can become quite expensive, and paid traffic is not always quality traffic and may not lead to a higher conversion rate.
Yes, SEO can be split into two main types.
On-site SEO is the practice of optimizing the content and the source code of your website in order to rank higher on search engines.
Off-site SEO represents all the actions taken outside of your website which impact your rankings on search engines.
Content
The most important part of your website is your content. It is not enough just having some content, it must be quality content in order to rank higher. Think of these search engines (mainly Google) as an actual person. If you have some poor written short content on your website, no-one will be interested in reading any of it, but if your content covers an actual topic of interest and is well enough written to gain one`s interest, then for sure search engines will understand there is some value in there and will rank you higher.
Your content has to be relevant to the user`s intent. All of your keywords and content should work together in such a manner that users and search engines know that by visiting your site will find out exactly what they are looking for.
For example stuffing your website with the word "apple" being out of context, expecting it to drive traffic being a high ranking keyword will not work. Neither Google and the user will not understand if it is Apple or apple (the fruit). Being ambiguous will more likely drag you down instead of going up.
Make sure you do research for your keywords before using them. The best free tool you can find out there is also provided by Google. Google trends.
Your keywords must be relevant to your niche, and blend naturally with your content.
For better results your keywords should be present, if possible, in your <title></title> tag or event your actual domain name.
Make sure to have only one <h1></h1> tag for every page of your site. Search engines get really confused if you are using more of them. Use h2,3,4 instead.
Make your content easy to read and check your grammar. Neither Google or any person out there would not like to read something that is not spelled right.
Include images and videos inside your content because everyone loves images and videos.
Markup and code
Humans love to read quality content, but search engines love to read quality code.
Search engines look for <meta> tags in your website to obtain information about it. Meta tags are snippets of text that describe the page content. Meta tags do not appear on the page, only in the source code. To check of your webpage has meta tags and how they look, just right-click anywhere on the page and select view source. They should be right in the top-part of your code.
Here is an example on how they look.
Essentially the most important are the title and description tags. Using them, Google generates the snippet that someone sees when your page pops up in their search results. Social networks also read these meta tags to generate beautiful snippets when sharing content on social media.
If you are using Shopify as a platform, then most likely these meta tags are already in place for almost any theme you chose. In most cases you can find and fiddle with them in a snippet called social-meta-tags.liquid.
Structured data
Structured data is code in a specific format, written in such a way that search engines understand it. Search engines read the code and use it to display search results in a specific and much richer way. You can easily put this piece of code on your website. It increases your chances of getting ranked higher in Google search results. It can display extra information on the search result, including reviews or steps for a tutorial, or the product price or breadcrumbs.
Breadcrumbs are used to help the user know exactly where they are at any time, and search engines also like to know where exactly that specific content is situated in you site. It is a form of navigation through your site.
For Shopify users I have a ready-to-use snippet that you can find at the end of this article. To use it go to your dashboard and select edit code for your theme, go to snippets and select add new snippet, name it "structured-data" or "breadcrumbs" or whatever you see fit, copy-paste the code and save. To use it just put this line of code inside your header.liquid file right before the </header> closing tag:
{% include 'YOUR-SNIPPET-NAME-HERE' %}
Now you have breadcrumb navigation and structured data for every page of your site. Google will love it, and hopefully you too.
Internal navigation
Best practices suggest that you have a well organized internal link structure for a smooth flow through you site. Users and search engines love to easily navigate from one page to another so make sure your navigation is easy to use, but also make sure you do not have to many internal links, because that may become confusing as well. Breadcrumbs are again your best friend.
Make your url`s look friendly. A page url that is full of symbols like ^%&& and meaningless letters will most certainly be left out by any search engine. Also try to keep your url`s short but at the same time long enough to have a meaning.
Images
Images are a key part of your website or shop. Especially shop. People tend to get their hands on products that are best represented visually, so the odds are your site will be full of images. Google and customers like that, but what they do not like are poorly optimized images. Too large images, or images served from unreliable sources, or poor quality images will penalize your SEO and your sales.
All of your images must be served from a reliable cdn. Do not use extra large images if not needed, and always make use of the "alt" attribute of these images. The "alt" attribute help search engines understand what the image is about and help you from a SEO perspective.
Optimization
When a user visits your site, all of the code is served and executed on the client-side, so smaller assets and efficient code will make the difference here. A faster loading website, means users will likely stay on the site, and the bounce rate should likely stay low. Especially for mobile users. 50% of mobile users bounce off websites that have a long loading time.
Plan ahead and do not use lots of javascript if not necessary and pay attention on media content optimization.
Essentially if you visit your website from any device and you like how it works, that means users and search engines will most likely like too.
Your site is now highly optimized and good-looking with high quality content and navigation, but in order to gain trust and authority, you have to improve your reach outside of your site.
This translates especially into backlinks. Other sites linking to your website. Some of this links will be followed by Google and transfer authority back to your site, some will not be followed, but will still drive traffic to your site.
Building backlinks is a tedious process and can be quite time-consuming. Some of the techniques used are:
Having a lot of quality backlinks will help you increase your domain authority and trust, telling search engines that your information is trustworthy and high-quality.
Social media
Social media content-sharing is nowadays the primary mean of sharing content around the web. Even if sharing content offer no-follow backlinks to your website, so you will not gain authority from them it is still a great way of making yourself known around the web.
Create business-looking pages and profiles on all social media networks and link them to your site. Share content often and try to reach out to as many people as you can. They will further share your posts and thus one good article for example could reach to thousands or more persons with one single actions.
Ads
Advertising campaigns are indeed the only thing in the business that is quite costly, but if you do them right you only have to run campaigns for a short period of time. Just in a few months you can get enough traction to keep your site on a top position for a long time.
Try to run campaigns on social networks, to increase the number of followers, thus increasing your audience when sharing posts.
The effect of SEO is not immediate. Do not expect to crunch every aspect of Search Engine Optimization in a couple of days and find yourself overnight with millions of visitors and on the first position of Google search results.
It usually takes 3 to 6 months of constantly improving your website, posting new content, making adjustments until you start to gain traction and see some results. Do not give up after just a few days. Keep working, because SEO is free and you can only gain by doing it properly.
This snippet of code is written specifically to be used with Shopify, but it may as well be used on any other platform. Just replace the {{ liquid code }} with your own content.
{% unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' %} {% assign t = template | split: '.' | first %} <nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs"> <ol> <li> <a href="/" title="{{ shop.name }}">Home</a> </li> {% case t %} {% when 'page' %} <li> <a href="{{ page.url }}" aria-current="page">{{ page.title }}</a> </li> <script type="application/ld+json"> { "@context":"http://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{ "@type":"Organization", "@id":"{{ shop.url }}", "name":"{{ shop.name }}", "image":"{{ 'logo.png' | asset_url }}" } }, { "@type":"ListItem", "position":2, "item":{ "@context":"http://schema.org/", "@id":"{{ page.title }}", "name":"{{ page.title }}", "description":"{{ page.description }}" } } ] } </script> {% when 'product' %} {% assign current_variant = product.selected_or_first_available_variant %} {% if collection.url %} <li><a href="{{ collection.url }}">{{ collection.title | split: "-" | first }}</a></li> {% endif %} <li> <a href="{{ product.url }}" aria-current="page">{{ product.title | split: "-" | first }}</a> </li> <script type="application/ld+json"> { "@context":"http://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{ "@type":"Organization", "@id":"{{ shop.url }}", "name":"{{ shop.name }}", "image":"{{ 'logo.png' | asset_url }}" } }, {% if collection.url %} { "@type":"ListItem", "position":2, "item":{ "@type":"Collection", "@id":"{{ collection.url }}", "name":"{{ collection.title }}", "image":"{{ collection.image }}" } },{% endif %} { "@type":"ListItem", "position":{% if collection.url %}3{% else %}2{% endif %}, "item":{ "@context":"http://schema.org/", "@type":"Product", "@id":"{{ product.id }}", "name":"{{ product.title | split: '-' | first }}", "image":"{{ product.featured_image.src | img_url: 'master' }}", "description":"{{ short_description[1] | split: '<br />' | first | strip_html | escape |truncatewords: 35 }}", "brand":{ "@type":"Organization", "name":"{{ product.vendor }}" } } } ] } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Product", "brand": { "@type": "Brand", "name": {{ product.vendor | json }} }, "sku": {{ product.selected_or_first_available_variant.sku | json }}, "gtin13": {{ current_variant.barcode | json }}, "description": {{ short_description[1] | split: '<br />' | first | strip_html | escape |truncatewords: 35 | json }}, "url": "{{ product.url | within: collection | prepend: shop.url }}", "name": {{ product.title | json }}, "image": "https:{{ product.featured_image | product_img_url: 'x100' }}", "offers": { "@type": "Offer", "@id":"{{ product.id }}", "price": "{{ product.selected_or_first_available_variant.price | money_without_currency | replace: ",", "." }}", "priceCurrency": "{{ shop.currency }}", "availability": "{%- if product.selected_or_first_available_variant.available -%}InStock{%- else -%}OutOfStock{%- endif -%}", "itemCondition": "http://schema.org/NewCondition", "url": "{{ product.url | within: collection | prepend: shop.url }}" } } </script> {% when 'collection' and collection.handle %} <li> <a href="{{ collection.url }}" aria-current="page">{{ collection.title | split: "-" | first }}</a> </li> <script type="application/ld+json"> { "@context":"http://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{ "@type":"Organization", "@id":"{{ shop.url }}", "name":"{{ shop.name }}", "image":"{{ 'logo.png' | asset_url }}" } }, { "@type":"ListItem", "position":2, "item":{ "@context":"http://schema.org/", "@type":"Collection", "@id":"{{ collection.title }}", "name":"{{ collection.title }}", "description":"{{ collection.description | strip_html | escape |truncatewords: 35 }}" } } ] } </script> {% when 'blog' %} <li> <a href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a> </li> <script type="application/ld+json"> { "@context":"http://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{ "@type":"Organization", "@id":"{{ shop.url }}", "name":"{{ shop.name }}", "image":"{{ 'logo.png' | asset_url }}" } }, { "@type":"ListItem", "position":2, "item":{ "@context":"http://schema.org/", "@type":"Blog", "@id":"{{ blog.title }}", "name":"{{ blog.title }}", "description":"{{ blog.title }}" } } ] } </script> {% when 'article' %} <li>{{ blog.title | link_to: blog.url }}</li> <li> <a href="{{ article.url }}" aria-current="page">{{ article.title }}</a> </li> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BlogPosting", "mainEntityOfPage": {{ canonical_url | json }}, "headline": {{ article.title | json }}, "author": { "@type": "Person", "name": {{ article.author | json }} }, "publisher": { "@type": "Organization", "name": {{ shop.name | json }}, "logo": { "@type": "ImageObject", "name": "Logo", "height": "60", "url": "{{ 'logo.png' | asset_url }}" } }, "image": { "@type": "ImageObject", {%- if article.image -%} "url": "https:{{ article | img_url: '1024x1024' }}", {%- else -%} {%- assign ZFWSKEEWXF = article.content | escape -%} {%- if ZFWSKEEWXF contains '<img' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | split: 'src="' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF[1] | split: '"' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF[0] | remove: '//cdn' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | remove: 'http:http://' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | remove: 'https:' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | prepend: 'https://cdn' -%} {%- capture QSGMYKOWFQ -%}_1024x1024.{%- endcapture -%} {%- assign QUGEOYMPTW = 'pico icon thumb small compact medium large grande 1024x1024 2048x2048' | split:' ' -%} {%- for EMWIDMOYQI in QUGEOYMPTW -%} {%- capture GFDHKYYEOT -%}_{{ EMWIDMOYQI }}.{%- endcapture -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | replace:search,replacement -%} {%- endfor -%} "url": "{{ ZFWSKEEWXF }}", {%- else -%} "url": "https://cdn.shopify.com/s/images/admin/no-image-grande.gif", {%- endif -%} {%- endif -%} "height": "1024", "width": "1024" }, "datePublished": "{{ article.created_at }}", "dateModified": "{{ article.published_at }}", "description": {{ article.excerpt_or_content | strip_html | json }}, "articleBody": {{ article.content | strip_html | json }} } </script> <script type="application/ld+json"> { "@context":"http://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{ "@type":"Organization", "@id":"{{ shop.url }}", "name":"{{ shop.name }}", "image":"{{ 'logo.png' | asset_url }}" } }, { "@type":"ListItem", "position":2, "item":{ "@context":"http://schema.org/", "@type":"Blog", "@id":"{{ blog.title }}", "name":"{{ blog.title }}", "description":"{{ blog.title }}" } }, { "@type":"ListItem", "position":3, "item":{ "@context":"http://schema.org/", "@type":"Article", "@id":"{{ artile.title }}", "name":"{{ article.title }}", "headline": {{ article.title | json }}, "author": { "@type": "Person", "name": {{ article.author | json }} }, "publisher": { "@type": "Organization", "name": {{ shop.name | json }}, "logo": { "@type": "ImageObject", "name": "Logo", "height": "60", "url": "{{ 'logo.png' | asset_url }}" } }, "image": { "@type": "ImageObject", {%- if article.image -%} "url": "https:{{ article | img_url: '1024x1024' }}", {%- else -%} {%- assign ZFWSKEEWXF = article.content | escape -%} {%- if ZFWSKEEWXF contains '<img' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | split: 'src="' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF[1] | split: '"' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF[0] | remove: '//cdn' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | remove: 'http:http://' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | remove: 'https:' -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | prepend: 'https://cdn' -%} {%- capture QSGMYKOWFQ -%}_1024x1024.{%- endcapture -%} {%- assign QUGEOYMPTW = 'pico icon thumb small compact medium large grande 1024x1024 2048x2048' | split:' ' -%} {%- for EMWIDMOYQI in QUGEOYMPTW -%} {%- capture GFDHKYYEOT -%}_{{ EMWIDMOYQI }}.{%- endcapture -%} {%- assign ZFWSKEEWXF = ZFWSKEEWXF | replace:search,replacement -%} {%- endfor -%} "url": "{{ ZFWSKEEWXF }}", {%- else -%} "url": "https://cdn.shopify.com/s/images/admin/no-image-grande.gif", {%- endif -%} {%- endif -%} "height": "1024", "width": "1024" }, "datePublished": "{{ article.created_at }}", "dateModified": "{{ article.published_at }}", "description": {{ article.excerpt_or_content | strip_html | json }}, "articleBody": {{ article.content | strip_html | json }} } } ] } </script> {% else %} <li aria-current="page"> <a href="{{ request.path }}" aria-current="page">{{ page_title }}</a> </li> {% endcase %} </ol> </nav> {% endunless %} <style> .breadcrumbs { font-size: 13px; margin: 0 2em 2em; text-align: center; text-transform: uppercase; color: #989898; letter-spacing: 1px; } .breadcrumbs ol { list-style-type: none; margin: 0; padding: 0; } .breadcrumbs li { display: inline-block; } .breadcrumbs a { position: relative; text-decoration: none; transition: 0.3s; padding: 10px 0; } .breadcrumbs a:before { content: ""; position: absolute; width: 0; height: 2px; bottom: 5px; left: 0; background-color: #989898; visibility: hidden; transition: all 0.3s ease-in-out; } .breadcrumbs a:hover{ color:#C0C0C0; } .breadcrumbs a:hover:before{ background-color: #C0C0C0; visibility: visible; width: 100%; } .breadcrumbs ol li:last-of-type { pointer-events: none; } .breadcrumbs ol li:not(:last-of-type):after { content: "›\00a0"; display: inline-block; padding-left: .25ch; speak: none; font-size: 20px; margin-right: -0.5ch; } .breadcrumbs [aria-current="page"] { color: inherit; font-weight: normal; text-decoration: none; } .breadcrumbs [aria-current="page"]:hover, .breadcrumbs [aria-current="page"]:focus { text-decoration: underline; } </style>
The total value of global retail ecommerce sales will reach $3.45T by the end of 2019, and by the year 2040 it is estimated that about 95% of all purchases are expected to be vie ecommerce. In the light of these numbers it is quite a good idea to put your business online, or if you are just starting, online is the best place to do so.
Why Shopify?
Well there are for sure a lot of platforms on which you can build your business :
But for most their drawbacks may outweigh their benefits. WooCommerce for example is a Wordpress plugin, so it may not be too fast, and also not too intuitive to set up. Magento, another example, is mainly used for large webshops with 1000+ pages/products so may not be the solution for your first online business. Shopify may just be perfect solution for any business, small or big.
Do not take this article as a tutorial per se, but more like a guideline when starting, or improving your Shopify store. In case you need professional assistance starting your business we would gladly help you out. Just give us a word by contacting us and we would gladly help to set up your store.
The design and structure are the two things that can make a difference out there. Even if your prices are not as competitive as one might expect, if your store looks and feels professional, your visitors will gain trust and your conversion rates will go up.
I am assuming that from the start you have a good idea on the type of store you would like start. You can have a traditional business with your own physical inventory, a dropshipping business, affiliate market store or any kind of online ecommerce type of business.
First you have to create an account, choose your plan and name your shop.
Shopify offers four different plans:
Each plan has more and more features and you can choose based on what you need. View detailed info about each plan here.
When naming your shop you can choose any name, it does not really matter because once you link your domain to your shop, the domain name will be the one visible to the public.
The next thing to do should be to choose a theme for your store.
Of course you can make one or ask for help from the many Shopify experts out there to tailor a theme that should fit your needs.
Shopify offers a great collection of themes, some are free and some are paid, you can find one that should fit your needs.
Have a good idea of your shop`s structure and design when choosing the theme.
If you are willing to sell many products, for example car parts, make sure the theme you choose has a good support of sorting, searching and displaying your products.
Do not rush this step. God did not make the world in one day, so why would you make such a big decision in a day. Especially if you choose a paid theme. These start at about $48 - $50 for third-party themes, even more for those developed by Shopify and if you do not like it, it is money lost right from the start.
Ask for a second opinion. The more opinions, the better.
It is now time to install your chosen theme on your shop. It does not really matter from where you bought the theme, be it Shopify, Themeforrest, or another platform, you do not have to have any tech skills to install it. If it is from Shopify, it will be automatically installed, if it is form an external source, you will get a .zip file which can be uploaded easily and Shopify does the rest.
The longest and maybe the hardest thing you will have to do now is to customize your shop. From your dashboard, click on the customize button belonging to your new theme, and you will be taken to a screen from where you can make most of the necessary changes for your store to take shape. It is quite easy to work with, intuitive and somewhat like drag and drop, so again no tech skills are required.
The design and structure is up to you to decide, but again do not rush this step. The first thing a user sees when visiting your shop is the aftermath of your choices, so it is a big step.
Choose your colours well. The world of ecommerce have a lot of UX "rules" like the colour of the buttons, text, font-size, image sizes etc so make sure you read as much as you can because even a different colour button may have some impact on your sales.
You now have to add the products to your store. The main part of your business.
Shopify makes it really easy to do this. For each product you add, you must upload images, add a title, description and price. These are the required fields.
You can also add multiple variants for each product. For example different sizes for clothing, different colours, packs of 2-3 products etc.
Shopify can also manage your inventory if you like to. This is a great feature, because you can not be permanently watching your inventory to know when a product is sold out and remove it from the shop.
Each product can also have multiple tags. These can be used for mainly for searching or sorting products. Best use case is for sorting products in collections by tags.
Create collections. Collections represent exactly what the name says. They group products into categories. There are two types of collections:
It is up to you on how you choose to make the collections and how to sort the products, but again it is an important decision, because the products are the main actors on the stage of your shop.
Your shop is now almost ready, but for now it is just a simple website. In order to sell anything you have to set up payments and shipping policies.
Decide where your shop will make sales. This can mean only the country of residence, nearby countries, specific countries or even the whole world.
From your shop`s settings, from the shipping tab you must set the apropiate shipping policies. You can also integrate third-party shipping providers using their provided api`s.
When an order is placed, the apropriate shipping policy is chosen.
Shipping policies can be price-based, zone-based, weight-based or a combination of them.
The step that brings the money are payment providers. Most customers will use an online payment method so for this step Shopify payments and choosing Paypal or Stripe as alternate method should be enough. Shopify offers lots of helpful details on payments.
Find out how to set up Shopify payments here.
After setting up everything on your shop, give it a test.
Place an order, pay it and see how it works. If you like the experience, it means other should too.
Ask your friends to do the same thing. Tell them to break your shop, to find out what flaws it has, if any.
To make your shop visible to the public, select preferences from the dashboard and disable the password protection screen. Your visitors can now visit your store. You can see 2 fields for title and meta description. These represent how your store is called and described on the internet. Make sure to write a good and descriptive title and try to keep it short. The description can be longer (160-180 characters). It is important that the most important keywords should be present here.
Connect your domain, or buy a domain then connect it and you are done!
Make your shop known. Share it on every social network.
Create public pages on Facebook, Twitter, Instagram etc, set up facebook commerce.
If you have a physical business create a google myBusiness account.
Social media is the best way to make yourself heard fast.
Create ads on google and social media.
From a SEO point of view, if your domain is new, it will take a couple of months to get known. You can also hire professionals for SEO.
In case of a new domain, even with the best SEO strategies it might take up to six months untill you see good results so be patient.
You can find more info regarding SEO for you store here.
Create a blog. Write articles regarding your stories and your products. People love to read and if you have quality content, more traffic will come and with traffic comes sales
On average, only 2.86% of ecommerce website visits convert into a purchase, so do not put your hopes up right from the beggining
There are between 12M to 24M ecommerce sites in the world, so make yours stand out between them. Be the top 0.1%.
Feel free to drop your opinion if this article was helpfull.
]]>Last year, on that one day alone, consumers collectively dropped $6.2 billion dollars on online stores!
It's important to be proactive during your Black Friday efforts and leverage all that action into holiday season sales. That means taking advantage of the high traffic to remarket, having promotions ready, and giving customers a reason to come back.
Everyone has appealing discounts, new products, all kinds of marketing strategies that they use just to increase that conversion rate and increase sales, so if your store is still not ready for this event it is indeed now time to "get your hands dirty" and start developing a good strategy.
Customers expect to see something different on your store than the rest of the year, besides better prices it is always good to make your whole store look a bit different using graphical content such as new banners, stickers etc. This is indeed a lot of work to do, but here is where our app may come in handy.
You do not have to manually add stickers to each product or to insert some images here and there, or try to display some text content in some areas. Simply upload your files in the files section and use our app to add those file url`s to the specific resource metafields. In your code add the liquid code to display those metafields if present and you are good to go. Your sticker or text or whatever info you want to display will show only where you want to, without much work.
Remember speed is of the essence. Always be ready before your competitors so when the time comes you will be the first to make more sales.
The advantages of using this method are
After Black Friday, to remove that extra content all you have to do is delete your metafields and your shop is back to standard ready for another campaign. But remember holiday season is coming and you will need these metafields once more.
These last two months will be grueling — but they’ll also be extremely profitable, if you play your cards right.
An example to add a sticker to some products only:
Select the product
Add the metafield
Add the code to display them where you want to be displayed:
{% if product.metafields.black-friday %}
<div class="bf">
<img src="{{ product.metafields.black-friday.sticker }}">
</div>
{% endif %}
Voila
If you have any questions or suggestions please leave a comment or contact us. Thank you for reading.
]]>At some point you will find yourself thinking why should I pay those extra $$$ every month for an app that I can build myself. At least that was what I was thinking when I started building apps.
Shopify offers the possibility of creating 2 kinds of apps:
When you decide to create an app, you first have to decide if you will make it private or public and the exact scope of it. Create a mindmap to have a well defined structure.
Look through Shopify`s documentations to see what API endpoints you need to access in order for your app to do the job and remember them to request the propper access scopes.
After doing your preliminary research and have a good structure in mind it is time to start building the app.
First you have to create a Shopify partners account, or log in if you have one and create and name a new app from the dashboard. As programming language it is best to choose the language you are most familiar with, be it Ruby, PHP, NodeJS etc... The app must have a valid SSL certificate so you must host it in a propper location. Maybe the best is Heroku.
You now have chosen the app name, and desired language and it is time to code. First go to the documentation and get a grip on how to properly authenticate when the app is installed and test it out.
If it all works well, the rest is up to you to write the app so that it does the job. Consider performance and make it work fast and keep it simple so you do not make unnecessary API calls.
Your app is now almost done. It does it`s job on your store, but ask yourself if other users can use it. Create another store for testing purposes and try to install the app. If it all works well you are in luck, but it almost never work as expected on the first try, so back to coding and debugging.
Make sure it works with no flaws on all of your stores before moving to the next step.
Break the app. Yes I said that correctly, try and break your app. Click all the buttons, open it in all browsers, try different themes, do everything you might think an user might do. Ask a friend to do this as well. This is the best way to find out what bugs are hidden in your app and solve them.
Make sure there are no flaws in your app before submitting the app to Shopify. They do not like apps that do not work like they should.
Write a proper documentation, display tips inside your app`s pages so that users know what do do and where to go inside the app. Maybe even give the app for free to other developers for testing and gather reviews.
Your app is now complete and it is time to publish it to Shopify app store. This is maybe the hardest step of the five. It may be because it is a tedious process that takes usually around ten days or more. If the Oauth process is done right, and the app does not crash in any way on install it is a good sign that it will not be rejected at first.
After the QA team from Shopify does the preliminary testing of your app and trust me they test everything, you will get a response from them with necessary changes you might have to make before it can be published.
Be sure to make these changes in relatively short timespan, do not make mistakes, test your app again and again before replying to them.
During the review process do not make any changes to the app that may break it, because that may be a rejection motive. Also make sure your app does not get rejected for more than 2 times, because the third time you will get temporary ban from submitting apps.
I hope this guide was somewhat helpful and you will give great apps back to the community.
]]>