Skip to content

Instantly share code, notes, and snippets.

@svaustin66
svaustin66 / gist:94c5c2f485adac7b45d151c7d57a04fd
Created November 19, 2017 19:30
CSS Styling of RUSH ORDER Promotion in Shopify Cart
.cart-upsell {
padding: 20px;
text-align: center;
margin: 20px;
border: 2px solid #e28413;
border-radius: 5px;
}
.cart-upsell-row {
display: -webkit-flex;
display: flex;
@svaustin66
svaustin66 / gist:e2c156d64326f5ce0e2c065aa303838c
Created November 19, 2017 19:33
Shopify Script for Dynamic Pricing of RUSH ORDER Product
# Rush Order
Input.cart.line_items.each do |line_item|
product = line_item.variant.product
next unless product.id == 12097978371
subtotal_without_item = Input.cart.subtotal_price_was - line_item.line_price
line_item.change_line_price(subtotal_without_item * 0.2, message: "Rush Order fee is 20%")
end
Output.cart = Input.cart
@svaustin66
svaustin66 / more_less.js
Last active December 15, 2017 16:56
JavaScript for showing more or less text
<script>
$('.readmore').click(function (event) {
event.preventDefault();
var descriptionFull = document.querySelector('.product-description-full');
descriptionFull.style.display = 'block';
var descriptionShort = document.querySelector('.product-description-short');
descriptionShort.style.display = 'none';
});
$('.readless').click(function (event) {
event.preventDefault();
@svaustin66
svaustin66 / product.liquid
Last active December 15, 2017 16:55
HTML for Liquid Template for Show More/Less
{% if product.description.size > 700 %}
<div class="product-description-short">
{{ product.description | truncate: 500, ". . . " }}<a class="readmore" href="#">Show More &#62;</a>
</div>
<div class="product-description-full">
{{ product.description }}
<br><a class="readless" href="#">&#60; Show Less</a>
</div>
{% else %}
{{ product.description }}
@svaustin66
svaustin66 / product-info.liquid
Created December 25, 2017 18:51
Referencing a Product's Short Title
{% if product.metafields.product_meta.short_title %}
{{ product.metafields.product_meta.short_title }}
{% else %}
{{ product.title }}
{% endif %}
@svaustin66
svaustin66 / product-info.liquid
Created December 25, 2017 19:31
Product Title
{{ product.title }}
@svaustin66
svaustin66 / product-json-ld.liquid
Created January 10, 2018 22:27
Example of Structured Data for Shopify Product
{% assign current_variant = product.selected_or_first_available_variant %}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"@id": "{{ shop.url | append: '/products/' | append: product.handle }}",
"url": "{{ shop.url | append: '/products/' | append: product.handle }}",
"name": "{{ product.title }}",
"image": "{{ product.featured_image.src | img_url: 'master' }}",
@svaustin66
svaustin66 / show-discount-code.liquid
Last active May 21, 2022 20:04
Display the Cookie stored discount code on Shopify Pages
<div id="discount-message"></div>
<script type="text/javascript">
var codeCookieValue;
var getCookie = function(name) {
var value = "; " + document.cookie;
var parts = value.split('; '+name+'=');
if (parts.length == 2) return parts.pop().split(";").shift();
};
codeCookieValue = getCookie('discount_code');
@svaustin66
svaustin66 / show-discount.css
Created April 17, 2018 05:41
CSS entries for styling the display of the discount code
.show-discount {
text-align: center;
background-color: #b7b8c4;
}
.show-discount span {
color: red;
font-weight: bold;
}
@svaustin66
svaustin66 / product-form.liquid
Created October 24, 2018 04:18
Go to Cross-Sell page from Add to Cart
<button type="submit" name="add" class="action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
{% if product.tags contains 'Cross-Sell-A' %}
<input type="hidden" name="return_to" value="/pages/cross-sell-a" />
{% endif %}
{% if product.tags contains 'Cross-Sell-B' %}
<input type="hidden" name="return_to" value="/pages/cross-sell-b" />
{% endif %}
<span class="text">{{ add_to_cart_label }}</span>