Shopify Liquid API: Maximize Your E-commerce Potential

How to create Shopify Ajax-carts using "Liquid Ajax Cart" Javascript library

In this article, we will learn how to create an adjustable card functionality for Shopify using the Liquid library. We will use a free Shopify theme called Minimal to demonstrate the process.

Steps:

1. Install the Minimal theme.

2. Add a new section for the adjustable card.

3. Add basic code for the card section.

4. Include the section in the theme liquid template.

5. Add Liquid Edges card library.

6. Upload and include the Liquid Ascart JavaScript file.

7. Identify the data attributes for the card section.

8. Improve user experience by highlighting the card when it's updating.

9. Fix the card counter in the header.

10. Add the remove button for the card.

11. Show error messages for limited stock products.

In just 10 minutes, we have created a standard adjustable card functionality without writing any JavaScript code. The Liquid Edges card library also provides JavaScript functions to work with the card state and make calls to the Shopify card API. Check out the documentation website for more features.

How to Make a Shopify API Request

Hey, I'm Megan, a developer advocate at Shopify. Today, we'll be discussing how to use an access token generated by Shopify to request product information through the Admin API.

APIs:

If you're familiar with web development, you know that APIs are sets of protocols and rules used to define how you can integrate your application with a source. The APIs provided by Shopify are no different and are the primary way that app developers can integrate their apps with Shopify.

Admin API:

Shopify has a few APIs available, but we will be focusing on the Admin API since we only want product information. The Admin API gives your app the ability to read and write Shopify store information. This includes products, orders, shipping, and more. All requests to the Admin API need to be authenticated.

Authentication:

In this article, I will be demonstrating how to make authenticated requests using both curl and a plugin for VS Code called ThunderClient. You can use whatever HTTP client that you prefer.

Creating an Application:

To start, we need to create a new application in the Shopify admin. Notice here that this is a custom application, which is fine for our use case because it's only going to be installed on a singular store, but you can also create public apps as well.

API Scopes:

Part of the authentication and authorization process involves us telling Shopify exactly what information we would like to request through their APIs. We can do this by specifying the API scopes. We can configure these scopes when creating the application. For the purposes of this demo, I'm only going to be selecting the read product scope because all I need to do for this app is read product information.

Access Token:

Here you can see the access token that is generated by Shopify. Now that the app is installed, we will send this access token along in the header for any HTTP request that we make to the Admin API. This is how Shopify will identify and authorize us to get the information that we are asking for.

Requesting Information:

Now that the app is installed and ready to go, let's take a look at how we might request that information. The URL for the GraphQL Admin API endpoint is as follows:

https://store-name.myshopify.com/admin/api/2021-07/graphql.json

We would fill in the store name here. This specifies the Admin API version. We do have REST endpoints available too.

Curl Request:

To make a Curl request, we fill in the Shopify store as the first part of that URL, and then we have to include the access token as a header so that Shopify can identify us. The name of this header is Shopify X-Shopify-Access-Token. It's important to keep your access token secret. You wouldn't want to commit this to get or share it with anyone because it is how Shopify identifies you in the future.

GraphQL:

The next step is to actually define the query that we want to send to GraphQL. In this case, I'm just going to ask for the first 10 products and their ids and titles. That's a simple enough example to prove that this authentication token will work.

ThunderClient:

We can do the same thing that we just did in Curl, but we're going to use ThunderClient instead. Because it's a GraphQL query, we are going to switch it to a POST. We'll use that same endpoint that we had before that includes our Shopify store URL. We'll switch to the header tab and include the X-Shopify-Access-Token. In the body tab, we define exactly what we're asking for from the GraphQL endpoint.

That covers it! Those are all the steps that you need to generate an API access token to request information from your Shopify Admin API. You can use tools like Curl or ThunderClient or whichever HTTP client that you prefer. Practicing these API calls before you actually start your development is a great way to speed up your actual development to make sure that your API requests are functioning properly, and you're getting the data back correctly.

The New Shopify Dev Documentation for Liquid is AMAZING right now!

