Skip to content

Instantly share code, notes, and snippets.

@odessy
odessy / gist:78d232f313493336d7e86b9e0f54e5a5
Last active June 14, 2024 15:17
Pages URL for author handle
{% assign author_handle = article.author | handle %}
"url": {{ shop.url | append: '/pages/' | append: author_handle | json }}
@odessy
odessy / sticky_add_to_cart_button_v2.liquid
Last active January 2, 2025 16:03
Pipeline 7 Alpine js buy it now button sticky add to cart
{%- comment -%}
Uses the shopify permalink to generate the cart link
https://help.shopify.com/en/manual/products/details/cart-permalink#creating-a-cart-permalink
Example:
https://my-shop-name.myshopify.com/cart/36485954240671:1
{%- endcomment -%}
{%- if product.selling_plan_groups.size == 0 -%}
<div x-data="{sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick}">
@odessy
odessy / gist:bca25e6479c1ecfafa014e36a93bfacf
Last active May 10, 2024 16:43
Pipeline 7 kicker underline for headings
.rte h2:not([class]) {
padding-bottom: var(--inner);
position: relative;
margin-bottom: var(--space-4);
}
.rte h2:not([class]):after {
content: "";
margin: auto;
width: 30px;
height: 3px;
@odessy
odessy / gist:944ec03820fca3a8782b709096d751c1
Last active June 11, 2024 15:39
Pipeline 7 arrows above arrows show on images
.section-without-title .flickity-force-arrows-top [data-carousel] .flickity-button{
top: var(--buttons-top);
bottom: initial;
background: #fff;
}
.section-without-title .flickity-force-arrows-top [data-carousel] .flickity-button:after{
content: '';
padding: var(--gutter)
}
.section-without-title:not(.not-moved-arrows):not(.hidden-arrows):not(.section-without-title--skip) {
@odessy
odessy / gist:6736bb8f0fbf8cdf2d5874ef23cdd1c9
Created May 8, 2024 19:14
Pipeline 7 Custom button outline style
.button.outline {
--btn-text: var(--text);
--btn-bg-hover: var(--hairline);
--btn-bg: rgb(255 255 255 / 0%);
font-family: var(--TYPE-STACK-BUTTON);
font-style: var(--TYPE-STYLE-BUTTON);
font-weight: var(--TYPE-WEIGHT-BUTTON);
text-transform: var(--FONT-BUTTON-TRANSFORM);
letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
display: inline-block;
<p><em >Are you seeking an opportunity to grow within an ambitious team? Join the mari meia<meta charset="utf-8">® adventure!</em></p>
<p style="text-align: left;" >mari meia<meta charset="utf-8"><span >®</span> is a bedding &amp; sleep wear&nbsp;brand offering a variety of amusing products,&nbsp;selected to recover skin and hair's health.&nbsp;We aim to inspire everyone to&nbsp; awaken their inner muse and cherish it forever. Learn more about our story <a href="http://marimeia.com/pages/about-us" title="About Us"><span >here</span></a>.</p>
<p style="text-align: left;" >&nbsp;</p>
<p style="text-align: left;" >---</p>
<h2 style="text-align: left;" ></h2>
<h2 style="text-align: left;" >Jobs:</h2>
<h3 style="text-align: left;" >Online&nbsp;Social Media Manager (4-36h per week)</h3>
<p style="text-align: left;" >Are you passionate about managing social media platforms and driving engagement? Do you have experience in creating compelling content and implementing effective marketing strategies? If so, we have the
<!--Freshly Edits-->
{% assign current_variant = product.selected_or_first_available_variant %}
{% for product_variant in product.variants %}
{% unless product_variant.metafields.freshly.expiry_date == blank %}
<div id="variant-expiry-{{ product_variant.id }}" class="variant-expiry-date" {% if current_variant.id != product_variant.id %} style="display:none;" {% endif %}>
<b> Mindesthaltbarkeitsdatum:</b> <b>{{ product_variant.metafields.freshly.expiry_date | date: "%Y-%m-%d" }} </b>
</div>
{% endunless %}
{% endfor %}
@odessy
odessy / gist:a6b0a1ba0f666ee1478a77d667674693
Created May 4, 2024 21:15
Enable product hover for device 768px and up
@media only screen and (min-width: 768px){
.product__media__hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: var(--bg);
visibility: hidden;
@odessy
odessy / gist:d66dec45ea9ae7cf90460188c85390b9
Created May 4, 2024 16:57
Collection description show more less button
<div class="collection__text-content wrapper section-padding">
<div class="collection__heading align--middle-center">
<div class="rte standard__rte collection__heading__text">
<div class="text-center" x-data="{ open: false, maxLength: 200, fullText: '', slicedText: '' }" x-init="fullText = $el.firstElementChild.textContent.trim(); slicedText = fullText.slice(0, maxLength) + '...'" >
<div x-text="open ? fullText : slicedText" x-transition>{{ collection.description }}</div>
<!-- <button @click="open = true; event.target.style.display='none';" x-text="'Show more'"></button>-->
<!-- Comment the button above and uncomment the button below to enable toggle feature instead of just show more -->
<button
@click="open = ! open"
x-text="open ? 'Show less' : 'Show more'"
@odessy
odessy / gist:3a26056701b6566ad6f5fefac81e22c6
Created April 20, 2024 18:52
Pipeline grid code with youtube iframe video
<div class="wrapper section-padding">
<div data-grid data-grid-flex data-grid-large data-grid-medium data-grid-small data-custom-scrollbar-items style="
--grid-large-items: 3;
--grid-medium-items: 3;
--grid-small-items: 1.2;">
<div class="index__column grid__item slide-item text-center" data-item>