Skip to content

Instantly share code, notes, and snippets.

View haroldao's full-sized avatar
🎯
Design + Dev

Harold AO haroldao

🎯
Design + Dev
View GitHub Profile
@shopifypartners
shopifypartners / announcement-bar.liquid
Created October 25, 2019 15:58
How to Create a Customizable Announcement Bar Section
<style>
.announcement-bar {
background-color: {{ section.settings.announcement_bar_color }};
text-align: center;
text-decoration: none;
}
.announcement-bar__message {
font-size: large;
padding: 10px;
color: {{ section.settings.announcement_bar_text_color }};
@caovillanueva
caovillanueva / theme.liquid
Created September 10, 2019 16:28
[Shopify Google Console] Indexed, though blocked by robots.txt #Shopify #SEO
add the follow code in theme.liquid:
{% if template contains 'search' %}
<meta name="robots" content="noindex">
{% endif %}
OR
{% if handle contains 'page-handle-you-want-to-exclude' %}
@michelarteta
michelarteta / shopify-render-blocking.js
Last active May 8, 2022 20:52
Boost your Shopify page loading speed 🚀with this simple approach.
function loadjscssfile(filename, filetype) {
if (filetype == "js") { //if filename is a external JavaScript file
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
} else if (filetype == "css") { //if filename is an external CSS file
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
@pi3r0
pi3r0 / WorkAfter-weather.js
Last active November 11, 2022 22:06
Asma work before her refactoring
import React from "react";
import Form from "./Form";
import WeatherDiv from "./WeatherDiv";
import "./Form.css"
import "./WeatherAPi.css"
import Slider from "react-slick"
import ActivityCards from "./ActivityCards"
import Activity from "./Activity.json"
import { Link } from 'react-router-dom'
@bakura10
bakura10 / microdata-schema.liquid
Last active February 3, 2025 09:20
This is the last microdata-schema for our Shopify themes
{%- comment -%}
This snippet structures the micro-data using JSON-LD specification. Please note that for Product especially,
the schema often changes. We try to output as much info as possible, but Google may add new requirements over time,
or change the format of some info
LAST UPDATE: May 10th 2023 (we added the "hasMerchantReturnPolicy" and "shippingDetails" to include the shipping and
return policy if they have been specified as store policies).
{%- endcomment -%}
{%- if request.page_type == 'product' -%}
{%- 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>
@a-vasyliev
a-vasyliev / page.tracking.liquid
Created June 27, 2019 08:13
Shopify + 17track.net simple integration
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>
{% if page.content.size > 0 %}
<div class="rte">
{{ page.content }}
@git-willie
git-willie / upsell-products.liquid
Created May 26, 2019 22:10
Upsell products similar to Amazon's
{% assign current_product_handle = product.handle %}
{% assign upsell_product_col = 'col-xs-4' %}
{% assign sum = product.price %}
{% assign number_of_upsell_products = 0 %}
{% for upsell_product in upsell_collection.products limit: 4 %}
{% unless upsell_product.handle == current_product_handle %}
{% assign sum = sum | plus: upsell_product.price %}
{% endunless %}
{% assign number_of_upsell_products = forloop.index %}
{% endfor %}
@Lysindr
Lysindr / collection.liquid
Last active September 29, 2023 14:59
Shopify AJAX filter collection page with TAGS
<div class="collection__main">
<!-- COLLECTION SIDEBAR -->
{%- capture categories -%}
{%- for tag in collections[collection.handle].tags -%}
{%- if tag contains 'categories' -%}
{%- assign tag_patterns = tag | split: '_' -%}
<li class="collection-sidebar__filter-item main-filter" data-tag="{{ tag | handle }}">{{ tag_patterns[1] }}</li>
{%- endif -%}
{%- endfor -%}
@Lavrend
Lavrend / noise-canvas.js
Created April 30, 2019 01:45
Add noise effect for canvas bg
const noise = (canvas) => {
const ctx = canvas.getContext('2d');
const noiseData = [];
let wWidth;
let wHeight;
let loopTimeout;
let resizeThrottle;
let frame = 0;