Search Results for: Shopify

Why You Should Use Laravel For Shopify App Development

Whether you are a web developer or a Shopify store owner, chances are you need to use a Shopify app to improve your online store and increase your sales. However, there are times when you can not find the perfect app for your Shopify store and that’s when you start to think of creating the app.

The problem is… There are so many technologies you need to know! So, which one should you use?!

Laravel, a PHP framework, provides an excellent option for building Shopify apps.

How to Build Shopify Apps with Laravel and PHP (Tutorial)

In this article, we’ll talk about the reasons why Laravel is a great choice for your next Shopify app development.

  1. Easy to Learn and Use

    Laravel is known for its simple and intuitive syntax, making it easy for Shopify developers to learn and use. Its well-documented and organized codebase, combined with its comprehensive documentation, makes it a great choice for developers of all skill levels. This makes it possible to build high-quality Shopify apps quickly and efficiently.

  2. Scalable and Flexible

    Laravel is a scalable and flexible framework that can handle large amounts of traffic and data. It’s also highly modular, allowing developers to easily add new features and functionality to Shopify apps. This means that as the needs of your Shopify store change, your app can evolve and grow with it.
  3. Robust Security Features

    Security is a top priority for Shopify app development, and Laravel provides a number of robust security features. Laravel includes features such as password hashing, encryption, and SQL injection protection, making it easier to build secure Shopify apps.
  4. Large Community and Support

    Laravel has a large and active community of developers, which means that there is a wealth of resources and support available. Whether you’re just starting out or are an experienced developer, you’ll find help and advice on the Laravel forums, Stack Overflow, and other online communities.
  5. Integration with Shopify API

    Laravel provides seamless integration with the Shopify API, making it easy to build custom Shopify apps. The Laravel Shopify library provides a simple and straightforward way to interact with the Shopify API, so you can quickly and easily build custom features and functionality for your Shopify store.

How to create Shopify apps with Laravel?

Now that you know the reasons why you should use Laravel for Shopify app development, it’s now the time to know and learn how to create Shopify apps using Laravel.

At this moment, there are two ways that you can approach to start building Shopify applications:

We managed to create a playlist of videos showing you how to create Shopify apps using Shopify CLI. If you’re interested to learn further, you may check the video below:

Conclusion

Laravel is an excellent choice for Shopify app development. Its easy-to-learn and use syntax, scalable and flexible architecture, robust security features, and integration with the Shopify API make it a top choice for Shopify developers.

If you’re looking to build a custom Shopify app, consider using Laravel to get the job done.

How To Build Shopify Apps with PHP (Update 2023)

We have a Shopify App Development Course! Be one of the first students!

Are you looking for an in-depth guide on how to create Shopify apps? Click the enroll button !

Introduction

We are aware that there are hundreds of PHP tutorials online on how to create a Shopify app using PHP, but in this course, we’ll tackle all the components that you may want to add to your Shopify app like displaying products and such.

Now before we proceed, Shopify made an update with their API where they version their API quarterly also known as API versioning. It is important to know that Shopify will always make updates to their API so if you are developing Shopify apps, then you should also keep your apps updated.

Update in 2023

If you’re not aware, Shopify is encouraging most developers to create Shopify apps through their CLI and so, if you’re interested to learn how to create Shopify apps using Shopify CLI and PHP/Laravel, we’ve managed to compile a series of videos teaching how to create Shopify apps in Laravel.

What is Shopify?

Shopify is one of the most popular e-commerce platforms and provides a great opportunity for developers to build and monetize their own web applications. With the ever-evolving technology, building Shopify apps has become easier and more efficient thanks to Shopify CLI. In this blog, we’ll explore the latest technologies and tools for creating Shopify apps in 2023.

But first…

What is Shopify PHP?

There’s no such thing called “Shopify PHP”, but to make it understandable to you. PHP is a programming language for web development that can be used to develop a Shopify app. Though there are PHP Frameworks that you can use as well to build a Shopify app like Laravel.

In 2023, you can now create Shopify apps simply by using Shopify CLI.

Is it hard to do Shopify App Development?

Building your own Shopify Apps is very easy, all you need is to understand how the API works. Shopify is a Rails application, there are lots of Shopify repositories that you can use for FREE to integrate your website into Shopify API. Here’s the list:

Personally, I use this Shopify API Client made by Alex here:
Shopify Generating API Token Guide

To begin, you have to create a new Shopify app in your Shopify Developer account, so if you don’t have an account yet, you can sign up by visiting developers.shopify.com

Shopify App Development Tutorial PHP - WeeklyHow

Building Your Own Shopify App with PHP

In this article, we’re going to learn how to make a Shopify application from the scratch using PHP, if you already have a Shopify developer account this is the first page you’re going to see:

Developer Shopify Dashboard
Developer Shopify Dashboard

Proceed to left navigation panel and click the Apps category

Shopify App Development Tutorial PHP

Click Create app and select what type of app you wish to build. Custom app or Public app? For custom apps, you can only install the app to one Shopify store with no need for Shopify to review your app. However, with public apps, Shopify will need to review your app in order for Shopify stores to install your Shopify app.

Shopify App Development Tutorial PHP

After selecting, that should give you the following form.

App Name – The name of the Shopify application you’re about to create.
App URL – The URL of your website where you’re going to upload your Shopify files
Whitelisted Redirection URL(s) – This is where you’re going to list your generate token script or URLs you need as you authenticate your Shopify.

For web hosting, we recommend getting it from Hostinger as it’s more compatible with Shopify especially if you’re just getting started.

Hostinger free hosting plan for everyone
  • Compatible with Shopify
  • LightSpeed Web Server
  • Free domain and SSL certificate
  • 30-day money-back guarantee

Once you’re done, filling out the form, click Create app

Image of Shopify App Development using PHP
Here’s everything you need to start building your Shopify App

Now that we have our first Shopify app created, it’s time to make our website connected using these API credentials. To do this, download at least one of the Shopify repositories that I have provided in this article.

Create Shopify Apps for Storefront

Customize and add more features to your Shopify store using Shopify apps!

To continue with this project, you may proceed to this article.

In part 2, we’ll be using the credentials that we have to connect it to PHP. If you’re interested, proceed to this article below:

11 Best Shopify Apps for 2023: Increase Your eCommerce Profit

When it comes to selling items online, Shopify can be your reliable e-commerce. Not only it can make your selling easy but it also provides hundreds of Shopify apps available to help you grow your business.

However, due to the amount of the Shopify apps available, finding the best ones can be hard. But don’t worry, we are here to help you find the best Shopify apps to increase sales.

Best Shopify Apps for Sales

One of the most common problems in e-commerce is having a low sales rate. The follow Shopify apps for sales can help you increase your sale.

Mobile App Builder ‑ Shopney

Send Push Notifications using Mobile App Creator by AppIt

Most of your visitors can be using mobile devices and sometimes you are not able to reach them.

But with Mobile App Creator – Shopney, you can now develop a mobile app that will target your visitors who use android devices and iOS devices without any hassle or purchasing.

Their subscription cost only around $99.99/month for silver plan and $199.99/month for gold plan.

Product Reviews by Shopify

Feedbacks are very important for increasing sales because your customer’s feedback is like free marketing. Whenever your customers give reviews to your products, they’re allowing other customers to know that your product is good.

Shopify Product reviews allows you to add a customer review feature to your products. This provides a way for your customers to engage with you, as well as each other to encourage sales.

  • FREE to install!
  • Theme-friendly design Reviews automatically match your store’s look and feel
  • Easy customization – Edit layout options, text, and colours without needing to code
  • Bulk actions – Publish, hide, filter, and manage reviews quickly and easily
  • CSV import and Export – Import and export your reviews as a spreadsheet
  • SEO-friendly review scores – Add review scores to your Google search results.

