Skip to content

Instantly share code, notes, and snippets.

Shopify Partners shopifypartners

Block or report user

Report or block shopifypartners

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@shopifypartners
shopifypartners / form-customer_login.liquid
Created Apr 8, 2019
How to Use Liquid to Build Robust Forms for Shopify Themes
View form-customer_login.liquid
{% form 'customer_login' %}
<div>
<label for="customerEmail">Email Address</label>
<input type="email"
name="customer[email]"
id="customerEmail"
autocorrect="off"
autocapitalize="off"
autocomplete="email">
@shopifypartners
shopifypartners / price-with-min-max-ranges.liquid
Created Mar 21, 2019
How to Display Price Ranges on Shopify Collection Pages
View price-with-min-max-ranges.liquid
{% if available %}
{% if product.price_varies and template == 'collection' %}
From {{ product.price_min | money }} to {{ product.price_max | money }}
{% else %}
{{ money_price }}
{% endif %}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
@shopifypartners
shopifypartners / price-with-compare_at_price.liquid
Created Mar 21, 2019
How to Display Price Ranges on Shopify Collection Pages
View price-with-compare_at_price.liquid
<span class="price-item price-item--regular" data-regular-price>
{% if available %}
{% if compare_at_price > price %}
{{ compare_at_price | money }}
{% else %}
{{ money_price }}
{% endif %}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
@shopifypartners
shopifypartners / price-with-compare_at_price.liquid
Created Mar 21, 2019
How to Display Price Ranges on Shopify Collection Pages
View price-with-compare_at_price.liquid
<span class="price-item price-item--regular" data-regular-price>
{% if available %}
{% if compare_at_price > price %}
{{ compare_at_price | money }}
{% else %}
{{ money_price }}
{% endif %}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
@shopifypartners
shopifypartners / customizing-blog-templates-section.liquid
Created Feb 28, 2019
How to use Liquid to Customize Shopify Theme Blog Templates
View customizing-blog-templates-section.liquid
{%- if section.settings.show_previous_next_buttons -%}
<div class="previous_next_buttons">
<a href="{{ blog.previous_article }}" class="btn">
Previous post
</a>
<a href="{{ blog.next_article }}" class="btn">
Next post
</a>
</div>
{%- endif -%}
@shopifypartners
shopifypartners / customizing-blog-templates-previous-next-buttons.liquid
Created Feb 28, 2019
How to use Liquid to Customize Shopify Theme Blog Templates
View customizing-blog-templates-previous-next-buttons.liquid
<div class="previous_next_buttons">
<a href="{{ blog.previous_article }}" class="btn">
Previous post
</a>
<a href="{{ blog.next_article }}" class="btn">
Next post
</a>
</div>
@shopifypartners
shopifypartners / lazyloading-blur-effect.css
Created Feb 27, 2019
How Lazyloading can Optimize your Shopify Theme Images
View lazyloading-blur-effect.css
.blur-up {
-webkit-filter: blur(5px);
filter: blur(5px);
transition: filter 400ms, -webkit-filter 400ms;
}
.blur-up.lazyloaded {
-webkit-filter: blur(0);
filter: blur(0);
}
@shopifypartners
shopifypartners / lazyloading-responsive-image.liquid
Last active Mar 6, 2019
How Lazyloading can Optimize your Shopify Theme Images
View lazyloading-responsive-image.liquid
<img id="Image-{{ image.id }}-{{ responsive_image_counter }}"
class="responsive-image__image lazyload {{ image_class }}"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ image.alt | escape }}"
{{ image_attributes }}
@shopifypartners
shopifypartners / lazyloading-classes.css
Created Feb 27, 2019
How Lazyloading can Optimize your Shopify Theme Images
View lazyloading-classes.css
.image {
display: block;
margin: 0 auto;
width: 100%;
}
.grid-view-item__image-wrapper .image {
position: absolute;
top: 0;
}
@shopifypartners
shopifypartners / lazyloading-products-loop.liquid
Created Feb 27, 2019
How Lazyloading can Optimize your Shopify Theme Images
View lazyloading-products-loop.liquid
{% for product in collection.products %}
{% include 'responsive-image' with
image: product.featured_image,
image_class: "image",
wrapper_class: "image-wrapper",
max_width: 700,
max_height: 800 %}
{% endfor %}
You can’t perform that action at this time.