odessy

{%- assign button_text = 'products.product.add_to_cart' | t -%}
{%- if card_product.metafields.theme.preorder.value == true -%}
  {% comment %} Add a line item property with 'Sale type: Pre-order' and make the button say 'Pre-order'{% endcomment %}
  {%- assign button_text =  'products.product.pre_order' | t -%}
{%- endif -%}
{%- unless card_product.selected_or_first_available_variant.available -%}
  {%- assign button_text =  'products.product.sold_out' | t -%}
{%- endunless -%}

<a href="{{ card_product.url }}" class="product-clip__btn btn--soft btn--small btn--primary">

odessy

function getCSSLayoutWidth() {
  const value = getComputedStyle(document.documentElement)
    .getPropertyValue('--LAYOUT-WIDTH')
    .trim();
  return value || '100vw';
}

function updateImageSizes(largeValue, smallValue) {
  const largeDivisor = largeValue || 1;
  const smallDivisor = smallValue || 1;

odessy

/* Set product page thumbnail width and height */
.product-single{
  --thumb-width: 100px;
  --thumb-height: 125px;
}
.media__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
}
.media__thumb img.loading-shimmer {

odessy

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "@id": "{{ product.url | prepend: shop.url }}#product",
  "name": {{ product.title | json }},
  "description": {{ product.description | strip_html | json }},
  "image": [
    {% for image in product.images %}
      {{ image | image_url | prepend: "https:" | json }}{% unless forloop.last %},{% endunless %}

odessy

{% if settings.badge_custom %}
    {% if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field' %}
      <div class="badge--custom"><span>{{ product.metafields.theme.badge.value }}</span>
        <style>
        .badge--custom {
            font-family: var(--FONT-STACK-ACCENT);
            font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
            text-transform: var(--FONT-ACCENT-TRANSFORM);
            letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
            font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));

odessy

/* Javascript - Redirect to cart when product added to cart */
document.addEventListener('theme:cart:popdown', (e) => {
  const listener = (e) => {
    const location = window.location.href;
    if(theme && theme.routes && !location.includes(theme.routes.cart)){ 
        window.location.href = theme.routes.cart; 
    }
  };
  document.addEventListener('theme:cart:change', listener);
});

odessy

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }},
  "url": {{ request.origin | append: product.url | json }},
  {% if seo_media -%}
    "image": [
      {{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
    ],

odessy

{%- if product.available -%}
<div x-data="{visible: false, sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick, ...showButton}">
<template x-teleport="body">
<div 
    @theme:scroll.document="showButton"
    x-show.opacity="visible"
    class="buy-it-now-wrapper block left-0 bottom-0 fixed z-20 w-full p-r5">
  <button
    @click="handleClick"
    class= "btn btn--primary btn--full uppercase btn--add-to-cart buy-it-now block">{{'products.product.add_to_cart' | t}}</button>

odessy

    let ColorMatch = class ColorMatch {

        init() {
...
            
            const newColors = document.querySelector('[data-swatches-json]');
            if (newColors && newColors.innerHTML !== '') {
                const colors = JSON.parse(newColors.innerHTML);
                return Promise.resolve(this.matchColors(colors, this.settings.color));
            }

odessy

<link rel="apple-touch-icon" sizes="180x180" href="{{ settings.favicon | img_url: '180x180' }}" />