Search Results for: online store 2.0

How To Create FAQs Page for Shopify Theme Dawn (Online Store 2.0)

So you’ve built a new Shopify store or let’s just say you’re using now the new Shopify theme called Dawn. Now you wanna customize it, but the problem is you don’t know how to do it because it’s a new Shopify theme and it’s written differently compared to the previous Shopify theme Debut.

You see, Shopify just recently rolled out the Online Store 2.0 and new Shopify themes must be using JSON templates for Shopify Theme Development instead of the previous liquid templates.

This made it very confusing especially to those merchants who are used to the old template system. But don’t worry, I’m going to walk you through how to customize the Shopify theme Dawn.

So, what are we going to add to Dawn, you ask?

In this article, we will be creating an FAQ page for the Shopify theme called Dawn. If you don’t know, I’ve already created a lesson about the same topic but back then we were using Debut. So I personally feel like this needs to be recreated.

Video Tutorials

If you’re still using Debut, and you’re interested to learn how to create an FAQs page without using any apps, feel free to watch the video tutorial below.

Otherwise, you can watch me do what’s written in this article in the video below.

Getting Started

In order for this to work, we’re gonna need three (3) things. The first is the page that will render the FAQs. The second is the JSON template that we will use on our page and the third is the liquid codes and a stylesheet to render the FAQs.

This may sound too much for you but it’s honestly not that difficult.

If I’m gonna be honest with you, there’s a simpler and shorter way to create an FAQs page for Dawn, and that is by using sections and schema settings. However, I would like to guide you on how to create a JSON template so that you understand how JSON templates work.

Okay, I’m talking too much, let’s start and create the FAQs page.

How To Create FAQs Page for Dawn

We’re going to divide this section into three (3) parts:

  1. Creating the JSON template for the FAQs page
  2. Creating the page in the admin
  3. Creating the accordions

Let’s start by creating the JSON template for the FAQs page.

Create the JSON template

Open your Shopify store admin page. Then, access the Online Store’s theme page, and there open the Code Editor by clicking the actions dropdown menu and there select Edit Code.

Once you have the Code Editor page loaded, the next thing that you’re going to do is to create the JSON template and the template section for the JSON template. Sounds confusing? Let’s do it step by step.

First, open the Templates folder and click the Add a new template file. Then, for the “Create a new template for” select page. Then, for the “Template type“, make sure you’re using JSON. And lastly, name the template file page.faq.

Once the file is created, apply the following code:

{ "sections": { "main": { "type": "main-page-faq" } }, "order": ["main"] }
Code language: JSON / JSON with Comments (json)

In the JSON template above, we are referencing a section file called main-page-faq, so of course, we’re going to create that file.

So open the Sections folder and click the Add a new section file and name the file main-page-faq.

Once the file is created, we’re going to apply the same code that we have from the main-page.liquid section file. But, you can just copy the following code below:

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'"> <noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript> <noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript> <div class="page-width page-width--narrow"> <h1 class="main-page-title page-title h0"> {{ page.title | escape }} </h1> <div class="rte"> {{ page.content }} </div> </div> {% schema %} { "name": "FAQs Page", "tag": "section", "class": "spaced-section" } {% endschema %}
Code language: HTML, XML (xml)

Awesome! Now we have the JSON template and the template section ready. Let’s continue by using them on a new page.

Create a new page called FAQs

Go back to your Shopify admin page and access the Online Store’s “pages” page. Then, create a new page and call it FAQs (or whatever you wish to call it) and make sure that the Theme template it’s using is set to faq.

Nice! Now we have the page to render the accordions. The last thing that we need to do is to write the code for these accordions.

Create the accordions for FAQs

Go back to your main-page-faq section file and update its code to the following:

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'"> <noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript> <noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript> <div class="page-width page-width--narrow"> <h1 class="main-page-title page-title h0"> {{ page.title | escape }} </h1> <div class="rte"> {{ page.content }} </div> <div class="faq-container"> <div class="tabs"> {% for block in section.blocks %} {% assign item = block.settings %} <div class="tab"> <input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox"> <label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label> <div class="tab-content">{{ item.answer }}</div> </div> {% endfor %} </div> </div> </div> {% schema %} { "name": "FAQ Page", "tag": "section", "class": "spaced-section", "blocks": [ { "name": "FAQ Item", "type": "faq", "settings": [ { "type": "text", "id": "question", "label": "Question", "default": "Do you have a question?" }, { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>I have an answer</p>" } ] } ] } {% endschema %}
Code language: HTML, XML (xml)

