Product Image Slider for Lorenza theme

New Member
1 0 0

Hey, not the first topic on creating/enabling a Product Image Slider but none of the other solved topics work with my theme. I am using the Lorenza theme and the customer service is really slow, so I am trying here first. 

 

I want my product images to appear with a slider so that my potential customers don't have to move down to thumbnails every time they want to see another photo. I came across the following tutorial: https://github.com/Nordic-Dev/shopify-product-image-slider ... which I have tried to apply and almost made it work. However there are a couple of bugs that I am not able to solve. My question is: Looking at the mentioned tutorial from Github and the Lorenza product-template.liquid-code, can I make it work without having rewrite the entire code? Please have a look at the code for product-template.liquid below. 

 

{% assign current_variant = product.selected_or_first_available_variant %}

{% assign featured_image = current_variant.image | default: product.featured_image %}

{% include "attribute-product-image-box-ratio-max" %}

<div id="productTop" itemscope itemtype="http://schema.org/Product" class=" sectionWrap halfGutter">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="name" content="{{ product.title}}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '600x' }}">

  <div class="grid flexGrid gridAlignTop">
    <div class="productImages twoThird flexItem gridAlignTop flexGrid" >
      {% if product.images.size > 0 %}
        <div class="flexItem eightNinth">
          <a href="#" class="hasPop image-container box-ratio image-layers" style="padding-bottom: {{ product_image_box_ratio_max }};" data-getPopout="#gallery">
            {% for image in product.images %}
              {% assign unselectedHide = "style='display: none;'" %}

              {% if image == featured_image %}
                {% assign unselectedHide = '' %}
              {% endif %}

              {% include 'responsive-image' with
                image: image,
                max_width: 570,
                max_height: 900,
                image_class: 'productImage',
                image_attributes: unselectedHide
              %}
            {% endfor %}
          </a>
        </div>

        {% if product.images.size > 1 %}
          <ul class="productThumbs gridAlignTop ninth flexItem">
            {% for image in product.images %}
              <li class="flexItem">
                <a
                  {% if forloop.first %}class="active"{% endif %}
                  data-index_id="#indexImage_{{ forloop.index }}" href="{{ image.src | img_url: '1440x' }}"
                  data-image-id="{{ image.id }}">
                    <img src="{{ image.src | img_url: '290x' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      {% endif %}
    </div>

    <div class="productInfo oneThird flexItem"
         data-product-form
         data-variant-style="{{ section.settings.product_variants }}"
         data-variant-selection-js="{{ 'variant_selection.js' | asset_url }}"
         data-option-selection-js="{{ 'option_selection.js' | shopify_asset_url }}"
         data-options-size="{{ product.options.size }}"
         data-variants-size="{{ product.variants.size }}"
         data-first-option="{{ product.options.first }}"
         data-first-variant-title="{{ product.variants.first.title }}"
         data-money-format="{{ shop.money_format }}"
         data-product-add-to-cart
         itemprop="offers"
         itemscope
         itemtype="http://schema.org/Offer">

      <script data-product-json type="application/json">
        {{ product | json }}
      </script>

      <meta itemprop="priceCurrency" content="{{ shop.currency }}">
      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
      {% include 'product_breadcrumb' %}
      <h1 class="product-info-title">
        
        {{ product.title }}
      </h1>

      <p class="price product-info-price">
        <span class="product-price" itemprop="price">
          {{ current_variant.price | money }}
        </span>

        {% if product.compare_at_price %}
          <span class="compare-price" itemprop="price">
            {{ current_variant.compare_at_price | money }}
          </span>
        {% endif %}
      </p>

      {% include 'product-reviews-badge' %}
      {% include 'product-form' %}
      {% include 'product-accordian' %}
      {% include 'social-share' %}
      
    </div>
    
  </div>
  {% include 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true %}
  
</div>

{% include 'product-reviews' %}

{% if product.variants.size < 2 %}
  {{ "shopify.image.js" | asset_url | script_tag }}
{% endif %}

{% schema %}
  {
    "name": "Product pages",
    "max_blocks": 3,
    "class": "product-tabs",
    "settings": [
      {
        "type": "select",
        "id": "product_variants",
        "label": "Variant style",
        "options": [
          {
            "value": "buttons",
            "label": "Buttons"
          },
          {
            "value": "dropdowns",
            "label": "Dropdowns"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "tab",
        "name": "Tab",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "placeholder": "Returns"
          },
          {
            "type": "richtext",
            "id": "content_product_tab",
            "label": "Text"
          }
        ]
      }
    ]
  }
{% endschema %}

The Github-article is saying: 

"From your product page template(product-template.liquid) remove the contents from <section class="primary-images"> and paste the include statement to the product-image-slider.liquid file."

 

The  included statement:

<section class="primary-images">
    {% include 'product-image-slider' %}
</section>

Where would YOU put the following code... and is it even possible to include the product-image-slider in the Lorenza product-template.liquid code without having to do major work?

 

Thanks :) 

0 Likes