Ultimate Sales Boost

Shopify App Ultimate Sales Boost by Hextom on cart page

As a buyer, you may already know how exciting it is to see that your favorite item is on sale or discount. That’s one of the features of Ultimate Sales Boost. Ultimate Sales Boost is a Swiss army knife to optimize your checkout flow (a.k.a conversion funnel). You may use it aggressively or moderately to build the path of your eCommerce success.

Another good thing about this app is you don’t need developer anymore. Just one click installation and launch your first campaign in one minute. That’s how easy to use this app is.

Conversion Plus

Most online merchants are losing about 67.45% of sales from cart abandonment and the key factors can be addressed simply by introducing a sense of urgency into the checkout flow.

By incorporating a sense of urgency to your checkout flow, you can make the consumers feel like they could lose out on an appealing offer if they don’t commit to an order immediately.

  • Free to use.
  • Cart reservation timer, with adjustable duration.
  • Change the displayed text as you see fit.
  • Options to define what happens after the timer expires.
  • Multi-language support.
  • Modify the look and feel to match your theme.
  • Optimized across all screen sizes including desktop, tablet, and mobile.
  • No App branding, to keep your site professional.
  • Easy step-by-step installation – No programming required.

Best Shopify Apps for Marketing

With Shopify apps for marketing, you can capture the attention and loyalty of your customers through social media, contests, programs, and more.

Use the following Shopify apps to effectively capture your customer’s attention.

Kit: Run better Facebook ads

Kit is not just a marketing app, it is an artificially-intelligent assistant that will talk to your customers 24/7. That means even if you’re not online, your Kit will always be reliable to assist your customers.

But of course, that’s not the only thing Kit can do. It can also manage your Instagram and Facebook ads, email marketing, and social posts to drive more sales and help you grow your business. All for Free!

Here’s what Kit can do for you:

  • Set up Facebook dynamic ads and retarget shoppers most likely to buy
  • Build lookalike audiences to ensure the best targeting for your ads
  • Create Facebook and Instagram ads that drive sales
  • Post Facebook updates to drive customer engagement
  • Send personalized ‘thank you’ emails to generate repeat purchases
  • Create and promote discount codes to acquire and retain customers
  • Generate quick reports to provide insights on sales and marketing performance

SEO Image Optimizer – SEO

According to a study of U.S. web-based searches, the world’s second most-used search engine is Google Images! That means your store can also get the benefit of getting traffic through proper SEO of images.

With SEO Image Optimizer, you can improve your Google search results and rankings in just a couple of clicks. No coding required!

Features:

  • Alt-Text Optimization
  • Unlimited Image Sync Quota
  • New Images Checked Once per Week
  • Always FREE!

Pro Features:

  • Complete SEO Optimization
  • Meta Tag Optimization
  • Auto Pilot SEO Fixes
  • Fix Broken Links
  • Google Snippets
  • Auto JSONLD

Smile: Rewards & Loyalty

Your customers become more valuable the more they shop and engage with your brand. A rewards program gives you an easy way to encourage the behaviour that builds emotional connections and customer loyalty.

Smile offers three programs that make program management simple and intuitive:

  • Loyalty points program
  • Referral program
  • VIP program

Why should you choose Smile.io for rewards and loyalty?

As the most used rewards program in the world, we’ve learned a lot from helping tens of thousands of businesses with their retention and loyalty strategies. We’ve used that experience to design a rewards solution that makes it easy for anyone using Shopify or Shopify Plus to create a beautiful rewards program that brings customers back.

  • Simple design customizations to reflect your brand
  • Get your rewards program started in just a few clicks
  • Integrate with the marketing tools you already use

We believe the future of commerce is rooted in emotional relationships, and want to help every business build a strong customer retention strategy that promotes sustainable growth.

Best Shopify Apps for Customer Support