The code that we added above should allow you to add blocks to your FAQs page through the customizer page.

Awesome! Now the last thing that we need to do is to use CSS and make the FAQ items an actual accordion. So go back to the code editor and open the Snippets folder, click the Add a new asset. Then, select the Create a blank file and for its name, call it faq-style and make sure the file extension is set to .css.

Once, the file is created, apply the following code:

.faq-checkbox { position: absolute; opacity: 0; z-index: -1; } .tabs { border-radius: 10px; overflow: hidden; } .tab { width: 100%; color: white; overflow: hidden; } .tab-label { width: 100%; display: flex; justify-content: space-between; padding: 1em; font-weight: bold; color: white; } .tab-label:after { content: "+"; width: 1em; height: 1em; text-align: center; transition: all 0.5s; } .tab-content { max-height: 0; padding: 0 1em; background-color: white; transition: all 0.5s; color: black; } .tab-content p { margin: 0; } .faq-checkbox:checked + .tab-label:after { content: "-"; } .faq-checkbox:checked ~ .tab-content { max-height: 100vh; padding: 1em; }
Code language: CSS (css)

Make sure to save your file.

Last step is to apply that CSS stylesheet to our section file.

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'"> <link rel="stylesheet" href="{{ 'faq-style.css' | asset_url }}" media="print" onload="this.media='all'"> <noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript> <noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript> <div class="page-width page-width--narrow"> <h1 class="main-page-title page-title h0"> {{ page.title | escape }} </h1> <div class="rte"> {{ page.content }} </div> <div class="faq-container"> <div class="tabs"> {% for block in section.blocks %} {% assign item = block.settings %} <div class="tab"> <input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox"> <label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label> <div class="tab-content">{{ item.answer }}</div> </div> {% endfor %} </div> </div> </div> {% schema %} { "name": "FAQ Page", "tag": "section", "class": "spaced-section", "blocks": [ { "name": "FAQ Item", "type": "faq", "settings": [ { "type": "text", "id": "question", "label": "Question", "default": "Do you have a question?" }, { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>I have an answer</p>" } ] } ] } {% endschema %}
Code language: HTML, XML (xml)

Now, if you open your FAQs page, you should have the following:

Conclusion

So there you have it! We have created an FAQs page for the Shopify theme called Dawn without using any Shopify apps. Like I said earlier, there is a faster and more practical way of creating accordions and that is by using sections.

Maybe in the future, I will create a separate lesson discussing this but for now, that’s how you create FAQs or accordions.

If you want to support me or WeeklyHow, feel free to subscribe to our YouTube channel or if you want to learn more about Shopify Theme Development, I have a course for that and there you will learn more about Liquid programming and Templates.

How To Create FAQ Sections in Shopify (Online Store 2.0)

We’ve recently learned how to create an FAQ page for online store 2.0. Now, let’s learn how to make an FAQ section that you can reuse as many as wish.

Video Tutorial

If you prefer to watch video tutorials, you may watch the video version of this article instead.

Getting Started

Before we start this tutorial, we would like to mention that we will be using the free Shopify theme Dawn created by Shopify. If you’re using a different Shopify theme, don’t be surprised that yours are going to look different from mine. So if you’re having issues with your accordions, that may be because of your Shopify theme and its CSS.

Let’s begin this tutorial, by opening your theme’s code editor.

Go to Online Store and Themes.

Then, in the card of your Shopify theme of choice, click the Actions button and select Edit code.

This should open the code editor of your Shopify theme. Now, it’s time to make the section!

Creating The FAQ Section

For this FAQ section, we’re going to need two (2) files: sections/faq.liquid and assets/faq-style.css.

Let’s start with the stylesheet.

Open the assets folder and create a new asset and name it faq-style and make sure its extension is .CSS.

Once the file is created, copy the following code:

.faq-description { margin-top: 2em; margin-bottom: 2em; } .faq-checkbox { position: absolute; opacity: 0; z-index: -1; } .tabs { border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 12px #4141416e; } .tab { width: 100%; color: white; overflow: hidden; } .tab-label { width: 100%; display: flex; justify-content: space-between; padding: 1em; font-weight: bold; color: white; } .tab-content { max-height: 0; padding: 0 1em; background-color: white; transition: all 0.5s ease; color: black; } .tab-content p { margin: 0; } .faq-checkbox:checked ~ .tab-content { max-height: 100vh; padding: 1em; }
Code language: CSS (css)

Save the file.

Next, let’s create the sections/faq.liquid.

Open the sections folder and create a new section file and name it faq. Then, copy the following code:

<link rel="stylesheet" href="{{ 'faq-style.css' | asset_url }}" media="print" onload="this.media='all'"> <div class="page-width page-width--narrow"> <div class="faq-container"> <div class="tabs"> {% for block in section.blocks %} {% assign item = block.settings %} <div class="tab"> <input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox"> <label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label> <div class="tab-content">{{ item.answer }}</div> </div> {% endfor %} </div> </div> </div> {% schema %} { "name": "FAQ", "tag": "section", "class": "spaced-section", "blocks": [ { "name": "FAQ Item", "type": "faq", "settings": [ { "type": "text", "id": "question", "label": "Question", "default": "Do you have a question?" }, { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>I have an answer</p>" } ] } ], "presets": [ { "name": "FAQ Block" } ] } {% endschema %}
Code language: HTML, XML (xml)

Now, if you open your theme editor, you should be able to add FAQ blocks by clicking the Add section button like below

Now, if you wish to add titles and descriptions to your FAQ blocks, you can update your faq.liquid to the following code.

<link rel="stylesheet" href="{{ 'faq-style.css' | asset_url }}" media="print" onload="this.media='all'"> <div class="page-width page-width--narrow"> <h1 class="main-page-title page-title h0"> {{ section.settings.faq_title | escape }} </h1> {% if section.settings.faq_description %} <div class="rte faq-description"> {{ section.settings.faq_description }} </div> {% endif %} <div class="faq-container"> <div class="tabs"> {% for block in section.blocks %} {% assign item = block.settings %} <div class="tab"> <input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox"> <label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label> <div class="tab-content">{{ item.answer }}</div> </div> {% endfor %} </div> </div> </div> {% schema %} { "name": "FAQ", "tag": "section", "class": "spaced-section", "settings": [ { "type": "text", "id": "faq_title", "default": "Frequently Asked Questions", "label": "Title" }, { "type": "text", "id": "faq_description", "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", "label": "Description" } ], "blocks": [ { "name": "FAQ Item", "type": "faq", "settings": [ { "type": "text", "id": "question", "label": "Question", "default": "Do you have a question?" }, { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>I have an answer</p>" } ] } ], "presets": [ { "name": "FAQ Block" } ] } {% endschema %}
Code language: HTML, XML (xml)

If you save your files, you should be able to create as many FAQ blocks as your want!

Conclusion

There you have it! You just created FAQ blocks using sections. Now, you will be able to create accordions everywhere you want as long as the template file is using sections. There are a few problems in this accordion though, specifically, the styling of it. In this project, we haven’t used any styling for the buttons and its label so if your Shopify theme is using bright colors for buttons, the label of this accordion will not be that visible so you may have to tweak the styling a bit if you encounter the said issue. Other than that, that’s pretty much it.

Shopify Theme Development: Online Store 2.0 + TailwindCSS

Shopify just recently updated their Shopify online experience which they call “Online Store 2.0”.

With this update, Shopify merchants can now customize their entire online store using sections & blocks. This opened a lot of doors not just for Shopify app developers but also for Shopify theme developers because now, you can add cool sections and blocks to the most commonly used pages like products page, collections page, blog page, etc.

If you’re a Shopify theme developer and you don’t know yet how to create a Shopify theme for Online Store 2.0, then this is the best time to learn because Shopify is now accepting Shopify themes to be listed on their Shopify Theme Store!

This means you can make money by selling your Shopify themes! So are you interested to learn more?

In this course, we’re going to learn how to create a Shopify theme for Online Store 2.0 using Shopify CLI with the help of TailwindCSS to design a cool online store.

