Tetsuro Takara's Blog

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.

Back in Business

Tetsuro — Sun, 09 May 2010 22:57:47 +0000

Dazed, tanned, and broke. These three words pretty much sum up my state right now, after spending three weeks in Tokyo, Okinawa, and Taipei. I’m currently at Narita Airport waiting for my flight to Toronto, where I will catch another plane back to Ottawa.

Waiting at Narita Airport in Tokyo – taken with my webcam… I can’t find my actual camera

It’s been a while since my last post, but now that I’m finally finished my winter semester I can start writing here more often. I will also try my best to catch up on unanswered comments! It’s starting to sink in that there are only two more semesters of school left… I can’t wait to finish completely!

The highlight of this past semester was diving into the world of interactive multimedia. For one of our classes, we were taught an open-source programming language called Processing. My classmates Grant Lucas, Mark Pintar and I built the ‘faceTable’, which was an interactive table display that would display the user’s Facebook information by using customized Reactivision markers. Words don’t do it justice – we will be posting videos of it in action on Vimeo once we make the demonstration videos.

Plans for the summer

This summer I’d like to find and share more hacks and tweaks in Shopify that would allow storeowners to add unique features to their store. I’d also like to write more tutorials to help storeowners get started with their stores.

In my spare time, I plan on playing around with Processing and OpenFrameworks in an attempt to create some cool visual displays. Particle systems is an example of something I’d like to create using one of these two languages. I’ll also be playing shows with the band The Mudplots, as well as work on another band project that I have brewing :)

Anyway, I’m off to kill some more time – two more hours until my flight to Toronto! Don’t fail me, Reddit…

UPDATE: A random elderly man from Calgary just approached me with a super-serious look on his face asking if I could check something for him using the wifi on my laptop. Thinking it was an emergency, I opened up my laptop. Turns out he just really needed to know the result of the Pittsburgh vs Montreal game for his hockey pool. Canadians are awesome :D

Reading Week

Tetsuro — Wed, 17 Feb 2010 22:57:03 +0000

Back in January, I returned to Carleton University to resume my studies after a 1-year work term at Shopify. This week is Reading Week, and I’m temporarily back at Shopify to do some work. It’s really nice to be back in the office, although it makes me want to drop out of school and stay here forever :P

School’s been pretty hectic. MEL Scripting, marketing, and product design methodology have all been keeping me pretty busy. Because of this, I won’t be writing any Shopify-related tutorials during the semester, but I hope to get back into it during the summer.

There is one class that I really enjoy at school, taught by an awesome new teacher called James Acres. He introduced us to the world of Processing and Arduino, and it’s like discovering Lego again for the first time. It’s our first time creating interactions between the physical and digital world, and it’s truly been a fascinating experience.

This is an example of the cool things you can do with Processing and the Reactivision framework

March is going to be one tough month with all the assignments and whatnot, but I think it’ll go by quickly. I can’t wait for this semester to be over with!

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!

New Design!

Tetsuro — Thu, 19 Nov 2009 17:20:49 +0000

Just today I launched the new design of my blog. I had been upset over my old design for a while; I couldn’t really put my finger on why, but I just felt that the design was really messy and unprofessional. One of things that REALLY bugged me is that the colours looked awful on Windows machines. For the new design, I decided to play it safe and stick with mostly grayscale colours.

The old design…ew!!

I grabbed the background pattern that I created last year, and used it as a foundation of the new design. I didn’t want it to be too distracting so I toned down its opacity quite a bit. I’d like to work on a new background sometime soon because I feel this one is a bit too disorganized.

My repeatable background pattern

I went through various variations of the design, getting feedback from friends and coworkers. Mark Dunkley gave me a lot of quality feedback, as usual. I really liked the idea of having a 100% width

’s for the headers and footers. Later on I felt that having multiple

’s spanning across the page was a bit overkill, so I decided to keep it for just the footer.

Big props to Steve Hatcher’s CSS Sticky Footer, which I’m using using for this site. I can’t even think of how much time I would have spent if I were to figure out how to make a sticky footer on my own. Thank you, Mr. Hatcher!!

An earlier version of the new design

