Creating a Custom Add to Cart Button with Shopify Liquid

Liquid is the templating language that developers use to create custom solutions within the Shopify theme. Once you know your way around Liquid, you’ll have much more control over how your store looks and functions. 

In this guide, we’ll show you how you can use Liquid to customize one of the most essential elements of any online store — the Add to Cart button. 

Creating a Custom Add to Cart Button with Liquid

To create your own custom Add to Cart button with Shopify Liquid, all you need to do is insert the necessary code through Shopify’s built-in theme editor. Be sure to create a backup of your theme that you can restore before making any code changes. Once you’re ready, follow these steps:

Step 1. Log in to your Shopify account and select the sales channel that you would like to customize in the left sidebar of the main control panel. 

Step 2. Click on the “Customize” button next to your theme — this will open up Shopify’s theme editor. 

Step 3. Use the dropdown menu located near the top of the screen to navigate to the page template you want to edit (in this example, we’ll be editing the “Default product” template). 

Step 4. In the left sidebar of the theme editor, you’ll see all of the different sections and blocks that make up the template listed in the order of where they appear on the page. Hover your cursor over the spot on this list where you want your custom Add to Cart button to be located, then select “Add section” or “Add block”. 

Step 5. You’ll be prompted to choose what kind of section/block you want to add — search for and select the “Custom Liquid” option. This will allow you to use Liquid code to create your new section or block. 

Step 6. Here’s an example of Liquid code that you can use to create an Add to Cart button:

<form method="post" action="/cart/add">

  <input name="id" value="{{ product.variants.first.id }}" type="hidden" />

  <input name="add" value="ADD TO CART" type="submit" />

</form>

Once you’ve added this code and saved your changes, you’ll see your custom Add to Cart button appear on the live version of your site:

Of course, the beauty of using Shopify Liquid to create your Add to Cart button is that it opens up a whole world of possibilities for customization. 

For example, with the following tweaks to the code featured above, you can include a quantity selector next to your Add to Cart button that makes it easier for visitors to buy more than one of your item:

<form method="post" action="/cart/add">

  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

  <input min="1" type="number" id="quantity" name="quantity" value="1"/>

  <input type="submit" value="ADD TO CART" class="btn" />

</form>

After you save your changes, the output of this code will automatically be displayed on the live version of your site as well:

Creating a Custom Add to Cart Button using Shogun’s Custom Elements Feature

Shogun’s visual editor gives you all the tools you need to customize your Shopify pages. Inside the visual editor, you’ll find the element library, which offers a wide variety of ecommerce features that you can add to your site with just a couple clicks — including headings, text, images, video, accordion menus, countdown clocks, and much more.

Each element is fully customizable, and you can adjust how the elements are arranged on the page however you want. This allows you to quickly set up high-quality product pages, category pages, blog posts, and whatever other type of content you might want to create.

There’s also a pre-made Shogun element for Add to Cart buttons, but it’s possible that even with the extensive customization options available, you still might not be able to get the style or functionality to match exactly what you have in mind. Thankfully, if you’re ever unable to get what you need through the pre-made options in the element library, you can always add a new custom-coded element to the library yourself:

• After downloading and installing Shogun, select the “Apps” option in the left sidebar of the main Shopify control panel. 
• Open Shogun. 
• Select the “Developer tools” option in the left sidebar of Shogun. 
• Go to the “Custom elements” section and click on the “Create new…” button. 
• Here, you can create your own elements from scratch by adding Liquid, CSS, and JavaScript code. 

Once the custom element for your Add to Cart button has been saved, you’ll find it included along with all the pre-made elements (as well as any other custom elements you’ve already created) in the element library. 

Creating a Custom Add to Cart Button using Shogun’s Visual Editor

As mentioned above, there’s already an Add to Cart button available in Shogun’s element library, and it comes with many different customization options to choose from — there’s no need to custom-code this feature from scratch if you don’t feel a need to.  

But before you can add this element, you’ll need to have a page that’s ready to edit in Shogun in the first place.

There are two ways to add a page to Shogun: you can import a page that already exists on your Shopify store, or you can create a new page from scratch. 

To import a page, simply follow these steps:

• Open Shogun and go to the “Pages” section of the app — here, you’ll see two tabs, “Shogun” (pages that are ready to be edited in Shogun) and “Shopify” (pages that exist on your store but have yet to be imported into Shogun). 
• Open the “Shopify” tab.
• Look for the page you want to import (if you’re having trouble finding it, try using the page type filter or search bar), then click on the “Import page” button located next to it. 

And to create a new page from within Shogun:

• Go to the “Pages” section of the Shogun app. 
• Hover your cursor over the “Build or edit a page” option. 
• In the dropdown menu that opens up, you’ll find that there are two relevant options — you can choose a template to save some time, or you can start with a blank page to have full control over your design.

Whether you imported a page or created a new one, you will now be able to add your custom Add to Cart button:

• Open the Shogun app and go to the “Pages” section. 
• Select the page that you would like to add your custom Add to Cart button to — this will open up the page in Shogun’s visual editor.  
• Click on the “Elements” icon in the left sidebar of the visual editor (it’s the one that looks like a plus sign inside of a circle) — this will open up the element library. 
• Look through the element library for the “Add to cart” button element (you’ll find it in the “Shopify” section). Click and hold on the icon for this element, then drag it over to wherever you want your custom Add to Cart button to be placed on the page. 
• Like the other elements in the “Shopify” section, the “Add to cart” element connects directly to your Shopify catalog (product information is pulled over automatically, so you won’t need to waste any time inputting this data manually). Once you add the “Add to Cart” button element to the page, you’ll be prompted to select which product in your catalog you would like to connect it to. 
• After selecting the appropriate product, you’ll see the button appear on the page.

Again, there are myriad ways that Shogun allows you to customize this button, including:

• Button text: Add to Cart buttons don’t necessarily need to be labeled “Add to Cart” — getting a little more creative may help you support your brand identity. For example, Urban Outfitters uses the label “Add to Bag” instead, a nod to what it’s like to shop at one of their in-person stores. 
• Font: In addition to the content, you can also change the font of your button text. From Alegreya to Zilla Slab Highlight, hundreds of options are available.
• Size: This setting will adjust the size of both the button text and the button itself.
• Alignment: You can align the button to the left, right, or center. 
• Unavailable & sold out: You’re able to set it up so that the label content, font, size, or text color of your Add to Cart button changes automatically when the product is sold out or otherwise unavailable.
• Background: You can keep it simple and just use a solid color for the background of your button, or you can use a gradient or even an image.
• Border: Adjust the border thickness and radius (rounded corners) right down to the exact pixel. You can customize the color of the border as well.  
• Box shadow: Add a box shadow effect to your button. 
• Hover/focus style: Set it up so that the text color, button background, border style, or box shadow changes when the visitor hovers their mouse over the button. 
• Active style: Set it up so that the text color, button background, border style, or box shadow changes when the visitor clicks on the button. 

With all these options, the potential combinations of styling choices for your Add to Cart button are nearly endless. The only limit is your imagination. 

Top 3 Tips for Designing the Perfect Add to Cart Button 

Finally, now that you know how to create a custom Add to Cart button, let’s go over some of the most important design principles that you should keep in mind while doing so:

1. Put it up top: In web design, “above the fold” refers to the part of the page that visitors can see without scrolling down. The term originates from newspaper publishing, where the space on the front page above where the paper was folded in half was the only part of the paper visible on display racks. So, only the most interesting stories were chosen to be featured “above the fold”, as this is what would most likely persuade people to buy the paper. Likewise, only the most important parts of a Shopify page should be featured “above the fold” — and this certainly includes the Add to Cart button, as this navigation option leads directly to more revenue for your store. 
2. Make it large: Important elements like an Add to Cart button should also be relatively large compared to most other elements on the page. The larger your Add to Cart button, the easier it will be for visitors to find. Also, any clickable elements on your site should be fairly large anyway in order to help people who have issues with dexterity. 
3. Contrast the color: Use a color for your button that has a high amount of contrast with the background color of the page. This will help you catch people’s attention, and it’s helpful for any visitors who may have issues with their vision. 

By following these tips, you’ll be able to create a custom Add to Cart button that reflects your brand’s visual style, accommodates users with disabilities, and helps you convert more visitors into paying customers.