In this course you will learn:

  1. How to set up your development store using Shopify CLI 3.0
  2. Using TailwindCSS to design a Shopify theme
    • Create navigational bar
    • Create collection page
    • Create product page
    • Create customer page
    • Create cart page
    • and more!
  3. Online Store 2.0 (JSON Templates)
  4. Shopify CLI
  5. Schema Settings
  6. Search Engine Optimization (SEO) for pages like articles, products, etc.
  7. Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
  8. Customer Templates

If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!

Changelog

February 05, 2022

  • Updated/added new lesson(s)
  • Edited course description
  • Added new resource(s)

January 25, 2022

  • Updated/created new lesson(s)
  • Removed deprecated lesson(s)
  • Added new resource(s)

December 03, 2022

  • Updated/created new lesson(s) for Shopify CLI 3.0
  • Updated course description

Shopify Theme Development using Shopify CLI [Online Store 2.0 + TailwindCSS]

Shopify just recently updated their Shopify online experience and now they call it “Online Store 2.0”.

With this update, Shopify merchants can now customize their entire online store using sections & blocks. This opened a lot of doors not just for Shopify app developers but also for Shopify theme developers because now, you can add cool sections and blocks to the most commonly used pages like products page, collections page, blog page, etc.

If you’re a Shopify theme developer and you don’t know yet how to create a Shopify theme for Online Store 2.0, then this is the best time to learn because Shopify is now accepting Shopify themes to be listed on their Shopify Theme Store!

This means you can make money by selling your Shopify themes! So are you interested to learn more?

In this course, we’re going to learn how to create a Shopify theme for Online Store 2.0 using Shopify CLI with the help of TailwindCSS to design a cool online store.

In this course you will learn:

  1. How to set up your development store
  2. Using TailwindCSS to design a Shopify theme
  3. Online Store 2.0 (JSON Templates)
  4. Shopify CLI
  5. Schema Settings
  6. Search Engine Optimization (SEO) for pages like articles, products, etc.
  7. Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
  8. AJAX API (Getting products data, Sending products to the cart, etc)

If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!

How To Migrate Shopify Themes to Online Store 2.0 (JSON Templates)

Let’s say you have a Shopify store and you’ve been working on it for years. Then, after some time, you’ve taken a look at your Shopify homepage and you’ve decided to customize your Shopify store for a little bit.

But then, BOOM!

You’ve found out that Shopify just recently changed the look of the customizer page and now, you’re lost. So you started reading about it and then you’ve realized that there are new features that you can do.

But, unfortunately, it looks like you can’t do any of the new features (like the “modularity” of the entire Shopify store, app blocks or app extensions, etc.) and that’s because you’re using an old Shopify theme and you need to upgrade it to a JSON template.

So, how can you upgrade your Shopify theme?

Well, in this article we are going to learn how to migrate a Shopify theme from Liquid to Online Store 2.0 (aka JSON templates).

Video Tutorial

If you prefer watching video tutorials, you can watch the following video version of this article.

Otherwise, you can continue below.

Getting Started

Before we get started, I want to point out that we are going to use Debut as an example in this article. We are also going to ONLY show you how to migrate a single template file from Liquid to JSON template and so if you’re looking for an in-depth tutorial about migrating all of the template files to JSON, I highly recommend taking the Shopify Theme Development course. In that course, I will be covering all of the template files from 404 to Search template file.

Also, before we begin, make sure that you BACKUP your Shopify theme. There are a lot of ways to backup a Shopify theme so make sure you do that before doing any of the steps that I will be mentioning in this article.

Migrating Shopify Themes to JSON Templates

You can migrate a Shopify theme in 5 simple steps:

  • Identify the sections of your theme templates
  • Replace the Liquid template with JSON template
  • Test your theme

Looks very simple no? Well, let’s see how to do them.

1. Identify the sections of your Shopify theme templates

Before you can start migrating your template files to a JSON template, you need to make sure that all of the {% section %} tags inside of a template are removed. This is because Shopify doesn’t allow you anymore to use the {% section %} tag inside of a section file and by using a {% section %} tag in a section file, you will receive the following error:

Liquid error (section/section-example.liquid line 58): Cannot render sections inside sections

Once you have found a section tag inside of your section, you have two options:

  1. Move the code of that section to the section referencing that section. (Might be confusing)
  2. Create a layout that reference that section.