Shopify has released an update to its documentation for Shopify Liquid, and in this video, we will be discussing the changes. The new documentation has a cleaner design, a new navigational sidebar, and faster page performance. The code snippets in the documentation can now be edited and customized in real-time, making it easier for developers to go through the objects and filters. Additionally, there is a new tag called inline underscore comment that allows developers to create comments more efficiently. However, the color palette has changed from green to blue, and there is no badge or separate section for new features. Also, it would be helpful if Shopify could add a documentation for the Shopify JavaScript global object. Overall, the updates are impressive, and the documentation is more user-friendly than before.

SHOPIFY LIQUID: Theme Programming for Beginners [CRASH COURSE]

Welcome to this crash course on Shopify liquid, the templating language of Shopify themes. In this article, we will cover the following topics:

## Introduction

- What is Shopify liquid?

- How does Shopify liquid work?

- What are the benefits of using Shopify liquid?

## Pure Shopify Liquid

- Creating variables with the assign tag

- Using filters to manipulate variable values

- Creating arrays with the split filter

- Using for loops to loop through arrays

## Incorporating Store Data

- Accessing objects using the global objects (collections, products, pages, blogs)

- Outputting object attributes using dot notation

- Looping through collections and outputting product information

## Incorporating Theme Data

- Accessing theme data through the customizer

- Using theme data in liquid templates to customize themes

## Limitations of Shopify Liquid

- What can and cannot be done with Shopify liquid

- Understanding the concept of scope

Overall, this crash course will provide a comprehensive guide to Shopify liquid programming, including basic syntax, object access, and limitations. By the end of this article, you should have a good understanding of how to use Shopify liquid to create custom Shopify themes.

Beginners Guide To Shopify Liquid in 2022

- Introduction to Shopify Liquid as a template language for Shopify themes

Features:

- Shopify Liquid is written in Ruby and has unique syntax compared to other programming languages

- Shopify Liquid is used for rendering static and dynamic content on Shopify stores

- Shopify Liquid uses its own architecture and template files to display pages

- Shopify Liquid acts as the middleman between Shopify stores and the server where data is stored

- Shopify Liquid is categorized by objects, tags, filters, and themes

Objects:

- Objects are used to output data from a Shopify store and have various attributes

- Examples include the shop object, product object, and collection object

Tags:

- Tags are used for programming logic and can be divided into control flow, iteration, theme, and variable tags

- Examples include the if tag, for tag, form tag, and layout tag

Filters:

- Filters modify the output of an object and can be used for strings, numbers, arrays, URLs, colors, etc.

- Examples include the up case filter, date filter, and money filter

- Shopify Liquid is a powerful template language that allows for the customization of Shopify themes

- Understanding Shopify Liquid can greatly enhance the development of Shopify stores

How to use JSON Templates with Shopify Themes

In this article, we will be discussing various aspects of Shopify and Liquid, including their uses, features, and advantages. We will also explore the role of JSON and GitHub in the development of Shopify applications.

Main Points:

1. Shopify:

- Overview of Shopify and its features

- Benefits of using Shopify for e-commerce

- Examples of popular Shopify stores

2. Liquid:

- Introduction to Liquid and its syntax

- Uses of Liquid in Shopify theme development

- Examples of Liquid code snippets

3. JSON:

- Explanation of JSON and its structure

- Importance of JSON in Shopify app development

- Examples of JSON files used in Shopify

4. GitHub:

- Overview of GitHub and its role in Shopify development

- Benefits of using GitHub for version control

- Examples of GitHub repositories for Shopify projects

5. Shopify CLI:

- Introduction to Shopify CLI and its uses

- Benefits of using Shopify CLI for Shopify app development

- Examples of Shopify CLI commands

In conclusion, Shopify and Liquid are powerful tools for e-commerce and theme development, while JSON and GitHub play important roles in Shopify app development. With the help of Shopify CLI, developers can streamline the app development process and create high-quality Shopify applications. By leveraging these technologies, businesses can create engaging online stores that drive sales and improve customer satisfaction.