The following apps can help you support and track your customers to increase their satisfaction and build more loyalty. I highly recommend you to install at least one of the following Shopify apps as it will no doubt help your business.

Tidio Live Chat

Research shows that live chat can boost sales by as much as 40%. Next time your customer faces an issue, they won’t go to the competitors or waste time — they’ll contact you.

With Tidio, you can help your customers immediately even if you are not available. Thanks to the artificially-intelligent bots. Bots automatically reply to 43% of the most popular inquiries. Right after registering, with a few clicks of the mouse, you’ll be able to add Bots that will check product availability, inform about delivery status, and give the estimated delivery time. When faced with an issue, the Bot will transfer the conversation to an operator.

Tidio uniquely merges live chat, Bots, and Marketing Automation to meet the expectations of the most demanding Shopify store owners.

With its Free plan, you will get the following features:

  • Up to 3 operators for a lifetime
  • Live Chat
  • Messenger Integration
  • Email Integration
  • iOS & Android App
  • 100 Chatbot Triggers a month

100 Chatbot Triggers feels too short? You may upgrade your plan to $18 per month and get UNLIMITED Chatbot Triggers.

AfterShip ‑ Track & Notify

Keep your customers updated of the whereabouts of their orders until delivery through an intuitive, customized tracking page and automated notifications.

Track & Notify is not just a tracking app, it is a Shopify app that will also help your SEO. Thanks to its improved SEO and ranking system that replaces the carrier’s tracking link with their auto-generated link to drive traffic to your site instead of the carrier’s site. Improve SEO and increase organic search.

With its starter plan, you can have the following features:

  • 50 shipments quota per month
  • Branded tracking page with banner

You may also upgrade your plan to essential, growth and up to PRO and get more shipments quota per month.

If you are having issues with your customers not being able to properly track their orders then I suggest you give Track & Notify a try. It’s worth a shot!

Best Shopify Apps for Products and Inventory

The following apps will help you automate track your inventory to prevent your customers from buying sold out items.

Wipeout

If you are having trouble manually setting up your inventory then you’re obviously not using Wipeout. Wipeout is a tool that will quickly hide your sold-out products and show them once they’re on-stock once again. Thanks to its automatic daily hide/publish feature, you won’t have to worry about your items being out of inventory.

Use wipeout for free and get the following features:

  • FREE manual option if the store has less than 3000 products
  • Manually press “Hide” or “Unhide” buttons whenever needed
  • Exclude
  • Reverse within 24 hours

You may also upgrade your plan to automatic plan for $9 per month and get the following features:

  • Automatically hide & unhide once a day.
  • Daily Email reports
  • Exclusion List to exclude products you want the app to ignore
  • Reverse within 24 hours

Oberlo

Oberlo by Shopify is one of my favorite apps. Not only it will help you get started for ecommerce but it will also help you find the products that you wanted to sell and not worry much about inventory and shipping.

You may install Oberlo and get all the free features to get started building your business. But if you want to level up your game, you may upgrade from starter plan to basic plan ($29.90/month) and pro plan ($79.90/month).

What to look for Shopify Apps?

If you are new to Shopify apps, chances are you install apps that you think will help your business. Some entrepreneurs think that Shopify is like a WordPress, you find plugins, install, and see results. Shopify is a different case, you have to do research when you look for Shopify apps.

I would recommend you do the following before hitting the install button.

  • Read the reviews of the Shopify apps
  • Check if the app is getting high ratings
  • Check if the contact is working and see if they will respond
  • Look for screenshots

Conclusion

Shopify apps are great, especially if you are working on your business by yourself. You may also check out these 20 Shopify apps that will increase your sales by up to 64.56%. If you have experience with apps both good and bad, you may share them in the comments below. We’d love to have a chat with you below.

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.

Shopify Liquid Programming Tutorial: Learn How Themes Work

Whether you are new to Shopify, or you are already a Shopify store owner, you’ve probably encounter a code that looks something like this:

