Skip to content

Instantly share code, notes, and snippets.

@tjmapes
tjmapes / form-status.liquid
Last active Sep 1, 2020
Shopify contact form validation snippet
View form-status.liquid
{%- if form.posted_successfully? -%}
<p class="form-message form-message--success" tabindex="-1" data-form-status>
{{ success_message | default: 'contact.form.post_success' | t }}
</p>
{%- endif -%}
{% comment %} We need to add this so the errors are output in the right order {% endcomment %}
{% assign error_order = "author, email, body, password, form" | split: ", " %}
{%- if form.errors -%}
@tjmapes
tjmapes / page.contact
Last active Sep 1, 2020
Shopify contact us form - debut theme - with order number custom field
View page.contact
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>
{% if page.content.size > 0 %}
<div class="rte">
{{ page.content }}
@tjmapes
tjmapes / Shopify Announcement Bar - ABLS Article
Last active Jan 4, 2021
This is code for an announcement bar theme section for Shopify
View Shopify Announcement Bar - ABLS Article
{% if section.settings.announcement_visibility %}
<style>
.announcement {
font-size:{{ section.settings.announcement_text_size }}px;
background-color: {{ section.settings.announcement_bg_color }};
border-bottom: {{ section.settings.announcement_border_size}}px solid {{ section.settings.announcement_border_color }};
padding: {{ section.settings.announcement_padding}}px;
text-align: {{ section.settings.announcement_text_align }};
}
.announcement p {color: {{ section.settings.announcement_text_color }};}
View mega-menu.js
/**
* Main Nav Script
* ------------------------------------------------------------------------------
* This is (hopefully) controlling the mobile menu open / close...
* @namespace main-nav
*/
const burger = document.querySelector('.main-nav__utility-menu--open');
const nav = document.querySelector('.main-nav__menu');
const subNavClose = document.querySelector('.main-nav__utility-menu--close');
View main-nav.scss
.main-nav {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 31px;
min-height: 80px;
box-shadow: 0 5px 12px rgba(22, 38, 51, 0.05);
@include media-query($small) {
View header.liquid
{%- comment -%}
This is a required section for the Shopify Theme Store.
It is available in the "Header" section in the theme editor.
Theme Store required settings
- Show announcement
- Text: message to announce
- Link: link of the announcement bar
Theme Store optional settings
@tjmapes
tjmapes / liquid
Last active Feb 5, 2019
Shopify shipping logic with liquid dates example
View liquid
{%- comment -%}
Shopify uses RUBY, so we will too.
For help - Ruby Date Format (strftime) Cheat Sheet:
http://www.strfti.me
{%- endcomment -%}
{% comment %}
Below you'll find the liquid logic for a store that has 3 day shipping, and ships 7 days a week
{% endcomment %}
{%- assign date_format = "%A, %B %d" -%}
@tjmapes
tjmapes / gist:027ed12f7bb54be9a29e6305df756199
Last active Jan 26, 2019
Shopify liquid logic for determining ship date
View gist:027ed12f7bb54be9a29e6305df756199
{%- comment -%}
// This uses RUBY to format the dates since Shopify uses RUBY.
// For help - Ruby Date Format (strftime) Cheat Sheet:
// https://www.shortcutfoo.com/app/dojos/ruby-date-format-strftime/cheatsheet
{%- endcomment -%}
{%- assign date_format = "%A, %B %d" -%}
<p>Shipping starts at just $3.50! Planned ship date is: &nbsp;
@tjmapes
tjmapes / gist:ed95d1698324b162f595a9825687d83c
Created May 2, 2018
Add the power and convenience of scheduling to your Shopify Theme using liquid - Medium Post
View gist:ed95d1698324b162f595a9825687d83c
{%- assign current_date_time = 'now' | date: "%Y%m%d%H%M" -%}
{%- comment %}choose start date{%- endcomment -%}
{%- assign start_year = section.settings.start_year -%}
{%- assign start_month = section.settings.start_month -%}
{%- assign start_day = section.settings.start_day -%}
{%- assign start_hour = section.settings.start_hour | remove: ':' -%}
{%- assign start_date = start_year | append: start_month | append: start_day | append: start_hour | convert: "date" -%}
{%- comment %}choose end date{%- endcomment -%}
View gist:8d879b4180c8382d671e446082070044
PAID_ITEM_COUNT = 1
DISCOUNTED_ITEM_COUNT = 1
# ~~ Change 50 below to whatever percent you want the second item to be discounted at. Also, don't forget to change the message at the bottom
PERCENT_OFF = 50 # ~~ 50% OFF
# Returns the integer amount of items that must be discounted next
# given the amount of items seen
#
def discounted_items_to_find(total_items_seen, discounted_items_seen)
Integer(total_items_seen / (PAID_ITEM_COUNT + DISCOUNTED_ITEM_COUNT) * DISCOUNTED_ITEM_COUNT) - discounted_items_seen