FROM CACHE - en_header
Promotion image

Custom Product Review Highlight Section not Displaying Correctly on Mobile Devices

Solved

Custom Product Review Highlight Section not Displaying Correctly on Mobile Devices

watt010
Excursionist
23 4 5
‎02-11-2023 12:29 PM

I have a custom code for my shopify store section/custom-review-columns.liquid I want it to do the following

  • each column must display an image, heading in bold, subheading in bold and a text box
  • display up to 3 columns at a time on a desktop in a single row. Flickity left/right arrows must not display for 3 or less columns
  • on mobile devices only: one column at a time must display using flickity left/right navigation arrows to display the other columns. Must not autoplay and must be on an endless loop

I've designed it all so it's self-contained within this section code. But when I try to view it on mobile devices in the admin editor it only displays one column on mobile devices with the right/left arrows. When clicking right/left it does nothing. I turned on the page dots for this section and only one page dot displays on mobile making it appear that it's only recognizing that one column exists on mobile. Up to 3 columns are displaying without issue on desktop.

 

Here is the entire current section code (with page dots enabled)

 

 

<head>
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
</head>

<div class="carousel" data-flickity='{ "wrapAround": true }'>
  <div class="review-columns-container">
    {% for block in section.blocks %}
      <div class="review-column">
        <img src="{{ block.settings.image | img_url: '1024x1024' }}" alt="{{ block.settings.header }}">
        <h3 class="review-header">{{ block.settings.header }}</h3>
        <h4 class="review-subheader">{{ block.settings.subheader }}</h4>
        <p class="review-text">{{ block.settings.text }}</p>
      </div>
    {% endfor %}
  </div>
</div>

<style>
  .flickity-prev-next-button {
    display: block;
  }

  .review-columns-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .review-column {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin: 1%;
  }

  @media (min-width: 768px) {
    .flickity-prev-next-button {
      display: none;
    }

    .review-columns-container {
      display: flex;
      flex-wrap: wrap;
    }

    .review-column {
      flex: 1;
      max-width: 33%;
    }
  }

  .review-header {
    font-weight: bold;
    margin-top: 1em;
  }

  .review-subheader {
    font-weight: bold;
    margin-top: 0.5em;
  }

  .review-text {
    margin-top: 1em;
  }
</style>

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var elem = document.querySelector(".carousel");
    var flkty = new Flickity(elem, {
      prevNextButtons: true,
      cellAlign: 'left',
      contain: true,
      autoPlay: false,
      wrapAround: true,
      pageDots: false
    });
  });
</script>








{% schema %}
{
  "name": "Custom Review Columns",
  "settings": [
    {
      "type": "header",
      "content": "Custom Review Columns"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "header",
      "label": "Header",
      "default": "Header"
    },
    {
      "type": "text",
      "id": "subheader",
      "label": "Subheader",
      "default": "Subheader"
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Text",
      "default": "Text"
    }
  ],
  "blocks": [
        {
      "type": "review",
      "name": "Review",
      "settings": [
        {
          "type": "header",
          "content": "Review"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "header",
          "label": "Header",
          "default": "Header"
        },
        {
          "type": "text",
          "id": "subheader",
          "label": "Subheader",
          "default": "Subheader"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "Text"
        }
      ]
    }
  ],
  "presets": [
{
"category": "columns",
"name": "custom review columns"
}
]
}
{% endschema %}

 

 

 

Labels:
651 Views
1 Like
Report
Accepted Solution (1)

watt010
Excursionist
23 4 5
‎02-14-2023 11:24 PM

This is an accepted solution.

I ended up resolving this issue myself.

First I added the flickity library to my layout/theme.liquid by pasting the below code within the header section of that file

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>

 

Then I created a new file section/index-columns-custom.liquid and this is the entire code for that section.

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
<head>
{% render 'structuredDataV2' %}{% render 'SEO-Master' %}

  <!-- Basic page needs ================================================== -->
  <meta name="facebook-domain-verification" content="u8hzyb4o7c9i43rgslzgmrwur9xj7j" />
  <meta name="facebook-domain-verification" content="kt008ss2cln426lpotxtgew2g2cb3g" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  {% if settings.favicon %}
  <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}

  <!-- Title and description ================================================== -->

  <!-- Air Reviews Script -->
 {% include 'air-reviews-setting' %}
  <!-- /Air Reviews Script -->

