Tetsuro Takara's Blog » Shopify

Creating a Threadless-like Add-to-Cart button using jQuery and AJAX

Tetsuro — Mon, 12 Jul 2010 15:18:10 +0000

In this tutorial we will be modifying the product page of the Ripen theme to work more like the product page on Threadless. We’re going to be modifying the Ripen theme, but this tutorial is applicable to any Shopify theme. I would like to thank John Tajima again for teaching me how AJAX and JSON objects work with Shopify. We will also make it so that the number of products in the cart displayed automatically updates after you add an item to the cart.

A quick demo of the completed theme in action

1. Install jQuery

If you are unsure of how to do this, please see Steps 1 to 3 from this tutorial.

2. Install Colorbox

Grab the jQuery plugin Colorbox here, and upload it to your theme assets. We’re going to be using Colorbox to get the lightbox popup when a product is added to the cart. I usually use Fancybox for lightboxes, but I decided to go with Colorbox for this tutorial because it “can be called directly, without assignment to an element”. This means that I can call a Colorbox method, and create a lightbox on-the-fly when the “Add to Cart” button is clicked, but with Fancybox this would be impossible.

In your theme assets, you should have “jquery.colorbox-min.js” and “colorbox.css”.

Be sure to add these two files in the section to your theme.liquid as well.


     ...other assets
     {{ 'colorbox.css' | asset_url  | stylesheet_tag }}
     {{ 'jquery.colorbox-min.js' | asset_url | script_tag }}

3. Modify the “Add to Cart” button

Open your product.liquid file, and locate the input button for adding to the cart. The input button looks like this:

We want to do two things to this button: first, we want to make it so that even if the user clicks on it, the user is not taken to the cart page. Second, we want to call a custom function (that we’re going to be writing shortly) that makes an AJAX call to add the product to the cart.

 onclick="return false; addItem('add-to-cart');"/>

The addItem function takes the form’s id as a parameter. This is so that when we use jQuery later, we know which form to select. The opening tag for your form should look like this:

4. Preparing product.liquid

Add the following line at the top of product.liquid.

The added-box is where the content of the lightbox will be inserted. We need to wrap it in another div with a “display:none;” so that the content of the lightbox are not displayed on the actual page.

5. Preparing theme.liquid

Next, we have to modify theme.liquid a little so that the number displayed for the number of items in the cart updates automagically. In theme.liquid, find a place where you want to show a link to the cart. In this tutorial, I’m going to put it in the right column, under where it says “Shopping Cart”.


    {% if cart.item_count == 0 %}
       Your cart is empty.
    {% endif %}

What’s important here is that the tag has the id “cart-number”, so that we can select it with jQuery later to modify its contents.

Shopify Tutorial: Adding a Barchart for Inventory Using jQuery and JSON Objects

Tetsuro — Thu, 10 Dec 2009 16:12:37 +0000

I was looking at t-shirts at an online store one day, and it had a nice little bar chart that displayed how much of each size it had left. I thought to myself, “I wonder if this is doable in Shopify?”. The answer is yes, thanks to jQuery and JSON Objects. In this tutorial, I’ll be showing you how to add a bar chart in your product page that shows how much of each variant you have left in a bar chart. A big thank you to Javascript wizard John Tajima for introducing me to JSON objects and helping me out with the Javascript portion of this tutorial.

The bar chart integrated into the Moderno theme.

Implementing this feature can be done in three easy steps: adding the HTML/Liquid, adding the Javascript, and then adding the CSS. You can also fully customize the look of the bar chart with CSS. This bar chart will work for any theme, as long as you insert the HTML, Liquid, Javascript and CSS properly.

Keep in mind that this code will only work if you’re tracking the inventory levels of your product’s variant. In order to enable inventory tracking, you must navigate to your Product details page, and scroll down to where it lists the variants. Click the ‘edit’ link next to the variants, and in the dropdown menu, select “Shopify tracks this variant’s stock level”. Finally, enter the inventory level for this variant.

The way it works:

The algorithm is best explained with an example. You have a t-shirt with 3 variants: small, medium, large. Let’s say you have 2 smalls, 4 mediums, and 4 larges.

