kellyvaughn’s gists

kellyvaughn / shopifypagination.txt

Last active November 22, 2024 18:37

Shopify Pagination ("Displaying X - Y of Z items (Page X of Y) / View All")

	{% assign updated_count = paginate.current_offset \| plus: paginate.page_size %}
	<span class="nomobile">Displaying </span>
	<span>
	{{ paginate.current_offset \| plus: 1 }}
	{% if paginate.items < paginate.page_size %}
	- {{ paginate.items }} of {{ paginate.items }}
	{% else %}
	-
	{% if paginate.items > updated_count %}
	{{ updated_count }}

kellyvaughn / shopifybreadcrumb.txt

Created October 13, 2015 20:34

Shopify Product Breadcrumb (Home > Category > Subcategory > Product)

	<span aria-hidden="true">&rsaquo;</span>
	{% if current_tags %}
	{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
	{{ collection.title \| link_to: url }}
	<span aria-hidden="true">&rsaquo;</span>
	<span>{{ current_tags \| join: " + " \| replace: 'custom', 'Custom Built by Midwestern Craftsman' \| replace: 'chalk/clay paint', 'Junk Gypsy™ Chalk/Clay Paint' \| replace: "Milk Paint", "Miss Mustard Seed's Milk Paint" }}</span>
	{% else %}
	<span>{{ collection.title }}</span>
	{% endif %}
	<span aria-hidden="true">&rsaquo;</span>

kellyvaughn / account.liquid

Created March 28, 2016 18:54

Shopify - Reset Password on Account Page

	{% form 'recover_customer_password' %}

	<label for="RecoverEmail" class="hidden-label">{{ 'customer.recover_password.email' \| t }}</label>
	<input style="display: none;" type="email" name="email" id="RecoverEmail" class="input-full" value="{{ customer.email }}" autocorrect="off" autocapitalize="off">
	<p>
	<input type="submit" class="btn" value="Reset Password">
	</p>
	{% endform %}

kellyvaughn / product.liquid

Last active May 16, 2018 10:57

Back in Stock

	{% if product.tags contains "bis-hidden" %}
	<p class="out-of-stock">{{ settings.out-of-stock-message }}</p>
	{% else %}
	<div class="product-reorder">
	<h3>{{ settings.restock-notify-heading }}</h3>
	<p>{{ settings.restock-notify-message }}</p>
	<div class="restock-notify-form">
	<input type="email" id="notify_email"{% if customer.email != blank %} value="{{ customer.email }}"{% endif %}>
	<button id="notify_button">{{ settings.notify-me-button }}</button>
	</div>

kellyvaughn / _quickview.scss.liquid

Last active September 6, 2023 08:06

Shopify Quick View

	#quick-view {
	display: flex;
	height: 100%;
	justify-content: flex-end;
	flex-wrap: wrap;
	position: relative;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	.qv-product-images {
	width: 60%;
	height: auto;

kellyvaughn / custom-fees.liquid

Created December 3, 2016 21:09

(Shopify) Snippet to auto add product to cart based on Bold Product Options selection (one-time fee)

	{% assign totes_addon = all_products['custom-tote-new-order-fee'] %}
	{% assign pouches_addon = all_products['custom-pouches-new-order-fee'] %}
	{% assign cards_addon = all_products['custom-cards-new-order-fee'] %}

	{% unless cart.item_count == 0 %}

	{% assign totes_id = totes_addon.variants.first.id %}
	{% assign pouches_id = pouches_addon.variants.first.id %}
	{% assign cards_id = cards_addon.variants.first.id %}

kellyvaughn / general-header.liquid

Created February 17, 2017 18:52

Sections/Snippets - Page Headers

	<div class="page-header" style="background-image: url({{ settings.general-header \| img_url: 'master' }})">
	{{ settings.general-header \| img_url: 'master' \| img_tag }}
	<h1>{{ page_title }}</h1>
	</div>

kellyvaughn / gist:b22c3f8f2d4f28264a44eac5ad632594

Created October 27, 2017 14:59

Order confirmation email: See lines 196-204

	{% capture email_title %}Thank you for your purchase! {% endcapture %}
	{% capture email_body %}
	{% if requires_shipping %}
	Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.
	{% endif %}
	{% endcapture %}

	<!DOCTYPE html>
	<html lang="en">
	<head>

kellyvaughn / mailchimp-popup.js

Created November 20, 2018 14:55

kellyvaughn / graphql-using-vanilla-js.js

Last active January 11, 2022 23:12

Shopify GraphQL Storefront API using Vanilla JavaScript

	// This example was used to pull in variant titles and IDs dynamically
	// on a custom build of the ReCharge customer portal.
	//
	// Feel free to send me an email if you have any questions.
	//
	// Kelly Vaughn -- The Taproom Agency
	// [email protected]

	// 1. Retrieve product ID in any format
	const productId = <pathToProductId>;

Kelly Vaughn kellyvaughn