<title>
  {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
  </title>

  {% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
  {% endif %}

  <!-- Social meta ================================================== -->
  {% include 'social-meta-tags' %}

  <!-- Helpers ================================================== -->
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_primary }}">

  <!-- CSS ================================================== -->
  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
  {% render 'css-variables' %}

  <script>
    window.theme = window.theme || {};

    var theme = {
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        soldOut: {{ 'products.product.sold_out' | t | json }},
        unavailable: {{ 'products.product.unavailable' | t | json }},
        zoomClose: {{ "products.zoom.close" | t | json }},
        zoomPrev: {{ "products.zoom.prev" | t | json }},
        zoomNext: {{ "products.zoom.next" | t | json }},
        addressError: {{ 'map.errors.address_error' | t | json }},
        addressNoResults: {{ 'map.errors.address_no_results' | t | json }},
        addressQueryLimit: {{ 'map.errors.address_query_limit_html' | t | json }},
        authError: {{ 'map.errors.auth_error_html' | t | json }}
      },
      settings: {
        // Adding some settings to allow the editor to update correctly when they are changed
        enableWideLayout: {{ settings.enable_wide_layout }},
        typeAccentTransform: {{ settings.type_accent_transform }},
        typeAccentSpacing: {{ settings.type_accent_spacing }},
        baseFontSize: '{{ settings.type_base_size }}',
        headerBaseFontSize: '{{ settings.type_header_size }}',
        accentFontSize: '{{ settings.type_accent_size }}'
      },
      variables: {
        mediaQueryMedium: 'screen and (max-width: 768px)',
        bpSmall: false
      },
      moneyFormat: {{ shop.money_format | json }}
    };

    {%- if template == 'collection' -%}
      {%- if current_tags -%}
        {%- capture tag_handles -%}
            {%- for tag in current_tags -%}
              {{- tag | handle | append: '|' -}}
            {%- endfor -%}
        {%- endcapture -%}
      {%- endif -%}

      theme.breadcrumbs = {
        collection: {
          title: {{ collection.title | json }},
          link: "{{ shop.url }}{{ collection.url }}{%- if current_tags -%}/{{- tag_handles | split: '|' | join: '+' -}}{%- endif -%}"
        }
      };
      sessionStorage.setItem("breadcrumb", JSON.stringify(theme.breadcrumbs.collection));

    {%- elsif template != 'product' -%}
      if (sessionStorage.getItem("breadcrumb")) {
        sessionStorage.removeItem("breadcrumb")
      }
    {%- endif -%}

    document.documentElement.className = document.documentElement.className.replace('no-js', 'supports-js');
  </script>

  <!-- Header hook for plugins ================================================== -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>


<!-- Avada Sales Pop Script -->
{% include 'avada-sales-pop' %}
<!-- /Avada Sales Pop Script -->

{{ content_for_header }}


  {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}
  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}
  {{ '//cdn.shopify.com/s/javascripts/api.jquery.js' | script_tag }}
  
  <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

  <script>
    $(document).ready(function() {
      $('.buy-now').click(function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        var quantity = form.find('input[name="quantity"]').val();
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          dataType: 'json',
          data: form.serialize(),
          success: function(data) {
            window.location.href = '/';  // redirect to the homepage
          },
          error: function(XMLHttpRequest, textStatus) {
            // handle errors here
          }
        });
      });
    });
  </script>

  {% comment %}
    If you store has customer accounts disabled, you can remove the following JS file
  {% endcomment %}
  {% if request.page_type contains 'customers/' %}
    {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
  {% endif %}
{% include 'bucks-cc' %}
            </head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">

  {% section 'header' %}

  <main class="wrapper main-content" role="main">
    <div class="grid">
        <div class="grid__item">
          {{ content_for_layout }}
        </div>
    </div>
  </main>

  {% section 'footer' %}

  {%- if request.page_type == 'index' -%}
    <p id="slideshow-info" class="visually-hidden" aria-hidden="true">
      {{- 'home_page.slideshow.navigation_instructions' | t -}}
    </p>
  {%- endif -%}

  {% if request.page_type == 'product' or request.page_type == 'index' %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  {% endif %}

  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-external-message">{{ 'general.accessibility.new_window' | t }}</li>
    <li id="a11y-new-window-external-message">{{ 'general.accessibility.new_window_and_external' | t }}</li>
  </ul>

  {{ 'theme.js' | asset_url | script_tag }}
{{'tiny-img-link-preloader.js' | asset_url | script_tag }}

  {% if section.settings.enable_custom_columns %}
  {% section 'custom-columns' %}
{% endif %}

</body>
</html>

By doing the above I was able to resolve my code. I realize that adding more than 3 columns does cause some formatting issues on desktop, I didn't care to work on that as I only needed the 3 columns.

View solution in original post

546 Views
0 Likes
Report
Replies 4 (4)

KetanKumar
Shopify Partner
37035 3644 12019
‎02-11-2023 02:03 PM

@watt010 

oh sorry that issue can you please send store url so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
629 Views
0 Likes
Report
In response to KetanKumar

watt010
Excursionist
23 4 5
‎02-11-2023 02:10 PM

I have not published the store as I'm not publishing until everything is working correctly. The code for section/custom-review-columns is entirely self-contained in the code I provided in my original post.

I will add that I'm aware this code is meant for me to manually upload individual product review photos and input the heading, subheading and text box content myself.

627 Views
0 Likes
Report
In response to KetanKumar

watt010
Excursionist
23 4 5
‎02-12-2023 02:36 PM

I've been able to isolate the issue. I went back and removed a custom section "product grid" and the below code for section/custom-columns.liquid works without issue.

this is the code for section/custom-columns.liquid that works when section/product-grid.liquid is not present

<div class="custom-columns" style="text-align: center;">
  <div class="custom-columns__slider" data-flickity='{ "cellAlign": "left", "contain": true, "prevNextButtons": true, "autoPlay": true, "wrapAround": false, "pageDots": false }'>
    {% for i in (1..3) %}
      {% assign image_num = "image_" | append: i %}
      {% assign image = section.settings[image_num] %}
      <div class="custom-columns__slide" style="text-align: center;">
        <img src="{{ image.src | img_url: 'large' }}" alt="{{ image.alt }}" style="margin:20px; display: block; margin-left: auto; margin-right: auto;">
        {% assign heading_id = "image_" | append: i | append: "_heading" %}
        <h2 style="text-align: center; margin-bottom: 0;">{{ section.settings[heading_id] }}</h2>
        {% assign subheading_id = "image_" | append: i | append: "_subheading" %}
        <p style="text-align: center; margin-top: 0; font-weight: bold;">{{ section.settings[subheading_id] }}</p>
        {% assign text_body_id = "image_" | append: i | append: "_text_body" %}
        {% assign text_body_italic_id = "image_" | append: i | append: "_text_body_italic" %}
        <p style="text-align: center; margin-top: 10px; {% if section.settings[text_body_italic_id] %} font-style: italic; {% endif %}">{{ section.settings[text_body_id] | newline_to_br }}</p>
        {% assign button_url_id = "image_" | append: i | append: "_button_url" %}
        {% assign button_url_id = "image_" | append: i | append: "_button_url" %}
        {% assign button_text_id = "image_" | append: i | append: "_button_text" %}
        <a href="{{ section.settings[button_url_id] }}" class="custom-columns__button" style="display: block; margin: 20px auto; padding: 10px 20px; background-color: #0081A3; color: #FFFFFF; text-align: center; text-decoration: none;">{{ section.settings[button_text_id] }}</a>
        </div>
    {% endfor %}
  </div>
  {% if template == 'customer/account' %}
<a href="#" class="custom-columns__delete" data-section-id="{{ section.id }}">Delete this section</a>
{% endif %}
</div>
<script>
  $(document).ready(function() {
    $('.custom-columns__delete').on('click', function(e) {
      e.preventDefault();
      var sectionId = $(this).data('section-id');
      Shopify.removeSection(sectionId);
    });
    if ( $(window).width() < 768) {
      $('.custom-columns__slider').flickity({
        "wrapAround": true,
        "autoPlay": false
      });
    }
  });
</script>
<style>
  .custom-columns__slider {
    margin: 20px 0;
  }
  .custom-columns__slide {
  width: calc(100% / 3 - 40px); /* 3 columns on desktop, 1 column on mobile */
  display: inline-block;
  margin: 0 20px;
  text-align: center;
}
  @media (max-width: 768px) {
.custom-columns__slide {
width: 100%;
}
}
.custom-columns__delete {
display: block;
text-align: center;
margin: 20px 0;
}

.custom-columns__button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  margin-bottom: 0.5em;
  background-color: #0081A3;
  color: white;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
}
  
</style>


{% schema %}
{
"name": "Custom Columns",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "text",
"id": "image_1_heading",
"label": "Heading for Image 1"
},
{
"type": "text",
"id": "image_1_subheading",
"label": "Subheading for Image 1"
},
{
"type": "textarea",
"id": "image_1_text_body",
"label": "Text Body for Image 1"
},
{
"type": "checkbox",
"id": "image_1_text_body_italic",
"label": "Make Text Body for Image 1 italic"
},
{
"type": "text",
"id": "image_1_button_url",
"label": "Button URL for Image 1"
},
{
"type": "text",
"id": "image_1_button_text",
"label": "Button Text for Image 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
},
{
"type": "text",
"id": "image_2_heading",
"label": "Heading for Image 2"
},
{
"type": "text",
"id": "image_2_subheading",
"label": "Subheading for Image 2"
},
{
"type": "textarea",
"id": "image_2_text_body",
"label": "Text Body for Image 2"
},
{
"type": "checkbox",
"id": "image_2_text_body_italic",
"label": "Make Text Body for Image 2 italic"
},
{
"type": "text",
"id": "image_2_button_url",
"label": "Button URL for Image 2"
},
{
"type": "text",
"id": "image_2_button_text",
"label": "Button Text for Image 2"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image 3"
},
{
"type": "text",
"id": "image_3_heading",
"label": "Heading for Image 3"
},
{
"type": "text",
"id": "image_3_subheading",
"label": "Subheading for Image 3"
},
{
"type": "textarea",
"id": "image_3_text_body",
"label": "Text Body for Image 3"
},
{
"type": "checkbox",
"id": "image_3_text_body_italic",
"label": "Make Text Body for Image 3 italic"
},
{
"type": "text",
"id": "image_3_button_url",
"label": "Button URL for Image 3"
},
{
"type": "text",
"id": "image_3_button_text",
"label": "Button Text for Image 3"
}
  ],
"presets": [
{
"category": "columns",
"name": "custom columns"
}
]
}
{% endschema %}


This is the code for section/product-grid.liquid

<div class="product-grid">
  {% for block in section.blocks %}
    <div class="column">
      <img src="{{ block.settings.product.featured_image.src | img_url: 'large' }}" alt="{{ block.settings.product.title }}">
      <p><strong>{{ block.settings.product.title }}</strong></p>
      <form action="/cart/add" method="post">
        <input type="hidden" name="id" value="{{ block.settings.product.variants.first.id }}">
        <input type="submit" value="Buy Now" class="btn">
      </form>
    </div>
  {% endfor %}
</div>

<style>
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .product-grid .column {
    width: calc(33.3333% - 20px);
    margin: 10px;
    text-align: center;
  }
  .product-grid img {
    max-width: 100%;
  }
  .product-grid .btn {
    margin-top: 10px;
  }
  @media (max-width: 767px) {
    .product-grid .column {
      width: calc(50% - 20px);
    }
  }
</style>


{% schema %}
{
  "name": "Product Grid",
  "blocks": [
    {
      "type": "product_grid",
      "name": "Product Grid Item",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "grid",
      "name": "Product Grid"
    }
  ]
}
{% endschema %}
578 Views
0 Likes
Report

watt010
Excursionist
23 4 5
‎02-14-2023 11:24 PM

This is an accepted solution.

I ended up resolving this issue myself.

First I added the flickity library to my layout/theme.liquid by pasting the below code within the header section of that file

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>

 

Then I created a new file section/index-columns-custom.liquid and this is the entire code for that section.

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
<head>
{% render 'structuredDataV2' %}{% render 'SEO-Master' %}

  <!-- Basic page needs ================================================== -->
  <meta name="facebook-domain-verification" content="u8hzyb4o7c9i43rgslzgmrwur9xj7j" />
  <meta name="facebook-domain-verification" content="kt008ss2cln426lpotxtgew2g2cb3g" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  {% if settings.favicon %}
  <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}

  <!-- Title and description ================================================== -->

  <!-- Air Reviews Script -->
 {% include 'air-reviews-setting' %}
  <!-- /Air Reviews Script -->

<title>
  {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
  </title>

  {% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
  {% endif %}

  <!-- Social meta ================================================== -->
  {% include 'social-meta-tags' %}

  <!-- Helpers ================================================== -->
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_primary }}">

  <!-- CSS ================================================== -->
  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
  {% render 'css-variables' %}

  <script>
    window.theme = window.theme || {};

    var theme = {
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        soldOut: {{ 'products.product.sold_out' | t | json }},
        unavailable: {{ 'products.product.unavailable' | t | json }},
        zoomClose: {{ "products.zoom.close" | t | json }},
        zoomPrev: {{ "products.zoom.prev" | t | json }},
        zoomNext: {{ "products.zoom.next" | t | json }},
        addressError: {{ 'map.errors.address_error' | t | json }},
        addressNoResults: {{ 'map.errors.address_no_results' | t | json }},
        addressQueryLimit: {{ 'map.errors.address_query_limit_html' | t | json }},
        authError: {{ 'map.errors.auth_error_html' | t | json }}
      },
      settings: {
        // Adding some settings to allow the editor to update correctly when they are changed
        enableWideLayout: {{ settings.enable_wide_layout }},
        typeAccentTransform: {{ settings.type_accent_transform }},
        typeAccentSpacing: {{ settings.type_accent_spacing }},
        baseFontSize: '{{ settings.type_base_size }}',
        headerBaseFontSize: '{{ settings.type_header_size }}',
        accentFontSize: '{{ settings.type_accent_size }}'
      },
      variables: {
        mediaQueryMedium: 'screen and (max-width: 768px)',
        bpSmall: false
      },
      moneyFormat: {{ shop.money_format | json }}
    };

    {%- if template == 'collection' -%}
      {%- if current_tags -%}
        {%- capture tag_handles -%}
            {%- for tag in current_tags -%}
              {{- tag | handle | append: '|' -}}
            {%- endfor -%}
        {%- endcapture -%}
      {%- endif -%}

      theme.breadcrumbs = {
        collection: {
          title: {{ collection.title | json }},
          link: "{{ shop.url }}{{ collection.url }}{%- if current_tags -%}/{{- tag_handles | split: '|' | join: '+' -}}{%- endif -%}"
        }
      };
      sessionStorage.setItem("breadcrumb", JSON.stringify(theme.breadcrumbs.collection));

    {%- elsif template != 'product' -%}
      if (sessionStorage.getItem("breadcrumb")) {
        sessionStorage.removeItem("breadcrumb")
      }
    {%- endif -%}

    document.documentElement.className = document.documentElement.className.replace('no-js', 'supports-js');
  </script>

  <!-- Header hook for plugins ================================================== -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>


<!-- Avada Sales Pop Script -->
{% include 'avada-sales-pop' %}
<!-- /Avada Sales Pop Script -->

{{ content_for_header }}


  {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}
  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}
  {{ '//cdn.shopify.com/s/javascripts/api.jquery.js' | script_tag }}
  
  <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

  <script>
    $(document).ready(function() {
      $('.buy-now').click(function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        var quantity = form.find('input[name="quantity"]').val();
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          dataType: 'json',
          data: form.serialize(),
          success: function(data) {
            window.location.href = '/';  // redirect to the homepage
          },
          error: function(XMLHttpRequest, textStatus) {
            // handle errors here
          }
        });
      });
    });
  </script>

  {% comment %}
    If you store has customer accounts disabled, you can remove the following JS file
  {% endcomment %}
  {% if request.page_type contains 'customers/' %}
    {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
  {% endif %}
{% include 'bucks-cc' %}
            </head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">

  {% section 'header' %}

  <main class="wrapper main-content" role="main">
    <div class="grid">
        <div class="grid__item">
          {{ content_for_layout }}
        </div>
    </div>
  </main>

  {% section 'footer' %}

  {%- if request.page_type == 'index' -%}
    <p id="slideshow-info" class="visually-hidden" aria-hidden="true">
      {{- 'home_page.slideshow.navigation_instructions' | t -}}
    </p>
  {%- endif -%}

  {% if request.page_type == 'product' or request.page_type == 'index' %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  {% endif %}

  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-external-message">{{ 'general.accessibility.new_window' | t }}</li>
    <li id="a11y-new-window-external-message">{{ 'general.accessibility.new_window_and_external' | t }}</li>
  </ul>

  {{ 'theme.js' | asset_url | script_tag }}
{{'tiny-img-link-preloader.js' | asset_url | script_tag }}

  {% if section.settings.enable_custom_columns %}
  {% section 'custom-columns' %}
{% endif %}

</body>
</html>

By doing the above I was able to resolve my code. I realize that adding more than 3 columns does cause some formatting issues on desktop, I didn't care to work on that as I only needed the 3 columns.

547 Views
0 Likes
Report

Community Blog Articles

Jacqui_0-1725391911908.jpeg
Recap | An AMA with 2H Media: Marketing Your Shopify Store!

Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...

By Jacqui Sep 6, 2024
Starting image.webp
Partner Perspective: Hydrogen Visual Editor with thePrimeWeb

The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...

By JasonH Sep 2, 2024
image8.webp
Custom Code Edits to Your Shopify Themes (CSS) Made Easy

Note: Customizing your CSS requires some familiarity with CSS and HTML. Before you cust...

By JasonH Aug 12, 2024
Terms of Service Privacy Policy