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 / a-beginners-guide-to-sass-part-3-interpolation.liquid.scss
Last active Aug 29, 2019 — forked from stewartknapman/style.liquid.scss
A Beginner's Guide to Sass with Shopify — Part 3: Sass interpolation, Workflow and Object Oriented CSS - https://www.shopify.com/partners/blog/a-beginners-guide-to-sass-with-shopify-part-3
View a-beginners-guide-to-sass-part-3-interpolation.liquid.scss
// Escaping Liquid in SCSS.
//
// Expected output:
// a{
// color: {{ settings.link-color }};
// }
a{
color: #{'{{ settings.link-color }}'};
}
View relative-pagination.rb
products = ShopifyAPI::Product.find(:all, params: { order: 'inventory_total desc', limit: 250 })
process_products(products)
3.times do
break unless products.next_page?
products = products.fetch_next_page
process_products(products)
end
View pagination-with-since_id.json
{
"products": [
{
"id": 11111,
"title": "Paprika"
},
{
"id": 12345,
"title": "Chili Powder"
},
View responsive-images-narrative-image-widths.html
<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
src="{{ block.settings.image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}">
View product-recommendations-container.liquid
<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">
{%- if recommendations.products_count > 0 -%}
<h2>You may also like</h2>
<ul>
{%- for product in recommendations.products -%}
<li class="product">
<a href="{{ product.url }}">
<img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
<p class="product__title">{{ product.title }}</p>
<p class="product__price">{{ product.price | money}}</p>
View product-reccomendations-script.js
{% javascript %}
var loadProductRecommendationsIntoSection = function() {
// Look for an element with class 'product-recommendations'
var productRecommendationsSection = document.querySelector(".product-recommendations");
if (productRecommendationsSection === null) { return; }
// Read product id from data attribute
var productId = productRecommendationsSection.dataset.productId;
// Read limit from data attribute
var limit = productRecommendationsSection.dataset.limit;
// Build request URL
View product-recommendations-checkbox.liquid
{
"type": "checkbox",
"id": "show_product_recommendations",
"label": "Turn on product recommendations",
"default": false
}
View product-recommendations-heading.liquid
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "You might also like"
}
View product-recommendations-section.liquid
{%- if section.settings.show_product_recommendations -%}
<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">
{%- if recommendations.products_count > 0 -%}
<h2>{{ section.settings.heading }}</h2>
<ul>
{%- for product in recommendations.products -%}
<li class="product">
<a href="{{ product.url }}">
<img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
<p class="product__title">{{ product.title }}</p>
You can’t perform that action at this time.