{% assign first_model = product.media | where: "media_type", "model" | first %} {% if first_model %} {{ 'product-media.js' | asset_url | script_tag }} {% endif %}
Code language: PHP (php)

This is Shopify liquid, a template language created by Shopify that serves as a framework for all Shopify themes. If you’re unfamiliar with Shopify themes, they are the templates that controls the styles and the layout of your online stores. So, if you wish to customize your online store, it’s best to learn liquid programming.

In this article, we’ll take a look at Shopify liquid.

We’ll start by understanding the Shopify liquid programming, and then we’ll learn about its features such as:

  • Objects in Liquid
  • Tags in Liquid
  • Filters in Liquid

So if you’re ready, let’s begin learning Shopify liquid!

Video Tutorial

Do you prefer video tutorials instead of reading? You may watch the video version of this article below:

What is Shopify Liquid?

Shopify liquid is a template language used for creating or modifying Shopify themes. If you’re familiar with Ruby, you probably have heard about this template language because it’s written in Ruby or it’s known to be written in Ruby, but in terms of syntax, it’s very different compared to other programming languages.

In addition, Shopify liquid is very limited. Like there’s a lot that you cannot do with liquid. For example, you cannot retrieve a data from a third party server. Just from Shopify.

What is it used for?

Shopify Liquid is mainly used as the “backend template language” of Shopify themes. Meaning, it is only used to control what is displayed in the Shopify storefront. Don’t get the wrong idea though because Liquid cannot do many things like connect to a third-party server, creating directives, etc.

In web development, there are two contents that you can render: static content and dynamic content.

Static content is a content of a page that stays the same and is usually hard-coded in HTML whereas dynamic content. It’s the content of a page that changes depending on specific parameter.

For example, we have the following product page.

It specifically rendered the product for cats because in the URL, we specified that we want to render this specific product.

The highlighted text above is called a handle. By changing this to a different handle of a product, the product page will render a different product.

In addition to that, Shopify uses its own architecture or template files to display this pages.

For example, the product page is using product.json. It’s a JSON template that uses sections to complete the page, taking a closer look at the section files you will see that there’s a liquid code mixed with HTML, CSS, and JavaScript.

{% comment %}theme-check-disable TemplateLength{% endcomment %} {{ 'section-main-product.css' | asset_url | stylesheet_tag }} {{ 'component-accordion.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-rte.css' | asset_url | stylesheet_tag }} {{ 'component-slider.css' | asset_url | stylesheet_tag }} {{ 'component-rating.css' | asset_url | stylesheet_tag }} <link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'"> <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script> {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%} {%- if first_3d_model -%} {{ 'component-product-model.css' | asset_url | stylesheet_tag }} <link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'"> <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'"> {%- endif -%} <section class="page-width"> ...
Code language: HTML, XML (xml)

Note that the code above is just an example of what code can a liquid file have.

So to put it simply Shopify Liquid is like the middle man between Shopify stores and the server of Shopify (where all the data about your Shopify store is stored).

When a Shopify store asks for a data through liquid, Shopify liquid will ask the server of Shopify if that data that is being requested is available.

If the server returns 200 OK, then the server will give the requested data back to liquid. Then liquid will hold that data and bring that to the Shopify store’s theme.

If the requested data is not available, then the server of Shopify will just return a 404 error response. Meaning, Shopify liquid won’t have anything to bring.

Shopify Liquid Features

Shopify liquid is categorized by three features: objects, tags, and filter.

Objects

Also known as variables are wrapped in double curly braces {{ }}. And it’s used to output pieces of data from a Shopify store. For example, this is a shop object:

{{ shop }}

Inside of the shop object, there are properties or attributes that you can use by using dot notation ( . ).

Let’s say we use the name attribute. It should be something like this:

{{ shop.name }}

So you’re going to type it like above. The above attribute should render the name of your Shopify store.

There are plenty of attributes that you can use from most of the objects in Shopify. So if you wish to learn more about these objects and attributes, I suggest going to the Shopify developers’s documentation page and get to know these attributes or objects. Now let’s proceed to tags.

