Skip to content

Instantly share code, notes, and snippets.

@cameroncowden
cameroncowden / story-nav.liquid
Created March 1, 2023 16:49
Simple Shopify Story-like navigation bar
<style type="text/css">
{% if section.settings.desktop %}
/* This section will show on desktop as well */
{% else %}
@media screen and (min-width: 750px) {
#shopify-section-{{section.id}} {
display: none;
}
}
{% endif %}
@cameroncowden
cameroncowden / specific-products.liquid
Created September 28, 2022 18:01
Show products from a specific collection in Shopify
<!-- the collection handle we are pulling from is 'new'--->
{% assign collection = collections['new'] %}
{% for product in collection.products | limit: 4 %}
<!-- the 'product-block' is specific to your theme, it is html for a grid item of a product, could be called product-grid-item, grid-product, etc --->
{% render 'product-block', product: product %}
<!-- product --->
{% endfor %}
@cameroncowden
cameroncowden / optimVideoForMobile
Created August 8, 2022 16:17
use ffmpeg to optimize a mov file for a shopify site (accepts mp4 only). Note: usings the downloadable executable ffmpeg, hence the ./
./ffmpeg -y -i input.mov -c:v libx264 -crf 30 -profile:v high -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an output.mp4
@cameroncowden
cameroncowden / show-no-alt.css
Created April 5, 2021 17:01
Highlight all Images without Alt Text
/* Courtesy of @AllThingsSmitty "sharing is caring" https://twitter.com/AllThingsSmitty/status/930617039085035520 */
/* highlights any images on the page without alt text or with empty alt text */
/* note - sometimes empty alt text is correct: https://www.w3.org/WAI/tutorials/images/decorative/ */
img[alt=""], img:not([alt]) {
border: red 5px solid;
}
<style type="text/css">
.stats {
color: white;
text-align: right;
}
.stat-unit {
margin-bottom: 24px;
}
.amount {
@cameroncowden
cameroncowden / shopify-checkout-script-no-fedex-if-po-box.rb
Last active May 15, 2020 18:04
Shopify Scripts.. Script.. to remove the FedEx option if the customer enters a PO box.
found1 = false
found2 = false
is_po_box = false
if(Input.cart.shipping_address.address1)
this_address = Input.cart.shipping_address.address1
found1 = true
end
if(Input.cart.shipping_address.address1)
this_second_address = Input.cart.shipping_address.address2
@cameroncowden
cameroncowden / power-reviews-multi-render.liquid
Created March 13, 2020 19:46
Power Reviews Shopify Single Product and Related Products Widget
{% comment %}
make sure when this is called the {{ product }} object is the correct one on the product page (e.g. nothing else has called {% assign product = ... %}
In your collection of products or when you loop through the related/recommended products, just get those IDs and include them in the power_reviews_ids variable
E.g.
{% for related_product in product_collections.products %}
{% assign product = related_product %}
{% include 'product-grid-item' %}
{% if power_reviews_ids == '' %}
@cameroncowden
cameroncowden / accordions.liquid
Created February 25, 2019 21:55
A shopify section which builds accordions using
<section class="accordion faq">
{% if section.settings.title %}
<p style="text-align: center; font-style: italic;">{{ section.settings.title }}</p>
{% endif %}
{% for block in section.blocks %}
{% capture index %}{% increment ind %}{% endcapture %}
<input id="tab-{{ index }}" type="checkbox" name="faqs" class="hidden">
<div class="section section-{{ section.id }} {% if forloop.first == true %}opened{% endif %} mar-top-sm" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
@cameroncowden
cameroncowden / sort-sale-and-sold-out-to-end.liquid
Created October 16, 2018 17:55
A liquid snippet to sort products which are on sale and out of stock to the end of a shopify collection (per page)
{% assign remaining = products_per_page %}
{% for product in collection.products limit: products_per_page %}
{% if product.available and product.price >= product.compare_at_price_max %}
{% include 'partial--product' %}
{% assign remaining = remaining | minus: 1 %}
{% endif %}
{% endfor %}
{% for product in collection.products limit: products_per_page %}
{% if product.compare_at_price > product.price %}
{% if remaining > 0 %}
@cameroncowden
cameroncowden / page.google-product-feed.liquid
Created August 15, 2018 15:34
Shopify Google Product Feed xml generator
{% comment %}
Instructions:
- Create a blank page called 'Google Base Product Feed'and save it
- Open that page for editing and select 'page.google-feed' from the page template selector
- Add a brief site description to the meta-shop-description snippet
- The feed url should now be available at http://www.yoursite.com/pages/google-base-product-feed
- validate your field at http://validator.w3.org/feed/
- when ready, submit your feed at http://base.google.com