Skip to content

Instantly share code, notes, and snippets.

View seandogg's full-sized avatar

Sean Orfila seandogg

View GitHub Profile
<div class="page-width page-content">
<div class="grid">
<div class="grid__item medium-up--one-third medium-up--push-one-third">
<header class="section-header">
<h1 class="section-header__title">{{ 'customer.register.title' | t }}</h1>
</header>
<div class="form-vertical">
.main-nav {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 31px;
min-height: 80px;
box-shadow: 0 5px 12px rgba(22, 38, 51, 0.05);
@include media-query($small) {
{%- comment -%}
This is a required section for the Shopify Theme Store.
It is available in the "Header" section in the theme editor.
Theme Store required settings
- Show announcement
- Text: message to announce
- Link: link of the announcement bar
Theme Store optional settings
/**
* Main Nav Script
* ------------------------------------------------------------------------------
* This is (hopefully) controlling the mobile menu open / close...
* @namespace main-nav
*/
const burger = document.querySelector('.main-nav__utility-menu--open');
const nav = document.querySelector('.main-nav__menu');
const subNavClose = document.querySelector('.main-nav__utility-menu--close');
@seandogg
seandogg / product-item.liquid
Last active September 11, 2019 19:44
for matt
<div class="ProductItem {% if use_horizontal %}ProductItem--horizontal{% endif %}">
<div class="ProductItem__Wrapper">
{%- comment -%}
We are using LazySizes to efficiently choose the most appropriate image in the set. However, because internally LazySizes uses srcset, we need to make
sure that the image sizes we offer is not larger than the max size uploaded by the merchants.
{%- endcomment -%}
{%- if settings.product_image_size == 'natural' or use_horizontal -%}
{%- assign use_natural_size = true -%}
{%- else -%}
<!-- Begin Accordion Snippet -->
<style>
.so-tab {
position: relative;
width: 100%;
overflow: hidden;
margin: 25px 0;
}
.so-tab label {
position: relative;
search: instantsearch({
appId: algolia.config.app_id,
apiKey: algolia.config.search_api_key,
indexName: '' + algolia.config.index_prefix + 'products',
searchParameters: {
clickAnalytics: true
},
urlSync: {},
searchFunction: function (searchFunctionHelper) {
// Set query parameters here because they're not kept when someone
@seandogg
seandogg / product-description-tabs.liquid
Last active November 13, 2018 19:00
product-description-tabs.liquid
<ul class="product-tabs">
<li class="current"><a href="#fragment-1"><span>Description</span></a></li>
<li><a href="#fragment-2"><span>Ingredients</span></a></li>
<li><a href="#fragment-3"><span>Reviews</span></a></li>
</ul>
<div class="tab">
<div id="fragment-1" class="tab-content">
<p>Description Content here</p>
<p> </p>
</div>
@seandogg
seandogg / shopify-rte-accordion.html
Last active February 13, 2023 08:04
Shopify Rich Text Editor Pure CSS Accordion
<!-- Begin Accordion Snippet -->
<style>
.so-tab {
position: relative;
width: 100%;
overflow: hidden;
margin: 25px 0;
}
.so-tab label {
position: relative;
const make = 'BMW';
const model = 'x5';
const colour = 'Royal Blue';
function leftPad(str, length = 20) {
return `→ ${' '.repeat(length - str.length)}${str}`;
}
console.log(leftPad(make));
console.log(leftPad(model));