The second option is quite advanced so to make this article shorter and simple, we’ll just do the first option and so that you get what I’m trying to say in that list.

  1. Open your theme code editor
  2. Locate a template file (They’re usually inside of the /templates directory). Let’s use the article.liquid in this tutorial.
  3. Search for {% section %} tags. (If this is your first time opening that template file, you should be able to find a section tag that references the section named “article-template”).

    Did you find one? Great. Remove that section tag and open that “article-template” section file.
    Inside of that section file, you should see a part of the article template that renders the blog post.

    So what you’re going to do is to move all of that code to the article.liquid. Because the whole point is to remove all of the section tags from your template.

    Now, keep in mind that you should move or paste the code of the “article-template” to the line where the {% section %} tag is located. So if the section tag is located in line 17, then you should paste the code of that section in line 17.
  4. Do the same steps for the rest of the section tags that you find.

2. Replace the old template with JSON template

Now that we have removed the section tags from our template file, we can finally replace this template file with JSON template. But first, we need to move the code of the article.liquid to a section file and then, we can delete the article.liquid and replace it with article.json.

  1. Go to /sections directory or folder and create a new section. Name it whatever you what but make sure you remember this name because we’ll use this name in the article JSON template file.
    In my case, I’ll name it template-article.
  2. Inside of the template-article.liquid, I’ll move ALL of the code from the article.liquid template file.
  3. Delete the article.liquid.
  4. Go to /templates directory or folder and create a new template file and select article and make sure that you select JSON instead of Liquid.
  5. Once the article.json is created, replace its code with the following:
{ "sections": { "template": { "type": "template-article" } }, "order": ["template"] }
Code language: JSON / JSON with Comments (json)

Save the file.

3. Test your Shopify theme.

Once you have created your new template, open it with the customizer and check if you can add sections to your article template. If you can, then that means you have successfully migrated your template file from Liquid to JSON template.

Now the next thing that you’re going to do is to apply the same steps to the rest of the template files.

Conclusion

Migrating your Shopify themes from the old template system to Online Store 2.0 is honestly very easy, but it can be very difficult depending on what Shopify theme you’re about to migrate. So my advice, especially if you’re using a different theme, is to learn your Shopify theme first, back it up, and use it with a development store or a test store. That way, your Shopify store is safe from being broken.

We haven’t covered in this article how to use app blocks in JSON template so we’ll probably just cover them in the next video of our YouTube channel. So, if you’re interested, make sure you subscribe to our YouTube channel so we can notify you when we upload a new lesson.

Is It Worth Starting a Shopify Online Store in 2021?

So you’ve seen this ad somewhere, maybe on Facebook, that says that making an online store can bring you success easily- especially at this time of crisis.

$61,634 in 28 days?! Start to become successful with Shopify (Long Term)

There’s no doubt that Shopify is one of the best eCommerce platforms that help merchants create an online store in just very few steps.

However, should you really start a Shopify store in 2021?

The answer is yes. In fact, 2021 is the best year for you to start an eCommerce business. Why? because everyone is staying indoors browsing the internet and maybe doing online shopping.

If this is your first time and you have no idea what is an eCommerce then you may have to take a few more days or even weeks to do some research about building a successful Shopify store. In fact, I’ve studied eCommerce and Shopify for 12-months just to understand how it works and now I’m earning $2,305/monthly.

Don’t worry, we’re going to guide you through the basics and hopefully, you’ll understand what it is like to work as a Shopify store merchant.

Creating a Shopify Dropshipping store in 2021?

I’ve recently tried if Shopify dropshipping still works in 2021. Here’s my research:

Getting Started

Before you start building an online store, know that there are two possible outcomes to your business, success, and failure. Duh.

Like in most things, success happens if you truly know what you’re doing and you’re putting every time you have to your business. However, there are also instances that even if you believe that you know what you’re doing and you’re putting most of your time to your business, failure still comes and destroys your business.

Why are we mentioning these?

Most starters often think that eCommerce is an easy money maker or a very easy way to get success. That’s not true at all. Building an online store takes a lot of work, time, money, and patience.

But if you truly feel confident then keep on reading as we’ll cover more topics about building a Shopify store.

How much $$$ do you need to start a Shopify store?

How much money do you need to start a Shopify store