Tags

Tags in Shopify liquid are the programming logic that tells templates what to do. This tags are wrapped in curly braces, followed by percentage symbols {% ... %}.

And it’s usually followed by a closing tag or an end tag {% end... %}.

Tags are divided into four categories: control flow, iteration, theme, and variable tags.

Control flow tags are the tags that you can use to create conditions. These control flow tags are the:

  • if
  • unless
  • else/elsif
  • case/when

And lastly, the operators and/or.

To create a tag, you need to start it with a tag itself. Say, for example, the, if tag:

{% if condition %} ...

Then you need to close it with a closing tag.

{% if condition %} ... {% endif %}
Code language: PHP (php)

However, not all tags are required to have a closing tag. A good example of this is else or elsif. These tags can only be used between if and, endif.

For example:

{% if condition %} ... {% elsif condition %} ... {% else %} ... {% endif %}
Code language: PHP (php)

Now, if you want to create multiple conditions for a control flow tag, you can use the operators and, or, or.

For example, we have the following condition:

{% if condition_A and condition_B %} ...

If you’re using and, the two conditions (condition_A and condition_B) must be true in order to execute the block of codes inside of the if.

If you’re using or, either of the two conditions can be true, it will still execute the code inside of the if tag.

{% if condition_A or condition_B %} ...

Now, all of this are part of the fundamentals of programming. And so if you’re a familiar with it, I suggest go and learn that because that’s quite a huge topic for this article.

There are plenty of good resources out there that will teach you everything about programming like the Introduction to Programming and Computer Science by freeCodeCamp.

Next is the iteration tags.

Iteration tags are the tags that you can use to repeat blocks of code. This is where you can use the for tag to loop through an array of values. For example, we have the following for tag:

{% for product in collection %} {{ product.title }} {% endfor %}
Code language: PHP (php)

In the example above we have a condition that for each product in the collection, we are going to render the name of the product.

So for example, in that collection, we have three products: Product #1, Product #2, and Product #3. The entire code above will basically output three, heading title ones (<h1>) with a text: Product #1, Product #2, and Product #3.

You can also combine for tag with an {% else %} tag. This is very useful too, especially if you want to know whether the {% for %} tag executed the codes inside of it or not.

Next up are the theme tags.

Theme tags are the tags that you can use:

  • to generate template specific HTML codes;
  • to divide arrays into multiple pages, and;
  • to tell Shopify themes to render or use a specific layout or snippets.

So this is where you’ll find the form tag, the section tag, the pagination tag, and the layout tag.

Lastly, is the variable tags, variable tags are the tags that you can use to create liquid variables. If you’re familiar with JavaScript or other programming languages, you can create variables (most of the time) using var keyword or a data type. In Shopify liquid, you can use either the {% assign %} tag or {% capture %} tag to create variables.

So how can you create a variable?

{% assign variable_name = shop.name %}

In the example above, we use the assign tag to create a variable. You can create the assigned tag, followed by the name of the variable. Then followed by an equal sign to create or assign a value. In the example above, we used the name of the Shopify store.

Now, if you use this variable, like how you use an object, this will output the name of the Shopify store.

Now let’s continue to the last feature of Shopify liquid. And that is the filters.

Filters

Filters are kind of hard to explain, but to put it simply, they are methods that modifies the value or the output of an object.

They are placed within an object tag and it’s denoted by a pipe symbol.

Now let’s take a look at this example above. Here we have a product.title object. Now we can use a filter by adding a pipe symbol and then specify what filter that you want to use. Let’s say we use the upcase filter.

{{ product.title | upcase }}

This will then change the output of the object and make the string output all uppercase. That’s basically how filters work. They change or modify the output of an object.

Now, there are plenty of filters that you can use for every situations. There are filters for strings, for numbers, for arrays, for URLs, for colors, et cetera, but they all do the same thing. They modify the value or the outputs of an object.

