I was contacted by Sergio Medina to develop a store for his brother's new musical endeavor: Sani Bronco.

Originally we decided to setup a Big Cartel store to sell his merchandise. Though after we had completed the theme for Big Cartel it was determined that Shopify presented more advertising options to connect the store with.

The Build: Big Cartel

Big Cartel uses their own templating engine called dugway for creating custom themes. You can embed JavaScript into the theme for some interactivity but I spent a majority of my time using TailwindCSS to style the web page. It took a couple of hours to put together and after a couple of revisions we had everything just how we wanted it.

The Turn

About two weeks before release I get a message from Sergio asking if we can change the shop to work on Shopify. I take a quick look and realize its about the same amount of work but it is entirely possible.

The Build: Shopify

Shopify uses a templating engine called Liquid for creating custom themes but you can also access their API directly. After looking into both options I decided, let's go with Liquid. The conversion process was swift and after a couple of hours of migrating and a few revisions everything was up and ready.

Notable Features

• We converted the icons to SVG for faster load times and scalability
• Optimized the site to load quickly on mobile device and be responsive for mobile viewers

The Final Product

You can view the Sani Bronco Web Store now it's live!

Part of the Home Page for the Sani Bronco Web Store
Screenshot of the Product Page showing off the responsive nature

A snippet of the product page to show how responsive design is implemented in Tailwind:

<article class="grid sm:grid-cols-1 lg:grid-cols-2 gap-4 pb-10">
  <section id="product-media">
    <div id="prod-img-wrapper" class="flex justify-center pb-2">
      <img src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" id="product-image" class="w-auto object-scale-down">
    </div>
    <div class="flex flex-shrink justify-center">
      {% for image in product.images %}
        {% assign img_url = image | img_url: 'large' %}
        <div class="opacity-50 hover:opacity-100" >
          <span>
            <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}" class="cursor-pointer">
          </span>
        </div>
      {% endfor %}
    </div>
  </section>
  <section id="product-content" class="font-sans">
    <aside>
      {% if product.available %}
        <h5 class="text-green-700 text-center  text-xl font-bold">{{ product.title }} {{product.price | money}}</h5>
      {% else %}
        <h5 class="text-red-500  text-center text-xl">{{ product.title }} {{product.price | money }} <em>Sold Out</em></h5>
      {% endif %}
      <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
        <input type="hidden" id="Quantity" name="quantity" value="1">
        <div class="grid {% if product.has_only_default_variant == false %}grid-cols-2{% else %}grid-cols-1{%endif%} gap-2 justify-items-center place-content-center">
          {% if product.has_only_default_variant == false %}
          <div>
            <select name="id" id="productSelect" class="my-5 border-2 border-blue-500 bg-blue-100 font-bold text-blue-500 font-sans p-2 rounded-sm">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option value="{{ variant.id }}">
                    {{ variant.title }} - {{ variant.price | money_with_currency }}
                  </option>
                {% else %}
                  <option disabled="disabled">
                    {{ variant.title }} - sold out
                  </option>
                {% endif %}
              {% endfor %}
            </select>
          </div>
          {% else %}
            <input type="hidden" name="id" id="id" value="{{ current_variant.id }}" />
          {% endif %}

          <div class="row-start-1 lg:row-auto">
            {% if product.available %}
             <input type="submit" name="add" id="AddToCart" class="my-5 rounded-sm border-2 border-green-200 bg-green-100 font-bold text-green-800 font-sans p-2 cursor-pointer" value="Add to cart">
            {% else %}
              <button class="my-5 rounded-sm border-2 border-red-200 bg-red-100 font-bold text-red-800 font-sans p-2 cursor-pointer" disabled>Sold Out</button>
            {% endif %}
          </div>

        </div>
      </form>
    </aside>
    <div class="text-sm text-gray-700 pt-5" id="prod-description">
      {{ product.description }}
    </div>
  </section>
</article>

Check out the Sani Bronco Web Store

Also

Check out the video from Mexico (1961) from his Debut Album "One Stop Everything Repair Shop". It was a total pleasure to work with the two gentlemen and I'm so stoked for him. Give it a spin!