Although anyone can create a Shopify store quickly using the free and premium themes available, some store owners prefer code to create their own store with a unique, branded shopping experience.
Liquid is the Shopify code language. It uses placeholder code to pull data from Shopify’s database into your theme.
The Shopify Liquid Cheat Sheet is a great resource for learning how to use this language.
The Shopify Liquid Cheat sheet is a list of Shopify variables, Shopify filters. It provides a quick reference for designing Shopify themes or customizing your online store.
This is the Liquid Code and functionality that you will likely use a lot when customizing Shopify.
Shop.email
This will return the email address for your online shop. This object can be used in a number of ways, including creating a mail button or link to your online store that connects with the client’s email.
Shop.enabled_payment_types
Your customers will be more likely to purchase from your store if you accept more payment methods. This object returns a list of accepted credit cards for your online shop. To link to the SVG file of your credit card, you can use the payment_type_img_url filters. You can also add prominent images to your site that display other payment types, such as Amazon Pay, Google Wallet and PayPal.
Transaktion
Transaction objects are used to confirm information, and in customer areas where customers can review orders and check the status of transactions. You’ll work with a variety of transaction objects, including:
- Transaction.id returns the unique numeric identifier of the transaction
- Transaction.amount returns the amount of the transaction
- Transaction.status returns the transaction status
- Transaction.status_label – returns the translated output of a transaction’s status
- Transaction.created_at – gives a timestamp when the transaction was created
- Transaction.receipt returns text with information about the payment receipt from the payment gateway. This information includes the test case payment and authorization code, if any.
Product.available
This code can be used to determine if a product is currently available. It will return “true” for products that are available for purchase. If all variants of the product have been reduced to zero or lower, the product has been set up to stop purchases if it is out-of-stock.
Product.content
This is the alias product.description. It’s the Liquid Code you will use to display your product description. Detail product descriptions are important for improving conversions. They should be prominently displayed on the product page.
Product.images
This code returns an array with product images. You can use the img_url filter in Shopify to link to the product images you have stored on Shopify’s Content Delivery Network (CDN).
Product.price
The liquid code does not display the price. It returns the lowest price for all product variants. This is the exact same as product.price_min.
Product.title
This code returns the product’s title. It’s tempting to optimize product names, but avoid stuffing them full of keywords. This code will return all product titles, if any, and can cause formatting problems for very long titles.
Collection.all_types
A list of all products in a collection is returned.
Collection.product
All products within a collection are returned. There is a limit to 50 products per page.
Collection.title
Returns the title for the collection you want.
Discount.code
This returns the discount code or title of the discount. This liquid code is identical to discount.title.
Discount.total_savings
If the discount has been applied to more than one line item, this code will return the total savings. A money filter in Liquid can be used to return the value in a currency format. This is a great way to encourage customers to shop more.
Line_item.image
This returns the line item’s picture in the shopping cart. The img_url filter can be applied directly to the line item, instead of the image attribute. This will create a working URL for any object that has an image attribute (variant or product, line item, collection), object, image object or image src). This is especially useful for line items as it will output the variant image of the item or the featured image of the product if there is no variant image.
Line_item.title
This object code displays the product title that was purchased as a line item during checkout. This code will return both product.title and variant.title separated with a hyphen. If the customer bought a shirt with a color variation, it will output something like “vneckshirt – blue”.
Truncate
The truncate filter can be used to reduce a string to the number characters specified in the first parameter. The character count includes an ellipsis (…) that is added to the truncated string. A long product description is one way to reduce content. A longer product description can be reduced to show only a small portion of it at the top of a product page’s product page. A product quick view can also be used to display a reduced product description before loading the product page.
Link_to_tag
The liquid filter created a link to all products that share the same tag. You could, for example, designate “sale” in the tag. A link will be generated for all products that are sold in your Shopify store.
Sort_by
This Liquid filter applies to collection pages. It creates a URL to the collection page using the provided sort_by parameter. This filter is only applicable to collection URLs. If you add a “best selling” parameter to the filter, the link generated will take the user to the collection page with all products sorted alphabetically.
url_for_type
This Liquid filter can be used to help customers shop for certain types of products. This will create a URL linking to a collection page that contains products of a particular product type. You could create a link to a collection page that displays only certain types of shirts.
Comment % %
It can be useful to make notes on specific lines of code when customizing Shopify stores. You can use the Liquid tag to add unrendered code to your template. Any text in the closing and opening comment blocks will be removed and no code will be executed. This allows you to flag areas that need updating, or leave notes about code and functionality.
% is included in the %
Liquid offers a convenient feature that allows you to save multiple lines as snippets. These snippets can be stored in the theme’s snippets folder and easily remembered for later use. You can insert a specific Liquid tag from that folder. This will save you significant time when you reuse the same lines of code in multiple places.
% from %
You can use many forms in your Shopify store, beyond the contact form. Form submission is used to submit blog comments, create customer accounts, and even add products to a shopping cart. Different input elements and attributes will be required for each use of the form tag. There are many forms you can use in your store, including the:
- Find new customers
- Editing customer address information
- Create a customer login page
- Login as a guest
- Add product variants to the cart
- Customer password recovery and other services.
Article
If you want to start a blog, you will need to be familiar with the attributes and object of an article. While content marketing can bring in a lot of traffic, it is not easy to maintain engagement and make the post easily readable. You should pay particular attention to the following key attributes:
- Article.author – Displays the author of the content
- Article.comments – Returns all approved, published comments about an article
- Article.content is the main content of the article
- Article.created_at returns the data that the article was created/published
- Article.image – The featured image of the article has been returned
- Article.title returns the title of an article
These are just a few of the tags and filters you’ll use in Liquid. Shopify has provided a comprehensive list of Liquid codes. You can find it here. Each code entry will have a link to “learn more”, which takes you to an example of how that code can be used.
Shopify has extensive documentation for Liquid users who are still having trouble. There is also an active community of developers and designers who will take the time to answer questions.
Shopify liquid add section
You may have seen similar functionality when customizing a theme within the admin section of Shopify. This allows you to add, remove and re-arrange sections. This feature is very useful when you want to differentiate your site from others that use the same theme. It allows you more control over how your site flows and not being forced into certain sections. Unfortunately, these options are not available on the homepage. The Debut Theme was used to illustrate the images on this blog. However, you’ll find that this is true for most themes unless they are heavily customized.
The first thing you need to do is to ‘Add new template’ to the page where you wish to add dynamic sections. For this example, our new page template will be named page.test-page.liquid. The only thing you’ll need to include in your page template is this code that will call the new section you’ll be creating soon:
Once you’ve created the template, you can select it to edit a page in your Shopify admin section. In the sidebar, you will see the “Theme templates” section. It looks something like this:
To match the section code you added to the page template earlier, click ‘Add new section’. Our new section will be called test-page.liquid in this example.
You will need to click ‘Add new snippet’ to match the snippet(s). For this example, our new snippet will be named video-on-page.liquid. This snippet uses the video ID from the Customize theme settings. It is also added to a YouTube embed code for simplicity. This allows you to define any dynamic section that can be reused, and even copy existing ones.
Liquid Shopify Reference
Shopify created Liquid, a template language. It is available as an open-source project on GitHub and is used by many software projects and companies.
This document explains the Liquid tags and filters that can be used to create Shopify Themes.
Variations in Liquid
This reference includes a variation of Liquid that can be used with Shopify themes. It contains tags, filters, as well as objects that can be used for Shopify storefront functionality and stores.
Shopify uses slightly different versions Liquid to create dynamic content for the following features. These variations are not included in the reference.
Referencing objects
You can use liquid objects to build your theme. These object types can be used to build your theme, including but not limited to:
You can store resources such as products or collections, and their properties
The standard content used to power Shopify themes such as content_for_header
You can use functional elements to create interactivity such as search and paginate.
An object could be a single data point or have multiple properties. A product might be a related object such as a product within a collection.
Some objects are accessible worldwide, while others can only be accessed in specific contexts. To find out its access scope, refer to the object reference.
Shopify Liquid Add to Cart on the Homepage
Shopify store owners are you trying to create a link to direct users to the cart page that has the items pre-loaded into their carts. This tutorial will show you how to create a Shopify Add to Cart link.
Side Note – This may be difficult for Shopify users. A knowledge of CSS, HTML and JavaScript is required.
A cart permalink is required to create a Shopify Add to Cart link. We will be discussing cart permalinks later in this tutorial. But, before we get into that, let us see how to create a Shopify Add-to-Cart link.
Your add-to-cart URL will look something like this:
Replace “www.yoursite.com” with your website.
Replace VARIANTID by your product variant ID.
You should replace “1” with the quantity you wish to add to your cart.
You can change the variables “VARIANTID1”, “VARIANTID2” and the quantities of each.
Cart permalinks can be defined as pre-built links that allow customers directly to a shopping cart and checkout. These permalinks are best for apps that allow shoppers to buy items from one merchant within a cart.
You want to link to Shopify’s checkout screen directly with a cart that contains items. Do you want to include a “Buy It Now” button in your blogs or newsletters as well?
Cart permalinks is the answer to your question about “how to add Shopify cart links.”
Slide Cart – This is the best slide drawer app available on Shopify. It is equipped with all the features that will improve the customer experience. Slide Cart Drawer is an app that helps increase conversion rates. This allows for faster sales and makes any store a more attractive option.
Cart Upsell – Offer additional products to your customers before they pay. Slide Cart Drawer lets you add up to 10 products. It is easy to use and adapts to your store’s design.
Slide Cart Increase Sales
Slide Cart Drawer is a beautiful design that works on all devices. Upsell widgets can be added to your cart. Increase conversion rates. Multiple gift wrapping options
Rewards & Upsells
Add additional items to your cart. Encourage your customers to redeem different types of rewards. You often buy together
Free Gifts
You can offer free items depending upon the total value of your cart. Create multiple rules to unlock products. Get them to spend more by offering great deals
Shopify liquid comment
Shopify website developers love Liquid template. Your online shop wants to enable Liquid platform’s comment section so customers can ask questions and give feedback. Today’s tutorial will show you how to comment on liquid code.
Liquid, an open-source templating system that supports HTML functionality, can be used to upload dynamic content. There are three types of Liquid: tags, filters and objects. Liquid’s content is indicated by objects. Tags are used to control the flow and logic of websites. Filters can be used to modify the output of Liquid objects that are separated by a slash.
What is comment syntax #what-is-comment-syntax
Tag markup is generally not allowed to modify the text. It is enclosed by curly braces or percent signs. There are two types: raw and comments tags. You can use tags to add logic to your template. Tags can be used if/else sentences to make a single template send emails in multiple languages. In a case statement, comment and raw tags can be used.
How to comment out liquid code #how-to-comment-out-liquid-code
This tutorial will focus on comment tag. Comment allows you to put unrendered code within a Liquid template. Visitors can edit and copy comments. The Liquid code contained within these blocks and the text between them will not be generated.
Shopify Liquid Add Google Fonts
Step 1: Searching for Google Fonts in your Shopify store
Firstly, you go to Google Fonts official website at: https://fonts.google.com.
You can choose the category you wish to search in the Google Fonts search filter sidebar and then decide how you would like the results displayed – alphabetized by name, popularity, or by age.
You can select “Latin” to narrow down your search for typefaces that support English under languages
Next, click the boxes to open sliders menus. You can then fine-tune your options regarding style (variations on font like italic, bolder or lighter), thickness, slant, and width.
To quickly find the right font, you can also use the search form
Step 2: Embed code
Once you have found the Google Web Fonts you like, click on the font to open its detail page. You can also set font styles in the detail page.
To add or remove a style, click on the + Select This Style button in the list.
The embed code will be displayed in the right sidebar. There are two options for embedding:
: Embed the font with a link tag.
style: Embed the font into style tab or CSS files
Step 3: Add Google Fonts To Your Shopify Store
Go to Online Store > Themes from your Shopify admin.
Click Actions > Edit code to find the theme that you wish to edit.
Select the theme.liquid from Layout.
Scroll down until you see the closing head tag ().
Paste the embed code after this tag
You can save your settings and click Save.
This CSS rule can be used to set the font for any text.