Closing lines

So that is Shopify Liquid, a template language used for rendering pieces of data from a Shopify store. Now, if you have any question, let me know in the comments below, otherwise, feel free to subscribe to our YouTube channel and like the attached video. We have plenty of good videos in our channel so feel free to check them out! If you have request, let us know!

Shopify Development – Learn Shopify Liquid Programming

Do you want to learn Liquid programming so that you can customize or understand the codes of your Shopify theme? If yes, then you have come to the right place!

Welcome to the Shopify Liquid Programming course! In this course, my goal is to help you understand what is Liquid like what it does, and how to use it.

We’re going to cover the following features of Liquid:

  • Objects
  • Tags
  • Filters

If you are a Shopify store owner, and you’d like to understand how a Shopify store is running, then learning Liquid can be extremely helpful.

Why Take This Course?

One of the biggest mistakes that people make is that they customize their Shopify theme aimlessly. What they usually do is Google the features that they’re looking for, then they will copy a code from someone else and apply it to their Shopify store without understanding the code that they copied and pasted. This can be an issue since they don’t understand the objects, tags, and filters.

That’s why I’m here to help you avoid making that mistake!

Before Taking This Course

Now, what are the things that you need to know before taking this course? To get the best experience out of this course, it’s highly recommended that you know how to use Shopify. What I mean is, you should know your way around Shopify from admin, to settings and to storefront.

Next, it’s important that you know at least the fundamentals of programming (Like the operators, or data types). Though I will do my best to explain what is going on in each lessons so that even if you have less knowledge about programming, you’ll be able to understand the code. In addition, for each lessons, I will provide resources related to the lessons (e.g. PDFs or articles) so that you can use those resources to learn more about Liquid.

Another thing that you can do is to post questions in the QnA section. So if you have questions, you can post them in the QnA. I will also include in this course, quizzes or questionnaires so that you can test yourself if you can finally use Liquid.

So are you ready to learn Liquid? If yes, join me and I will see you on the other side.

Changelog

February 07, 2023

  • Added new lesson(s)

November 27, 2022

  • Added new lessons
  • Updated the video introduction of the course

October 30, 2022

  • Updated resource(s) and course Material(s)
  • Updated chapter name(s)

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.

Shopify Development – Liquid Programming Masterclass

Do you want to learn Liquid programming so that you can customize or understand the codes of your Shopify theme? If yes, then you have come to the right place!

Welcome to the Shopify Liquid Programming course! In this course, my goal is to help you understand what is Liquid like what it does, and how to use it.

We’re going to cover the following features of Liquid:

  • Objects
  • Tags
  • Filters

If you are a Shopify store owner, and you’d like to understand how a Shopify store is running, then learning Liquid can be extremely helpful.

One of the biggest mistakes that people make is that they customize their Shopify theme aimlessly. What they usually do is Google the features that they’re looking for, then they will copy a code from someone else and apply it to their Shopify store without understanding the code that they copied and pasted.

This can be an issue since they don’t understand the objects, tags, and filters.

That’s why I’m here to help you avoid making that mistake!

Now, what are the things that you need to know before taking this course?

To get the best experience out of this course, it’s highly recommended that you know how to use Shopify.

What I mean is, you should know your way around Shopify from admin, to settings and to storefront.

Next, it’s important that you know at least the basics of programming (Like the operators, or data types). Though I will do my best to explain what is going on in each lessons so that even if you have less knowledge about programming, you’ll be able to understand the code.

In addition, for each lessons, I will provide resources related to the lessons (e.g. PDFs or articles) so that you can use those resources to learn more about Liquid.

Another thing that you can do is to post questions in the QnA section. So if you have questions, you can post them in the QnA.

I will also include in this course, quizzes or questionnaires so that you can test yourself if you can finally use Liquid.

So are you ready to learn Liquid? If yes, join me and I will see you on the other side.

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