atikju

<div class='relatedArticles'>
  {% for tag in article.tags %}

  {% assign counter = 0 %}
  {% assign skip_articles = article.handle | split: '.....' %}
  {% for related_article in blog.articles %}
    {% if related_article.tags contains tag and counter < 6 %}
      {% unless skip_articles contains related_article.handle %}
        {% assign counter = counter | plus: 1 %}
        {% assign temp = related_article.handle | split: '.....' %}

pablogiralt

Add Size Guide to Shopify Brooklyn Theme

This is what you get:

1- A link to below the variant selector which will open the size guide:

2- The size selector modal:

adamwooding

<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-enable-history-state="true">

    {% case section.settings.add_to_cart_width %}
      {% when 'small' %}
        {%- assign btn_class = 'btn--wide' -%}
        {%- assign productform_class = 'product-form--wide' -%}
      {% when 'medium' %}
        {%- assign btn_class = 'btn--wide' -%}
        {%- assign productform_class = 'product-form--wide' -%}
      {% when 'large' %}

joePichardo

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

  <script>
    // <![CDATA[
    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add-to-cart-button').removeClass('disabled').removeAttr('disabled').html('Add to Cart');
        } else {

eldh

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";

/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
  const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
  const [mouseX, mouseY] = useMousePosition();
  const positions = { x, y, h, w, mouseX, mouseY };
  return (
    <div

hobo71

Floating Animation - CSS

Simple floating CSS animation using transform and box-shadow.

A Pen by Joseph Martinez on CodePen.

License.

rleaf

Background Noise - Canvas

A Pen by Ibe on CodePen.

License.

akella

What i'm using in streams and while working

Development tools

• https://fishshell.com/ - my default shell, i use theme bobthefish
• https://www.sublimetext.com/ - my default editor
  • Material Theme
  • Operator font
  • Packages: Emmet, Hayaku, SidebarEnhancements, JS Snippets, GSAP Snippets
  • Sublime snippet for comments
  • Sublime icon
• https://code.visualstudio.com/ - trying to switch, but not yet

willbroderick

{%- layout none -%}
{%- paginate search.results by 6 -%}
  {%- capture products_output -%}
  {%- for result in search.results -%}
    {%- if result.object_type == 'product' -%}
      ,{"title":{{ result.title | json }},"url":{{ result.url  | json }}
      {%- if result.images and result.images.size > 0 -%}
        ,"image":{{ result.images[0] | img_url: 'master' | json }}
      {%- endif -%}
      ,"vendor":{{ result.vendor | json }},"price_max":{{ result.price_max }},"price_min":{{ result.price_min }},"compare_at_price_min":{{ result.compare_at_price_min }}}

enamhasan

<div class="success" style="display: none;">{{ settings.success_message }}</div>
{%- if settings.newsletter_form_action != "" -%}
   <form id="mc4wp-form-footer" name="nlr" class="mc4wp-form mc4wp-form-{{block.id}} mc4wp-form-basic" method="get" action="{{ settings.newsletter_form_action }}" target="_blank" data-id="{{block.id}}">
    <div class="mc4wp-form-fields">
      <p class="mailchimp-input-icon">
        <label>Email address: </label>
        <input type="email" name="EMAIL" placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}" value="{%- if customer -%}{{ customer.email }}{%- endif -%}" required="">
      </p>
      <p>
        <input type="submit" value="{{ 'general.newsletter_form.submit' | t }}">