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 %} 

odessy

@media only screen and (max-width: 479px){
  .header__mobile {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .js__show__mobile .theme__header__toolbar, 
  .header__mobile .theme__header__toolbar {
    grid-column: 1 / span 8;
  }
  .header__mobile .header__logo.header__logo--image{
    grid-column: 3 / span 4;

odessy

<!-- Liquid - Add product sold label -->                       
{% assign current_variant = product.selected_or_first_available_variant %}
<p class="badge-wrapper"><span class="sold-out uppercase" {% if current_variant.available == "" %}style="display:none;" {% endif %}>{{ 'products.product.sold_out' | t }}</span></p>

<script>
  document.addEventListener('theme:variant:change', function(event) {
    const variant = event.detail.variant;
    let container = event.target;

    if(event.target.outerWrapper){

odessy

{% if cart.taxes_included %}
<p class="product__block__price" style="--PB: 18px;">{{ 'cart.general.shipping_at_checkout' | t }}</p>
{% endif %}

odessy

{%- liquid
assign swatch_option = nil
if settings.swatches_enable
  assign swatch_translation = 'general.swatches.color' | t
  assign swatch_labels = swatch_translation | append: ',' | split: ','
  for label in swatch_labels
    assign sanitized_label = label | lstrip | rstrip
    if product.options_by_name[sanitized_label].values.size > 0
      assign swatch_option = product.options_by_name[sanitized_label]
      break

odessy

<div data-api-content>
  <div class="drawer__top quickview__modal__top" data-quickview-head>

    <div class="drawer__top__left">
      {%- render 'product-title', product: product, block: block, section: section -%}
      {%- render 'product-price', product: product, block: block, section: section -%}
    </div>

    <button class="drawer__button drawer__close"
      data-first-focus