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

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.

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

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).

<h3>My very own settings form!</h3>
<fieldset>
    <legend>Colors</legend>
    <table>
      <tr>
        <th><label for="text_color">Regular text</label></th>
        <td><input id="text_color" name="text_color" class="color" value="#d60f0f"/></td>
      </tr>
      <tr>
        <th><label for="link_color">Link Color</label></th>
        <td><input id="link_color" name="link_color" class="color" value="#d60f0f"/></td>
      </tr>
      <tr>
        <th><label for="link_hover_color">Link Color Hover</label></th>
        <td><input id="link_hover_color" name="link_hover_color" class="color" value="#d60f0f"/></td>
      </tr>
    </table>
</fieldset>
<fieldset>
    <legend>Font, Logo, Background</legend>
    <table>
    </table>
</fieldset>

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

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.

Shopify Tutorial: Conditional Statements in Liquid and Metadata

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.