odessy

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noreferrer noopener';
  }
}

odessy

@media only screen and (max-width: 767px) {
    .product__inner {
        display: grid;
        grid-template-areas:
        "title"
        "price"
        "variants"
        "quantity"
        "remaining"
        "buttons"

odessy

a.klaviyo-bis-trigger {
    background-color: var(--COLOR-PRIMARY);
    border: 1px solid var(--COLOR-PRIMARY);
    color: var(--COLOR-PRIMARY-OPPOSITE);
    font-style: var(--FONT-STYLE-ACCENT);
    text-transform: uppercase;
    font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
    font-style: calc(var(--font-3)*var(--FONT-ADJUST-ACCENT));
    font-family: Sohne Breit,helvetica,sans-serif;
    letter-spacing: .24em;

odessy

/* CSS - Change background color of block variants container */
.product__block__variants{
    background-color: #513f76;
    padding: 10px;
    border-radius: 15px;
    --text: #fff;
    --text-light: var(--text);
}
.radio__legend,
.radio__legend__label{

odessy

/* Add rounded radius to section and blocks */
.product-grid-item img,
.product-grid-item__image-wrapper,
.product-grid-item__image{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.section-padding:not(.wrapper--none) img,

odessy

Edit the code for your payment icons

In this step, you will change the way that payment icons are assigned to your footer. By default, your theme shows the icons that are associated with the payment gateway you have enabled in the payment settings section of your admin and that are available for the current customer's region and currency. With this customization, you will manually add or remove the payment icons that you want to display.

Steps:

1) From your Shopify admin, go to Online Store > Themes.

2) Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.

odessy

@media only screen and (max-width: 767px) {
    .grid--mosaic {
        display: grid;
        --short-height: calc(200px);
        --tall-height: calc(var(--short-height)* 2 + var(--inner));
    }
    .grid--mosaic-3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: calc(var(--gutter) / 2);

odessy

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll(".btn");
  buttons.forEach((btn)=>{
    btn.addEventListener('click', (event)=>{
      const id = btn.getAttribute("href");
      const div = document.querySelector(id);
      if(div){
        //hide other dives
        const otherDivs = div.parentNode.querySelectorAll('div[id^="q_"]');
        otherDivs.forEach((other)=>{

odessy

<!-- /snippets/product-grid-item-variant.liquid -->

{% comment %}
  A grid item for products used in collection grid view

  * product {object} - The current prodcut

  {% render 'product-grid-item', product: product %}
{% endcomment %}

odessy

{% liquid
assign color_name = 'color'
assign color_option = item.options_by_name[color_name]
assign color_position = color_option.position
assign color_position_key = 'option' | append: color_position
%}        
{% if color_option.values.size > 0 %}
{% for color_option in color_option.values %}
 {% assign variants = item.variants | where: color_position_key, color_option %} 
 {% assign variant = variants | first %}