tpage99

<script type="text/javascript">  
  window.addEventListener('scroll', scrollyScroll, false); 

  function scrollyScroll() {
    let scrollPosition = 0;
    scrollPosition = window.scrollY;
    if (scrollPosition > 10) {
      (function() {
        var tidScript = document.createElement('script');
        tidScript.type = 'text/javascript';

tpage99

{% comment %}
Script to be included likely in product form snippet
Tried using intersection observer, and this may indeed be better, but issue with mobile and the button presenting too soon. Best solution at this time seems to be comparing scroll position and only showing when the offset is greater than the actual scroll position.
{% endcomment %}
<script>
  const bodyRect = document.body.getBoundingClientRect();
  const btnRect = document.getElementById('atc-btn').getBoundingClientRect();
  const offset = btnRect.top - bodyRect.top;

  window.addEventListener('scroll', showToATC, false); 

tpage99

// setting up options for IntersectionObserver
// setting threshold to .9, in this instance, means when 90% of the element is out of view
let options = {
  root: null,
  threshold: [.9]
}

// function with ternary operator to check if threshold is met then display none but if not then update display
function showToATC(entryArray){
   let div = document.getElementById('scroll-to-atc');

tpage99

{% 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"

tpage99

{% 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

// 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

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

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

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

<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 }};
  }