Skip to content

Instantly share code, notes, and snippets.

View tpage99's full-sized avatar

Taylor Page tpage99

View GitHub Profile
@tpage99
tpage99 / random_number.liquid
Created October 3, 2023 20:26
Create a random number with Liquid for Customer Testimonials Metaobject
{% comment %}
my_reviews is an array of metaobjects assigned via metafields
{% endcomment %}
{% liquid
assign review_min = 1
assign review_max = my_reviews.size
assign mod_ref = review_max | minus: review_min
assign random_number = "now" | date: "%N" | modulo: mod_ref | plus: review_min
assign review = my_reviews[random_number]
@tpage99
tpage99 / cart_api.js
Last active August 8, 2023 07:13
Cart API Frequently Used - Vanilla JS
// Always compare to the docs first: https://shopify.dev/docs/api/ajax/reference/cart
// Get the Cart
fetch("/cart.js")
.then((response) => response.json())
.then((data) => console.log(data));
// Add to Cart
let addToCartItem = {
items: [
@tpage99
tpage99 / updated-video-input.liquid
Last active March 3, 2023 22:04
Add Video Input Setting to Shopify Theme - Dawn v7.0.0 theme
{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
@tpage99
tpage99 / section-identifier.liquid
Created September 27, 2022 17:35
Use section ID as a unique identifier for settings related to reusable sections or blocks
<section id="shopify-section-{{ section.id }}">
<div class="custom-content">
<p>{{ section.settings.my_text }}</p>
</div>
</section>
<style>
#shopify-section-{{ section.id }} div.custom-content {
background-color: {{ section.settings.bg_color }};
}
@tpage99
tpage99 / google_sheets_tips.md
Last active September 1, 2022 12:59
Helpful rules for Shopify Exports

Helpful Tips for Shopify Exports

Shopify provides CSV exports/imports for various resources (products, URL redirects, etc). Here are some handy rules when manipulating data from old sources such as when updating during the course of a platform migration to Shopify

Add two columns together

=CONCAT(firstItem, secondItem)

Remove all special characters

=REGEXREPLACE(selection, "[^a-zA-Z0-9 ]", "")

@tpage99
tpage99 / metafields_url.md
Created July 26, 2022 13:24
Shopify Metafields URL

Shopify Metafields URL

Note: Native metafield editor should be used whenever possible first, however, in instances where this is not accessible this is an older solution that worked prior to Online Store 2.0 update

https://{SHOPIFY_URL}.myshopify.com/admin/bulk?resource_name={TYPE_TO_UPDATE}&edit=metafields.{NAMESPACE}.{KEY}

Examples

https://the-pages-media.myshopify.com/admin/bulk?resource_name=Collection&edit=metafields.global.promo_image%2Cmetafields.global.bg_image

Hidden from SEO Example

@tpage99
tpage99 / migrate-metafields.md
Last active February 26, 2024 14:37
Migrate legacy metafield definitions to Shopify's native editor

Migrate Legacy Metafields

If an error occurs for a value already existing for a metafield (legacy) but isn't available, navigate to:

/admin/metafields/[type]/migrate/[namespace]/[key]

to migrate to native Shopify metafields editor.

Example

Example for SEO Hidden created with previous methods, route would be:

@tpage99
tpage99 / a11y-hacks.js
Created January 20, 2022 21:39
A11y Tricks with JS to Improve UX
// Drop this bad chad into console to help determine active focus element and tab through items slowly
window.setInterval(()=> { console.log(document.activeElement); }, 3000)
@tpage99
tpage99 / cart.liquid
Created January 7, 2022 15:24
Shopify Checkout Tricks
{% comment %}
Add item to cart at checkout via URL
{% endcomment %}
<a href="domain.myshopify.com/cart/add?id=12345&quantity=1&return_to=/checkout"></a>
@tpage99
tpage99 / back-in-stock.liquid
Created November 3, 2021 16:02
Back in Stock for Klaviyo
{% comment %}
Write-up here: https://help.klaviyo.com/hc/en-us/articles/360001895651-How-to-Install-Back-in-Stock-for-Shopify
{% endcomment %}
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: "[PUBLIC_API_KEY]",
platform: "shopify"