The Javascript code will first calculate the total inventory level for ALL variants – in this example, the total will be 10 (2 smalls + 4 mediums + 4 larges = 10). Then, for each variant, it will calculate the percentage of a single variant’s inventory level versus. the total inventory level. This percentage is then used to determine the width of each bar. The percentages in our t-shirt example would be 20% for small, 40% for medium, and 40% for large, and the CSS will fill in the black bars accordingly.

1. Download jQuery and put it in the theme.

If you are unsure of how to do this, please see Steps 1 to 3 from my last tutorial.

2. Insert the HTML/Liquid code inside of Product.liquid.

This is the code that is used to display the bar chart. Paste this code inside product.liquid where you want to output the bar chart.

{% if product.variants.size > 1 %}
  
    {% for variant in product.variants %}
      
        {{ variant.title }}

        
           
        
      
    {% endfor %}
  
{% endif %}

The code above first checks if the product has more than one variant. The bar chart will only show if there is more than one variant, because there is not much point in making a bar chart if there is only one bar to show.

Next, the for-loop creates a div with the class “inventory-bar” for each variant. The “inventory-bar” div has a gray background has a width of 100% (which means that it will be the width of the “inventory” div. The div within “inventory-bar” is the black ‘filler’ bar that will expand its width depending on how much inventory for the variant is available. The filler bar is assigned a width in percentage by the Javascript in Step 3.

The next function then takes the inventory level of each variant, and assigns the CSS property ‘width’ in percentage. The percentage is calculated by dividing the variant’s inventory level by the total inventory, and then multiplying the result by 100. Using jQuery, the class variant_i (where ‘i’ is the index number of the loop) is assigned an inline style with the calculated width.

3. Insert the Javascript/jQuery code.

Below the code from Step 2, insert the following Javascript/jQuery code.

The code above first creates a JSON object of the product that you are currently viewing, using Liquid’s “json” filter. We want to convert the product into a JSON object because it will allow us to use Javascript for calculations (unfortunately, Liquid alone is not sufficient, as it does not have many math functions).

Next, it loops through each of the variants of the product, and calculates the total of all variant inventories and stores them in a variable called total_inventory.

The last function takes the inventory level of each variant, and assigns the CSS property ‘width’ in percentage. The percentage is calculated by dividing the variant’s inventory level by the total inventory, and then multiplying the result by 100. Using jQuery, the class variant_i (where ‘i’ is the index number of the loop) is assigned an inline style with the calculated width. The CSS class variant_i is matched up with the variant_{{forloop.index0}} in the for-loop from the HTML code in Step 2, which ensures that the right width is assigned to the right variant.

However, if the variant’s inventory level is 0, the bar for the variant will not be given a width, and instead it will display a message that says “Sold Out”.

4. Insert the CSS code.

Inside your CSS file, insert the following selectors for the bar chart.


#inventory{
        /*Give this div a width if you'd like to set the barcharts to a certain width. Otherwise, it will take on the width of its parent div. */
}

.filler{
	background:#000;
}

.inventory-item{
	margin-bottom:15px;
}

.inventory-bar{
	background:#e1e1e1;
	height:20px;
	width:100%;
}

The simple CSS above styles the bar chart. By using your own CSS, you can customize the color, margin, width, etc. in any way that you like.

Here are some examples of the bar charts in action, in different themes:

The bar chart in the Dropify theme.

The bar chart in the Minimify theme.

Conclusion:

Originally, I had wanted to use just Liquid to accomplish this, but in the end I had to use a combination of Liquid and Javascript because Liquid cannot do many math functions. With that said I’m pretty happy that I used Javascript because I learned a great deal about JSON objects. (thanks again John!). I hope you find this technique useful, and I hope to see this in some themes in the future!

Shopify Tutorial: Making Sure a User Agrees to the Terms & Conditions Using jQuery

Tetsuro — Mon, 09 Nov 2009 15:02:31 +0000

In this short tutorial, I will be walking you through how to prevent users from going to the checkout page unless they have agreed to the Terms and Conditions using jQuery. We’ll be doing this by adding a checkbox to the cart page, which if checked, will allow the user to go the the checkout page. If it’s not checked, an alert box will be shown, and the user will be prevented from going to the checkout page.

1. Download jQuery

You can download jQuery here.

2. Add jQuery to your theme assets

In the Shopify backend, navigate to Assets > Theme Editor. Under Theme Assets, click the Browse button, and navigate to where you saved the jQuery file from Step 1. Double click the file to upload.

3. Load up jQuery in theme.liquid