You’ve probably heard somewhere that you’ll only need a few dollars to start a Shopify store. If that ‘few’ dollars means $50, then no, that will never take you somewhere. Yes, you can build an online store with that amount but it won’t bring you any profit at all.

Short answer, you’ll need an amount of $2000 or more.

But to be honest, the amount you need will depend on the niche of your Shopify store.

Why do you need that much money?

The reason why you need to have as much money as you possibly can is because you’ll be paying for the following fees:

  • Shopify fees
  • Transaction fees
  • Plugins (possibly)
  • Promotion fees
  • and other fees…

Not only that, but you’ll also have to pay for other services like web designs, logo designs, photography, and more. Especially if you can’t do those things by yourself.

Hopefully, everything made sense to you now that building an eCommerce business takes a lot of time especially if you’re doing it all by yourself.

For the Shopify fee, you’ll most likely spend $50 max especially if you just picked their basic plan. Shopify also offers the following plans:

FeaturesBasicShopifyAdvanced
Online Store
Unlimited Products
Sales channels
Staff members2515
Discount codes
Abandoned cart recovery
Transaction fees2.0%1.0%0.5%
Professional reports
Advanced report builder

Transaction fees

For the transaction fees, if you’re using the basic plan then you’ll have to pay their processing fee of 2.0% per transaction. Notice that the more you upgrade your store Shopify plan, the lesser transaction fee you’ll have to pay. Some people might think 2.0% is low but it’s actually very high and so you should upgrade to Shopify once you earn a good profit.

Plugins

For the plugins, you may have to install Shopify apps that may charge you monthly. If you’re just starting, then look for the free ones like Oberlo.

Promotion fees

Promotion fees. You’ll mostly spend all of your money on promotions like advertising or paying someone to promote your brand. This is the best way to get a profit.

How to start a Shopify store

Now that you have an idea of what it’s like to manage a Shopify store, let’s actually get started creating your Shopify store.

The first step to create a Shopify store is to obviously sign-up. Click the button below and get your free 14-day trial with Shopify.

It’s best to use this 14-day trial to study and roam around the system of Shopify. We suggest you learn as fast and much as you can because your time is very limited.

Store settings

For the first day, you should set up your store, payment methods, domain name, etc.

You should also start adding your products to your store through the product page. If you have a lot of products to sell, make sure you compile them into collections.

Store design

Shopify store design inspiration in 2020

For the next 2 days, you should have your online store designed and ready to be published.

Most starters use the Debut theme but if you have a little knowledge with HTML/CSS, then we highly recommend you customize your store especially its colors and text fonts. Make sure everything blends together. If you’re looking for a store-design inspiration, we have made a list of the successful Shopify stores that you can look up to. They have great designs that you should definitely try to get inspired by.

It’s very important to make your store design as user friendly as possible and it should also have a personality. Do NOT bombard your store with too many Shopify apps as it will not only annoy your customers but also slow down your online store.

If you’re looking for Shopify app recommendations, we recommend the following apps:

Promoting your brand

The last 10 days should be the time you are promoting and selling your products.

There are many ways to promote your products.

  • Facebook Ads
  • Google Ads
  • Instagram Pages
  • Email Campaigns
  • Upselling

Advertisement

For Facebook ads, it’s best to keep your ads optimized otherwise you’ll end up spending a LOT of money. Make sure to target the people that are actually looking for your products. Same with Google Ads, although you’ll barely use Google Ads. Honestly, personally speaking, skip using Google Ads. It’s expensive and not really effective for Shopify stores.

Instagram Pages

For Instagram pages, you’ll have to prepare a few things. An HD video/image, depending on where you want your video to be posted (Instagram story or feed).

And of course, the cash to pay the page for promoting your video. Just make sure that they add the link to their bio.

The cost for this kind of promotion depends on the following of the page. The higher the follower, the higher the price. But be careful! A lot of Instagram pages have fake followers so make sure to check if their followers are actually active and interacting with the page’s posts.

Email Campaigns

Another way to get more sales is by using emails. When you want to notify your customers that you have a promo sale, sending them an email is the best way to do it.

Getting an email subscription is actually very easy. Luckily, there are hundreds of free Shopify apps that offer this kind of promotion.

Last day of trial

