While anyone can quickly launch a Shopify store with the available free and premium themes, some store owners prefer to use code to create a custom store with a branded, unique shopping experience.
The Shopify code language is known as Liquid. It uses placeholder code that’s designed to pull specific data from Shopify’s database and display it in your theme when a customer visits your store.
If you want to learn how to use this language, a helpful resource is the Shopify Liquid Cheat Sheet.
The Liquid Cheat Sheet is a laundry list of Shopify variables and Shopify filters, creating an at-a-glance reference to have handy while designing your own Shopify themes and customizing your online store.
Here’s some Liquid code and functionality you’ll likely be working with a lot when customizing your Shopify store.
#cta-visual-pb#
This returns the email address of your online store. There are various ways to use this object such as creating a mail link in your store or a contact button that engages the client’s email.
The more payment types you accept the more likely your customers are to make a purchase from your store. This object returns an array of the accepted credit card types for your online store. You can also use payment_type_img_url filter to link to the SVG image file of the credit card. Alternatively, consider adding some prominent images throughout the site that show other payment types you accept like Amazon Pay, Google Wallet, PayPal, etc.
The Transaction objects will come into play for confirmation information and in the customer area where your customers want to review an order and check the status of a transaction. There are a number of transaction objects that you’ll be working with including:
This code is used to indicate whether a product is available returning “true” if available for purchase and “false” if not available for purchase when all the product’s variants are reduced to zero or less and the product has been set to prevent purchases if the item is out of stock.
This is an alias for product.description and it’s the Liquid code you’ll use to display the description of your product. Detailed product descriptions are key to improving conversions and should positioned prominently on the product page.
This code returns an array of the product’s images. Use the img_url filter to link to the product image you’ve stores on Shopify’s content delivery network (CDN).
This liquid code doesn’t just display the designated price. Instead, it returns the lowest price of all the product’s variants. This is the same as product.price_min.
This code returns the designated title of the product. While it’s tempting to optimize product titles, avoid stuffing them with a long string of keywords. This code will return the full product title where used and could create formatting issues for extremely lengthy titles.
Returns a list of all product types within a collection.
Returns all of the products inside a collection. Note that there is a limit of 50 products that can be shown per page.
Returns the title of the desired collection.
Returns the title or discount code of the discount. This liquid code is the same as discount.title.
This code returns the total amount of the discount’s savings if it has been applied to multiple line items. You can use a money filter in Liquid to return the value in a monetary format, which is a great addition to the cart to show the customer how much they’ve saved so far (and encourage them to shop more.)
Returns the line item’s image inside the shopping cart. You can apply the img_url filter directly to the line item instead of its image attribute. This will generate a working image URL for any object with an image attribute (variant, product, line item, collection), image object, or image src. This is useful for line items, since it will output the item’s variant image or the product’s featured image if no variant image exists.
This object code shows the product title being purchased in a line item in checkout. When using this code it will return both the product.title as well as the variant.title separated by a hyphen. For example, if the customer purchased a shirt with a color variant it would output as something like “vneck shirt – blue”.
The truncate filter is useful to truncate a string down to the number of characters passed as the first parameter. An ellipsis (…) is appended to the truncated string and is included in the character count. One way content can be truncated is with a long product description. The larger product description at the lower end of a product page can be truncated so only a portion of the description is shown at the top. Likewise, a truncated product description can be used on a product quick view before loading the product page.
This filter in liquid created a link to all products in a collection that share a given tag. For example, you could designate “sale” as the tag and a link would be generated for all products tagged as sale items in your Shopify store.
This Liquid filter is applied to collection pages and creates a URL to a collection page with the provided sort_by parameter. This filter applies only to collection URLs. For example, if you applied a “best-selling” parameter to the filter the link generated would take the user to the designated collection page with all products sorted by best-selling.
If you want to help your customers shop for specific types of products you can use this Liquid filter. This creates a URL that links to a collection page containing products with a specific product type. For example, you could generate a link that opens a collection page displaying only specific kinds of shirts within that collection.
When you’re customizing your Shopify store it can be handy to leave notes at specific lines within the code. This Liquid tag allows you to leave un-rendered code inside your template. Any text within the opening and closing comment blocks will not be displayed or output and any code within will not be executed. This is helpful for flagging areas you’re working on updating or leaving notes regarding code and functionality.
Liquid has a handy feature allowing you to save multiple lines of code as snippets. These snippets, stored within the snippets folder of your theme, can be easily recalled for later use. This Liquid tag allows you to insert a specific snippet from that folder, saving you a significant amount of coding time when reusing the same lines of code in multiple places.
There are a lot of types of forms that you’ll use in your Shopify store beyond a contact form on your site. Blog comments, creating customer accounts, and even product pages (adding products to a cart) are all done using form submission. Each use of the form tag will require different attributes and input elements. There are a variety of form types you’ll use in your store including those to:
You’ll likely need to get very familiar with the article object and its attributes if you plan to host a blog. Content marketing can generate a significant amount of traffic but to keep the content engaging and easy to read you’ll want to make sure you’re including all the right information on a post when coding how it’s displayed. Key attributes to pay attention to include:
This is only a short list of the tags, filters, and objects you’ll be working with in Liquid. The full list of Liquid code is available inShopify’s Liquid Cheat Sheet which can be found here. With each code entry you’ll find a “learn more” link that takes you to examples of how each instance of code can be used.
If you’re still struggling Liquid, Shopify offers extended documentation as well as an active community of designers and developers who take the time to review and respond to questions.
Manually editing code can be a time-consuming process.
You could save a lot of time by using the Shogun page builder app instead. Shogun’s drag-and-drop WYSIWYG interface allows businesses to reduce the amount of time it takes to create pages by up to 80%. Just imagine what you could do with all that extra time…
#cta-visual-pb#