kyledurand

import {ThemeProvider as PolarisThemeProvider} from '@shopify/polaris';
import {spacingBase, spacingTight} from '@shopify/polaris-tokens';

import {createTheme, ThemeProvider} from 'baseui';
import {styled} from 'styletron-react';
import {Card} from 'baseui/card';
import {Button, KIND} from 'baseui/button';

const primitives = {
  text: 'var(--p-text-on-primary)',

kyledurand

Consider performance early and often

• Think about performance at the beginning of every project
• Set a goal and baseline
• Set trip wires to perform audits along the way

Cache where you can

• Use memoize

function Badge(props) {};

kyledurand

{% comment %}
  Start of Cash on Delivery pincode checker snippet

  Instructions:
    1. Copy and paste this snippet into the liquid template where you'd like it to be displayed.
       i.e. product.liquid, cart.liquid etc...
    2. Set title and messages below (optional).
    3. Customize success and failure colors (optional).
    4. Adjust the pixel spacing on line 19 to best match the surroundings of the snippet.
       This will adjust spacing below the title and input field.

kyledurand

Issue

Brooklyn doesn't have a search box by default and adding one to the header somewhat disrupts the aesthetic of the theme. Instead of adding just an icon linking to the search page, why not adding a modal using the already built in popup plugin?

Did you see that fade in?! It's actually very smooth IRL.

Steps:

kyledurand

{% if customer and customer.addresses[0].country %}

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag }}

<style>
.js .field--same-billing-address {
  display: none !important;
}

#checkout_billing_address_country, #checkout_billing_address_province {

kyledurand

This one is farily straight forward

    {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag }}

    <script type="text/javascript">

      (function(window, undefined) {
        var $;

kyledurand

Issue

Some Plus merchants would like line item properties displayed in the order summary during checkout.

Solution (Requires checkout.liquid and a plus plan)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

kyledurand

How do enable sub menus in the Minimal theme

1. Replace the site-nav.liquid snippet with the one below.
2. Add the css below to the bottom of styles.scss.liquid
3. If you haven't already, create your sub linklists by folowing the same procedure as mentioned in this doc
4. Result:

kyledurand

Getting scripts to work on ajaxified cart drawers etc...

1. Move your script from wherever it is into theme.liquid
2. Wrap it in a function
3. Call the function
4. Call the function again whenever ajax has loaded something.
5. See example below. I've used the agree to terms of service snippet.

kyledurand

div.contact * {display: inline-block;}

@media screen and ($bp-min: $bp-med) {
  //ul.navprimary__horizontal li:not(.contact){margin-top:21px;}
  //ul.navprimary__horizontal li{height: 32px;}
  //ul.navprimary__horizontal li.contact input{border-radius: 2px;}
}

@media only screen and (max-width: 1326px) {
  .contact{ display:none; }