The last day of the 14-day trial should be the day that you decide if you’re going to keep the store or not. Otherwise, you’ll have to pay for the first month and you’ll have no choice but to keep going.

If you don’t have a product, then you’ll probably end up doing a dropshipping. If you don’t know what it means, it means that you’ll be selling products that are not in your hands. Once a customer purchases from your online store, you’ll have to buy the product from the wholesaler/retailer and they will take care of the delivery to the customer. We created a course on how you can create a dropshipping store for free.

Conclusion

There’s no denying that 2021 made our lives difficult. A lot of people lost their jobs and maybe you’re one of them and now you’re looking for an opportunity to earn a profit through Shopify. Yes, Shopify is definitely worth a try this 2021 especially that you can’t go out and find a new job. It might be scary to take risks but you’ll never know if you don’t try. Luckily, Shopify offers a 14-day trial so you can try eCommerce without risking any money.

Hopefully, this guide gave you an idea of what it is like to work as a Shopify store merchant or drop shipper.

We truly wish that your Shopify store become successful. Good luck!

Downloads

Project files

Projects that are mentioned in most of our courses will be available here for download. For updates, make sure to check the project’s repository.

Celeste

A repository used in the course Shopify Development – Learn Shopify Liquid Programming

Download

3D Models (GLB)

The 3D models used in the course:
Shopify Theme Development: Online Store 2.0 + TailwindCSS

Download

Table.glb

The 3D model used in the tutorial:
How To Use Augmented Reality (AR) & 3D Models in Shopify

Download

Learn How To Code, Anywhere.

Hello, WELCOME TO WEEKLYHOW

Learn how to code. Anywhere.

Learn from a trusted instructor.

With over 5,000+ learners around the world and growing online community.

Shopify Apps

Shopify Themes

Shopify Liquid

Become a Shopify developer.

Becoming a Shopify developer can be extremely challenging and frustrating but with our tools and top-quality courses, you can become a Shopify expert in a short period of time. Join our community!

Help Shopify Merchants

Become a Shopify expert and help merchants grow their businesses.

Master Web Development

Learn new skills like Liquid and web programming to become a web master.

Build Your Own Business

Learn Shopify development and create web applications that you can sell online.

Become a Shopify Developer Pack!

Learn how to create Shopify apps and themes through the following highly-rated courses.

Learn Shopify Liquid Programming

Understand how liquid template programming works and start customizing your Shopify stores.

Enroll now
Design Shopify Apps WITHOUT Polaris

Learn Shopify Theme Development

Create Shopify themes for Online Store 2.0 using Shopify CLI, Liquid, and TailwindCSS

Enroll now
Shopify App Development

Learn Shopify App Development

Learn Shopify app development and create Shopify apps using Vanilla PHP, GraphQL, REST API, and more!

Enroll now

Everything is a learning experience

Learning online can sometimes be boring and slow but it doesn’t have to. With WeeklyHow, you can learn in a fun way with our well-produced lessons.

Learner’s Success Stories

Real feedbacks from our students.

Vu Vo

Bernard really helped us get exposed to the fundamentals of Shopify theme code and a few pitfalls that you may run into while developing Shopify themes

Gopal Satam

Amazing! Great course on Shopify Theme Development. After watching all the lessons so far I found learning Liquid language is quite enjoying and easy to understand. Thanks Bernard!

Jessica Doram

I learned a lot from Bernard’s course. I was from 0 Shopify knowledge to expert dev in just a few days. Job well done, thanks for sharing your knowledge!

Shopify Theme Development Masterclass: Learn How To Create Shopify Themes

This course is last updated on March 10, 2022

Due to the pandemic, a lot of people are trying to learn how to create an online store with Shopify. These new merchants are looking for Shopify themes that are effective enough to bring them sales. Why not become one of the new Shopify developers and create an amazing Shopify theme from scratch?

In this course, we’re going to learn how to create a Shopify theme using ThemeKit and Liquid. We’re going to cover all of the important parts of Shopify Theme Development so you will be ready to create your very own Shopify theme as soon as possible.

In this course you will learn:

  1. Private apps for theme development
  2. Liquid files
  3. Theme assets
  4. Designing your own theme
  5. Adding translations to your theme
  6. Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
  7. AJAX API (Getting products data, Sending products to the cart, etc)
  8. Online Store 2.0

If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!

How To Learn Shopify Development in 2023 (as a beginner)

You are probably wanting to learn Shopify development because you either have a Shopify store that you want to improve or you just want to be a Shopify developer. Either way, you will do the same steps to learn Shopify development. Then you can choose whether you want to create a Shopify app or a Shopify theme.

But, the question still remains… How do you actually learn Shopify development as an absolute beginner?

Well, in this article, we will be talking about how to learn Shopify development in 2023 as a beginner.

Watch video

If you prefer watching video tutorials, you can watch the video version of this article below:

Otherwise, you can continue by reading my guide below.

Getting started

In order for you to be able to learn Shopify development, you’ll have to understand or at least know the fundamentals of web development (like HTML, CSS, and JavaScript).

Why? Because Shopify development is, indeed, still part of web development.

You will still use HTML, CSS, JavaScript, or frontend languages to render your Shopify development projects. You will also need to learn backend development. In other words, you will need to pick a programming language for your backend. This could be Node, PHP, Ruby, or Python.

It’s important to note though that there are more programming languages that you can use for Shopify development. The only thing that matters is the programming language should be able to communicate with the Shopify API.

Now, let’s assume you have learned the frontend and the backend. What is the next thing that you need to learn?

Well, the next thing that you should learn is database especially if your end goal is to create Shopify apps. Most of the time, when you do Shopify app development, you will be saving some data of the merchant to your database.

Once you have learned all of that, you’re pretty much ready to go and learn Shopify development.

Learning Shopify development

Good job! You have finally learned web development. The next thing that you will be learning is Shopify development. However, before you learn Shopify development, let’s understand first what is Shopify development.

What is Shopify development?

Shopify development is a way for Shopify developers to create applications or features to improve a Shopify online store.

Now, there are two things that you can create with Shopify development:

  • Shopify apps
  • Shopify themes

What is a Shopify app?

A Shopify app is what you call the “plugin” and is mostly used or installed to improve a Shopify online store. You can usually find these apps from the Shopify app store and so if you plan to create public Shopify apps, then this is where your apps are going to end up. Otherwise, if you only wish to improve your personal Shopify store, then you can just create a private Shopify app.

What is a Shopify theme?

Now, what about Shopify themes? What are they? Well, Shopify themes are what most Shopify stores used to properly display the storefront. They are the ones that control what to display and what not to display in your browser. If you’re familiar with WordPress, then WordPress theme is similar to the Shopify theme. The only difference is Shopify theme development uses its own programming language which is called Liquid.

If you want to learn more about Shopify theme development, you can enroll in our course by clicking the button below.

So now that you at least have an idea of what is Shopify development, the next thing that you should learn is Shopify especially if you haven’t truly touched a Shopify store.

Don’t worry, you don’t have to purchase a Shopify store to learn Shopify. You can go to the Shopify Developers page and there you can create a partners account so you can create a development store.

So, you might be confused a little, what is a development store?

A development store is a Shopify store meant to be used for testing your Shopify apps and Shopify themes. That’s why it’s called a “development” store.

So, what should you learn in your Shopify store? Well, you should obviously learn how to navigate through a Shopify store. You should know how to create a product, how to go to the customizer page, how to access the locales, etc. In fact, you should really master all of the sections of a Shopify store. Otherwise, you’ll end up confused about where to find these sections.

Doing Shopify development

Okay, so let’s assume that you have done everything I mentioned above. Now what?

Well, obviously, you can start making Shopify development projects but like I mentioned earlier, there are two things that you can create with Shopify development, Shopify app and Shopify theme.

Now, the question is…

Which one should you make? Apps or Themes?

I highly recommend you to start with Shopify theme development because that’s where you will be learning everything about Liquid programming and Liquid programming is very important especially if you’re going to create a Shopify app that customizes a Shopify store.

Conclusion

I know it looked pretty simple but learning Shopify development can take a lot of time. I remember it took me 1 month to learn how to create a Shopify app but obviously, everyone is not the same. So my advice for you is to just take it easy and don’t pressure yourself a lot. Learn Shopify development when you feel like it and sooner or later, you’ll realize that you are now able to develop Shopify themes or apps.

If you’re interested, you can check out my courses here, I have put out a few courses that teach you how to create Shopify apps and Shopify themes.