I think now I can finally say that I’m content with the design of my blog. Any feedback/comments would be greatly appreciated! I also have a pretty kick-ass Shopify tutorial coming up, so stay tuned!

UPDATE (11/20/2009): Taking Caroline’s advice, I decided to make it so that my logo is only present on the index page. This should make it easier for visitors with smaller laptops to browse my site :). Also, created a 404 page.

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!

Happy Thanksgiving!

Tetsuro — Mon, 12 Oct 2009 23:12:56 +0000

Happy Thanksgiving to all my Canadian peoples! I hope you guys are having an awesome long weekend so far.

I apologize for the lack of updates recently, I’ve been extremely busy with client projects, side projects, and moving. I do have a few Shopify tutorial ideas floating around in my mind, but I haven’t had much time to sit down and write them out. I’m hoping that in the coming weeks things will start to slow down.

So a couple of weeks ago, a bunch of my friends at Carleton University got together and started a student club called CUJA (Carleton University Japanese Association). I was appointed to be the web master and graphic designer, so I’ve been working on their branding, their website, and their membership cards. I’m still working on the mock-up of the site, shown below (a big, big thank you to my chums Mark Dunkley and Daniel Weinand for their tips and advices!).

Just yesterday one of the CUJA execs and I went to Staples to order the membership cards that I had designed. They won’t be ready for another 4-5 days, but I can’t wait to see how they turn out!

Another thing that was keeping me busy was moving. A couple of weeks ago I had moved from my former apartment to my parent’s place so that I can live with them until the new apartment becomes available. It’s my first time living at home in two years, so it was definitely a heart-warming experience (free food is also a huge plus!). I’ll be moving to the new place in about a week, and once I settle in I’ll be working more on the Shopify tutorials.

Well that’s enough rambling for today! Happy Thanksgiving everyone!

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:

The Birth of Boomi

Tetsuro — Fri, 11 Sep 2009 04:37:41 +0000

You may be wondering, "what the hell is that Boombox thing on the top-right corner of your site?". Allow me to introduce you to Boomi.

The idea for Boomi spawned from a picture of a boom box that I saw on Flickr. The boom box kind of reminded me of a robot head, so I started doodling on my notepad. After a few sketches, I decided to use him for a music video project that I had to do for Audio/Video class back in 2007. His debut was in the following music video (WARNING: my animation skills are laughable).

I was pretty satisfied with the music video, but I felt that I could further develop Boomi as a character. In summer 2008, I decided to make Boomi into a physical product, with the magic of papercraft. I felt that papercraft was the perfect medium to turn Boomi into a physical product because A) Boomi has a very 'boxy' shape, which is ideal for papercraft, and B) papercraft is cheap. Another reason why I wanted to make Boomi into a physical was that I wanted to create my own 'designer toy' - kind of like a poor man's Munny doll ;)

I started off by drawing many sketches of what the new-and-improved Boomi might look like. I drew many different versions of Boomi in different angles and shapes, keeping in mind that I have to make him simple to make with paper. Unfortunately I seem to have lost almost all of my sketches - the scan above is one of the few I could find.

I then created blueprints for Boomi and started to build some prototype models. I experimented with different sizes, shapes, and proportions, until I was 100% satisfied. I used scrap paper for all prototypes in order to minimize the waste of paper. The trickiest part was coming up with a way to make the head. I learned that it's not very easy to create a box with paper, because the paper is usually too flimsy to close off the final edge (I'm sorry, it's a little difficult to explain in words, but it's actually pretty tricky building a box out of thin paper).

Shown above are pictures of the version 1.0 release of Boomi. Although I am very satisfied with the look-and-feel of Boomi, I feel that I can still improve on the blueprint, and make him easier to build. In the upcoming weeks, I plan on creating improved and simpler blueprints for Boomi.

Please click here to download the blueprints for Boomi v.1.0. Boomi currently comes in 4 flavours: Yellow, Mocha, Pink, and Blank.

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!

Tetsuro Takara's Blog

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

Back in Business

Plans for the summer

Reading Week

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:

New Design!

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

Happy Thanksgiving!

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 }}

The Birth of Boomi

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

Cart^{{{ cart.item_count }}}

Cart^{{{ cart.item_count }}}