In Theme Editor, open theme.liquid. In the section, enter the following code.

{{ 'jquery-1.3.2.min.js' |asset_url  | script_tag }}

This code will load the jQuery script that you uploaded in the section of all of your store’s pages.

4. Adding the checkbox in cart.liquid

In Theme Editor, open cart.liquid. Enter the following code – this will insert a checkbox and a label to your cart page. Please make sure that the ids of the checkbox and the label are the same (I named mine “agree”).


I agree with the Terms and Conditions

The location of where the above code goes will depend on how you want to style your cart page, but it can really go anywhere within the cart.liquid template. For this example, I’m using the Minimify theme, and I’ve placed the checkbox and its label directly above the checkout button. Here is what my cart page looks like:

For the next step, you’re going to need the id of the checkout button’s . The id will be used in the jQuery code in step 5. In my example, I gave the input an id named “checkout”.

5. Enter the jQuery code

The last step it to add the jQuery code that checks to see if the checkbox has been checked or not. Open theme.liquid again, and enter the following code in the section. The id of the checkout button is labeled in red. Be sure to add a pound sign (#) before the name of your checkout button’s id.

$(“#checkout”).click(function(){}); is a function that runs whenever the input with the id “checkout” is clicked. It then checks if the checkbox with id “agree” is checked or not. If it is checked, then it will proceed to the checkout page. If not, it will show an alert box with the message “Please agree to the Terms and Conditions”, and the user will NOT be taken to the checkout page.

If you are using another Javascript framework such as Prototype in your theme, you may have to use noConflict mode. Shown below is the same code but in noConflict mode.

Once this code is in place, your customers will not be able to proceed to the checkout without having checked the “I agree” checkbox. If they don’t have it checked, they will be shown a Javascript alert box instead of being taken to the checkout page.

Conclusion

This may be a bit bothersome from a buyer’s point-of-view, but from my understanding some places have laws that make it imperative to have an “I agree” checkbox when buying products online. You can download my example theme with the code in action here.

Hope that helped, ’til next time!

Shopify Tutorial: Customizing the Settings Form (Part 2 of 2)

Tetsuro — Mon, 21 Sep 2009 00:05:44 +0000

Last week I posted a tutorial on how to make some text customizable using the settings form. In this tutorial, I will be showing you how to customize the font and background using the settings form. I will be continuing to work on the Minimify theme that we modified in the last tutorial: please click here to download the theme if you don’t have it handy.

1. Create a new fieldset

Let’s start off by creating a new fieldset. Fieldsets allow you to group different sets of settings form inputs. For example, you can group all inputs that affect the font colors under a fieldset called “Font Colors”. Open the settings form code, add a new fieldset (as shown below in red).

My very own settings form!

    Colors
    
      
        Regular text
        
      
      
        Link Color
        
      
      
        Link Color Hover
        
      
    


    Font, Logo, Background

Regular text
Link Color
Link Color Hover

The tag works as the title of the fieldset. I named the new fieldset “Font, Background, Logo” because I’ll be adding settings for these elements in this tutorial. Notice how in the screenshot below, the title that I had between the tag appears as the title of the fieldset on the actual form. Your form should now look like this:

Alright! Now that we’ve got the new fieldset up, let’s fill’er up with some new settings!

2. Customizing the Regular Text Font

To create a dropdown menu that will allow users to change font of the regular text, you must first insert a new

This will create a new drop-down with the id “regular_font” in your settings form. In my example, I have it so that ‘Helvetica, Arial, sans-serif’ is the default font, but you can easily set it so that it’s another font from the list. For example, if you want Trebuchet MS to be the selected font, you can put the following

Click save, and refresh your screen. Your settings form should now look like the screenshot below.

The next step is to link font selected in this new dropdown menu with layout.css.liquid. Open layout.css.liquid, and look for the ‘font-family’ property for the body selector. The ‘body’ selector for layout.css.liquid is shown below.

body {
	background: #fff;
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	font-size: small;
        color: {{ settings.text_color }};
	}

You want to replace the value of the ‘font-family’ property with the Liquid tag that outputs the option selected in the “regular_font” dropdown. To do this, simply replace the value for ‘font-family’ with the following Liquid tag.

font-family: {{ settings.regular_font }};

Save layout.css.liquid. Now that the “regular_font” dropdown is tied in with layout.css.liquid, you can change the font on your site by simply selecting a font from the settings form, and clicking the “Save Changes” button!

3. Customizing the Logo

Being able to swap logos is probably the most sought-after feature by those who do not know HTML/CSS. This can now be done very easily thanks to the settings form.

To start, enter the two new tags (shown below in red and blue) inside the settings.html code.


    Font, Logo, Background
    
     
        Regular text
        
          
        
     
     
       Use a custom site logo?
       
     
     
      Site logo

Regular text
Use a custom site logo?
Site logo

What’s really cool is that you can set the maximum width and maximum height of the logo being uploaded, using the ‘data-max-height’ and ‘data-max-width’ attributes. This means that you don’t have to worry about cropping your image to the right size, because the form will do it for you without screwing up the proportions of the image. In the code above, I have set the maximum width to be 800 pixels because that is the width of the store’s layout.

Save the settings form, and hit refresh. Your settings form should now look like this:

What we have now is a checkbox that checks to see if the user wants to use his own logo or not, and an input for selecting the image that the user wants to use as the logo.

Unlike the other settings, we need to modify theme.liquid instead of layout.css.liquid. This is because we’re going to be outputting an image, and not modifying a CSS property. Open up theme.liquid, and look for the div with id “header”. In the Minimify theme, this is the div that contains the logo, so we’re going to be adding some Liquid to link it with our settings form.


  
    {{shop.name}}
  
  
    
      Cart^{{{ cart.item_count }}}

Replace the “header” div with the code below.


  {% if settings.use_logo_image %}
    
  {% else %}
  
    {{shop.name}}
  
  {% endif %}
  
    
      Cart^{{{ cart.item_count }}}

What we did above is we added a conditional statement (labeled above in red) to check to see if the user has the “use_logo_image” checkbox checked off. The line {% if settings.use_logo_image %} checks to see if “use_logo_image” is checked. If it is, then it will run the code in blue, which outputs ‘logo.png’. If it not checked, it will run the code shown above in green, which simply output the shop name in text.

When you upload an image for the logo, the form will automatically rename the file “logo.png”, so you don’t have to worry about renaming anything in theme.liquid.

Before:

After:

Shopify Tutorial: Customizing the Settings Form (Part 1 of 2)

Tetsuro — Thu, 10 Sep 2009 13:22:40 +0000

A few weeks back, Shopify released a new feature that allows designers to create a form within the theme editor that allow those without programming knowledge to customize their theme. The default themes already come with a form that allows you to customize certain aspects of the theme, but what if you want to add more customizable elements to the store? Or perhaps you’ve made a theme from scratch, and want to make your theme customizable so that your client can customize the theme themselves when you hand it over to them.

In this tutorial, I’m going to be using an older version of the Minimify theme to walk you through how to make the text colors customizable using the settings form. Please click here to download the Minimify theme. With that said, you can still follow this tutorial with a completely different theme.

1. Create the form

In the Theme Editor, click the “Create a settings form” button.

2. Rename “layout.css” to “layout.css.liquid”

The next thing you want to do is rename your CSS file so that it has a .liquid extension. This will allow you to have Liquid variables in your CSS file, which is necessary in order to make the settings form affect the values in your CSS file.

Open layout.css, and click the “Rename” link up top. This will open a textbox where you can rename the file. Add ‘.liquid’ to the name of the css file, and click the “Rename” button to save your changes.

3. Customizing the Regular Text Color

Let’s start off by having the form modify the color of the regular text of the theme. By default, the form will have 5 customizable elements, Regular Text, Accents, Background, Headers, and Regular Text. Changing the values in the form won’t do anything yet, because we haven’t told the layout.css.liquid file what to change.

In the theme editor, click the link that says “edit this form”. Doing this will open the code for settings.html.

Delete the entire content of settings.html, and copy/paste the following block of code. This is so that we can start fresh.

  My very own settings form!

  
    Colors
    
      
        Regular text

Regular text

Click save, close settings.html, and refresh your page. What you have now is a single color picker with the id “text_color”. This id is important to remember, as we need it to match it up with the color value in layout.css.liquid for the magic to happen. Your form should now look like this:

You can change the default color of the color picker by changing the hex value in the “value” attribute of the input. In the example above, it has the color “#d60f0f”, but you can change it to any hex color you wish.

Open layout.css.liquid, and look for the selector for the ‘body’ attribute. It should look like this:

  body {
    background: #fff;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    font-size: small;
    color: #000;
  }

Notice the line in red – this is the CSS property that we want to modify with the form. What we’re going to do now is put in some Liquid to ‘link’ the color value from the color picker to the value of the “color” property of the body selector.

Enter {{ settings.text_color }} for the value of the color property. It should look like this:

  color: {{ settings.text_color }};

Notice how “text_color” in the Liquid tag above matches up with the id of the color picker’s id. This is how we tell Liquid to take the hex value of the color picker with the id “text_color”, and output it in the CSS file. Save layout.css.liquid.

Here comes the exciting part! In your settings form, pick any color that you want to be the color for the regular text. Click the “Save changes” button. When you refresh your store, you should see that the regular text is now the color that you just chose in the Settings form!

Customizing the Link Colors

Link colors are changed much in the same way as the regular text. Let’s start off by first adding two more color pickers to your form, one for link colors, the other for the hover color for links.

  My very own settings form!
  
    Colors
    
      
        Regular text
        
      
      
        Link Color
        
      
      
        Link Hover Color

Regular text
Link Color
Link Hover Color

Open the editor for settings.html by clicking “edit this form”. Enter in two more <tr> elements, one for each new color picker. Rename the attributes for the labels and inputs accordingly (I named mine ‘link_color’ and ‘link_hover_color’). Your settings.html should now look like this:

Open layout.css.liquid. Enter {{ settings.link_color }} and {{ settings.link_color_hover }} for the ‘a’ and ‘a:hover’ selectors, respectively, as follows:

 a {
	text-decoration: underline;
	color: {{ settings.link_color }};
}

a:hover {
	color: {{ settings.link_hover_color }};
	text-decoration: none;
}

Now using your settings form, pick a color for the Link Color and Link Hover Color, and hit save changes. When you refresh your store, the links should be the color that you picked for Link Color, and when you hover over them, they should be the color that you picked for Link Hover Color!

Conclusion

In this tutorial, I went over how to set up the settings form to change the colors of some of the text in your theme. You can download what we’ve done so far here.

In part 2 of this tutorial, I will be walking through how to modify fonts and background images using the settings form. Stay tuned!

Shopify Tutorial: Conditional Statements in Liquid and Metadata

Tetsuro — Thu, 03 Sep 2009 15:42:14 +0000

One question I see often in Shopify is “how do I make my metadata for the different pages on my store?”. I’m not sure how this affects ranking in search engines (in fact if anyone can clarify this for me, that would be awesome), but in this tutorial I will just show you how this is done. This tutorial will also serve as a refresher on how to use conditional statements with Liquid.

A Brief Overview of Conditional Statements in Liquid

Conditional statements are ways to tell Liquid (or any other programming language) to do something based on certain conditions. For example, you can tell the code “If condition A is true, take action A. If condition B is true, take action B. If neither are true, take action C”. Below is an example of a conditional statement in Liquid:

{% if template == "index" %}
       You are on the index page!
{% elsif template == "collection" %}
       You are on the collection page!
{% else %}
       You are on a page that is NOT the index page nor the collection page!
{% endif %}

The code above will output the line in red if the visitor is on the index page of the Shopify store. Conversely, it will output the line in green if the visitor is on the collection page of the Shopify store. If the visitor is on a page that is not the index page nor the collection page, it will output the line in blue.

You can also have conditional statements within conditional statements. For example:

{% if template == "page" %}
       {% if page.handle == "about-us" %}
              You are looking at the About Us page!
       {% endif %}
{% endif %}

The code above will first run the conditional statement marked in red, which checks if the Liquid template that is currently being used is “page”. If it is, it will go to the next conditional statement below, marked in green. If not, it will go the end of the conditional statement, which will result in nothing being done.

The conditional statement marked in green checks to see if the handle of the page is equal to “about-us”. If it is, it will output the line “You are looking at the About Us page!”. If the handle of the page does not equal “about-us”, it will not do anything.

By using a combination of if and elsif statements, as well as nested conditional statements, you can set up different metadata for every template or even for every different product, page, or collection that you may have.

1. Open theme.liquid

If you are editing directly through the Shopify admin, theme.liquid is accessed by going to Assets > Theme Editor, and clicking on the thumbnail that has the label “theme.liquid”.

If you are editing offline with Vision, open “theme.liquid” in the layout folder of your theme.

2. Add the Conditional Statements

The head section of your theme.liquid should look something like the code below. It may not look exactly the same because you may have extra Javascript or CSS files, but what’s important here is that the if-statement goes under the “Content-Type” meta tag.

A Shopify theme can have up to 9 templates: article, blog, cart, collection, index, page, product, 404, and search. Each template corresponds to a specific section of a site – for example, “index” is the template used the first page of your Shopify store, and “product” is the template used for when you’re viewing a single product. In this example, we will be using 4 of the 9 available templates: index, page, product, and collection.

{% if  template == "index" %}
      Index metadata goes here.
{% elsif template == "collection" %}
      Collection metadata goes here.
{% elsif template == "product" %}
      Product metadata goes here.
{% elsif template == "page" %}
      Page metadata goes here.
{% endif %}

{{ 'main.css' | asset_url | stylesheet_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{{ content_for_header }}

In the code above, I am checking to see which of the four templates the visitor is currently seeing: index, collection, product, or page. Once this is done, you can enter in more conditional statements to set up metadata for specific pages, collections, or products.

{% if  template == "index" %}
      Index metadata goes here.
{% elsif template == "collection" %}
      {% if collection.handle == "all" %}
             Enter in metadata for 'all' collection here.
      {% elsif collection.handle == "summer" %}
             Enter in metadata for 'summer' collection here.
      {% endif %}
{% elsif template == "product" %}
      {% if product.handle == "t-shirt" %}
             Enter in metadata for 't-shirt' product here.
      {% elsif product.handle == "baseball-hat" %}
             Enter in metadata for 'baseball-hat' product here.
      {% endif %}
{% elsif template == "page" %}
      {% if page.handle == "about-us" %}
             Enter in metadata for 'about-us' page here.
      {% elsif page.handle == "contact-us" %}
             Enter in metadata for 'contact-us' page here.
      {% endif %}
{% else %}
      Enter in default metadata in case none of the above conditions are met.
{% endif %}

Using the format above, you can enter in different metadata descriptions and keywords for every different template, product, page, or collection. In this example, I only put two elsifs for each code block, but you can add as many elsif statements as you desire. Please click here to see an example of what the head section of your theme.liquid might look like.

Conclusion

As you can see, conditional statements can give you a lot of control over what is outputted on a page, and metadata is just one of many of its applications. In a future tutorial, I would like to go through how to accomplish the same thing with Liquid’s switch statements.

UPDATE 09/23/2009:

You can pretty much forget about using meta keywords for your sites – as explained by Google here. You should still use meta description though!

Tetsuro Takara's Blog » Shopify

Creating a Threadless-like Add-to-Cart button using jQuery and AJAX

1. Install jQuery

2. Install Colorbox

3. Modify the “Add to Cart” button

4. Preparing product.liquid

5. Preparing theme.liquid

Shopify Tutorial: Adding a Barchart for Inventory Using jQuery and JSON Objects

The way it works:

1. Download jQuery and put it in the theme.

2. Insert the HTML/Liquid code inside of Product.liquid.

3. Insert the Javascript/jQuery code.

4. Insert the CSS code.

Conclusion:

Shopify Tutorial: Making Sure a User Agrees to the Terms & Conditions Using jQuery

1. Download jQuery

2. Add jQuery to your theme assets

3. Load up jQuery in theme.liquid

4. Adding the checkbox in cart.liquid

5. Enter the jQuery code

Conclusion

Shopify Tutorial: Customizing the Settings Form (Part 2 of 2)

1. Create a new fieldset

My very own settings form!

2. Customizing the Regular Text Font

3. Customizing the Logo

{{shop.name}}

Cart{{ cart.item_count }}

{{shop.name}}

Cart{{ cart.item_count }}

Shopify Tutorial: Customizing the Settings Form (Part 1 of 2)

1. Create the form

2. Rename “layout.css” to “layout.css.liquid”

3. Customizing the Regular Text Color

My very own settings form!

Customizing the Link Colors

My very own settings form!

Conclusion

Shopify Tutorial: Conditional Statements in Liquid and Metadata

A Brief Overview of Conditional Statements in Liquid

1. Open theme.liquid

2. Add the Conditional Statements

Conclusion

Cart^{{{ cart.item_count }}}

Cart^{{{ cart.item_count }}}