CarsonBain

Adding line item properties for personalization to your Shopify site

For some products in your store, you may want to capture other form-like information from the customer such as custom monogram/engraving text or a choice of colour in which inventory doesn't need to be kept. These fields are called line item properties and can be used to allow customers to make choices or add information about a product.

This post will take you through how to add line item properties to a new product page template, as well as how to make the names of these new properties customizable by adding them as Theme Settings. By the end of this post, you will have a product page with custom required inputs for colour and an optional monogram that will look something like this:

Creating an alternate product page template

CarsonBain

{
"type": "header",
"content": {
"en": "Personalization Options"
}
},
{
"type": "text",
"id": "dropdown_name",
"label": "Required Dropdown Label",

CarsonBain

{% comment %}
Product personalization line items
{% endcomment %}

<div class="product-single__personalization">
  
  {% comment %}
  Product personalization required dropdown
  {% endcomment %}
  

CarsonBain

Building a Quick Order Form with the Shopify AJAX API

This post will take you through the steps to add a quick order form page on your Shopify store. The form we will be adding allows users to quickly select quantities of items they would like to purchase, and then add all selected items to cart with one click.

Using the AJAX API for this type of task will give us a large amount of flexibility in how we can add items to the cart.

---

Creating a new page template

CarsonBain

<header class="section-header mb-0 text-center">
  <h1>{{ page.title }}</h1>
  <hr class="hr--small">
</header>

<div class="grid">
  <div class="grid__item large--four-fifths push--large--one-tenth">
    <div class="rte rte--nomargin rte--indented-images">
      {{ page.content }}
    </div>

CarsonBain

There are many Git workflows out there, I heavily suggest also reading the atlassian.com [Git Workflow][article] article as there is more detail then presented here.

The two prevailing workflows are [Gitflow][gitflow] and [feature branches][feature]. IMHO, being more of a subscriber to continuous integration, I feel that the feature branch workflow is better suited.

When using Bash in the command line, it leaves a bit to be desired when it comes to awareness of state. I would suggest following these instructions on [setting up GIT Bash autocompletion][git-auto].

Basic branching

When working with a centralized workflow the concepts are simple, master represented the official history and is always deployable. With each now scope of work, aka feature, the developer is to create a new branch. For clarity, make sure to use descriptive names like transaction-fail-message or github-oauth for your branches.