Shopify - Multiple product discount using permalinks without an app

Sometimes you want to be able to add a "buy X and save" button to automatically add more than one item to the cart and add a discount. This can't be done using the built-in features so needs something custom. There are a few apps that can do it, but they each have a recurring monthly fee.

Shopify permalinks offer a way to perform multiple checkout actions on redirect to a URL, including adding to cart multiple items and even adding a discount code.

Here is an example of how to achieve buying 3 of the same item and applying an already created discount code:

1. Create a custom liquid segment in the right place for you

2. Add the code below, ensuring the URL and the product ID is correct (this can be found by inspecting the HTML of your site add-to-cart button)

```

<div style="max-width:440px;">
  <div style="width:50%; float: left">
    <label>Buy 3 save $90!</label>
    <br />
    <label><s>{{product.price | money }}</s> {{product.price | minus: 3000.0 | money}} each</label>
  </div>
  <div style="float: right;">
    <button class="button button--half-width button--secondary" onclick="window.location.href='http://shopify-store.com/cart/12345678:3?discount=BUY-THREE';">
      Add to cart
    </button>
  </div>
</div>
<br />
<br />

```

Done!

Shopify - Add a custom Google font without editing the theme code

Most of the guides online showing you how to add a custom font, say a Google font, by editing the theme liquid files. This can be a bad idea because come upgrade time you may find yourself trying to remember all the little changes you made to the theme files over time that are no longer compatible with the upgraded theme.

Here is how you can add a custom font without editing the theme code directly, rather using the "custom liquid" block within your sites page:

Steps

1. Edit the theme you want to modify

2. Add a custom liquid block

3. Insert the following code in to that custom liquid block, making the changes required for your desired font:

<script>
    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Sofia');
    document.head.appendChild(link);
</script>

4. Optionally override a single block element CSS to modify the text you want to change

Note: You may need to work out what html/css element is being used to display the text element you want to change, which in this case is a <h2> element:

5. Modify the element CSS overriding the html element we found above:

eg: 

h2 {

    font-family: "Sofia", sans-serif;

    font-size: 1.2em;

}

Final output can be seen below, the "Browse our latest products" now has a new custom font: