| /** | |
| * Fullscreenr - lightweight full screen background jquery plugin | |
| * By Jan Schneiders | |
| * www.nanotux.com | |
| * | |
| * Modifications by Chris Van Patten | |
| * http://www.vanpattenmedia.com | |
| * Version 1.5 | |
| **/ |
| <form action="/cart/add" method="post"> | |
| {% if product.variants.size > 1 %} | |
| {% if product.options[0] %} | |
| {% assign used = '' %} | |
| <label for="select-one">{{ product.options[0] }}</label> | |
| <select id='select-one' onchange="letsDoThis()"> | |
| {% for variant in product.variants %} | |
| {% unless used contains variant.option1 %} | |
| <option value="{{ variant.option1 }}">{{ variant.option1 }}</option> | |
| {% capture used %}{{ used }} {{ variant.option1 }}{% endcapture %} |
| <div> | |
| <label for="sort-by">Sort by</label> | |
| <select id="sort-by"> | |
| <option value="manual">Featured</option> | |
| <option value="price-ascending">Price: Low to High</option> | |
| <option value="price-descending">Price: High to Low</option> | |
| <option value="title-ascending">A-Z</option> | |
| <option value="title-descending">Z-A</option> | |
| <option value="created-ascending">Oldest to Newest</option> | |
| <option value="created-descending">Newest to Oldest</option> |
| var myElement = document.getElementById('IDoftheDIV'); | |
| if(window.addEventListener) { | |
| // Normal browsers | |
| myElement.addEventListener('DOMSubtreeModified', contentChanged, false); | |
| } else | |
| if(window.attachEvent) { | |
| // IE | |
| myElement.attachEvent('DOMSubtreeModified', contentChanged); | |
| } |
| .hero-mask(@trianlgle-height: 40px) { | |
| height: (@trianlgle-height / 2); | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| &:before, | |
| &:after { |
| .diamond-inside-square (@square: 100px; @background-img) { | |
| .square(@square); | |
| .rotate(-45deg); | |
| margin: @square/4; | |
| overflow: hidden; | |
| &:after { | |
| .square(@square*1.5); | |
| .rotate(45deg); | |
| background: url(@background-img); | |
| display: block; |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
| <title>World Map Example</title> | |
| <style> | |
| path {fill: lightgray; stroke: white;} | |
| path:hover {fill: gray;} | |
| </style> | |
| </head> |
Here is a summary of different options that Shopify offers for managing content inclduing managing externally.
The config/settings_schema.json file lives in your theme and lets you define fields that are editable in the Storefront editor. These values can be used in css and js as well as the liquid files.
You can create a number of different field types:
This gist summarizes the handleEvent(event) pattern features, something standard, something described by me many times, written in my tiny book, tweeted about, and yet it's something most Web developers ignore.
┌---------------------------------┐
var handler = { | any object that inherits or |