Brooklyn Theme, Adding arrow navigation on the product page desktop and mobile

Highlighted
Tourist
10 0 4

Hi there! I'm currently working on a website for a client using the brooklyn theme. On the product page I have the main image and i wanted to get arrows underneath it so you could move between product images on desktop and on mobile. Brooklyn by default has this setting on mobile but while fidgeting I ruined it? So now it just shows the main image. I dont want the images showing as stacked or as thumb nails either. Also how do you stop the page from resizing every time the image is changed? It readjusts between vertical and horizontal images and I've been struggling to figure out why while looking at the css. Thanks so much

 

This is the code on the product page template. I removed some of the code  so the arrows do appear and the images dont show as stacked or thumbnails but i think i made things worse

{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}

<div itemscope itemtype="http://schema.org/Product" id="ProductSection--{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product-template"
  data-image-zoom-type="{{ section.settings.enable_image_zoom }}"
  data-enable-history-state="true"
  data-stacked-layout="{% if section.settings.media_layout == "stacked" %}true{% else %}false{% endif %}"
  {% if first_3d_model %}data-has-model="true"{% endif %}>

    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
    <meta itemprop="image" content="{{ product.featured_media | img_url: 'grande' }}">

    {% assign current_variant = product.selected_or_first_available_variant %}
    {% assign featured_media = current_variant.featured_media | default: product.featured_media %}

    {% assign stacked = false %}
    {% if section.settings.media_layout == "stacked" %}{% assign stacked = true %}{% endif %}
    {%- assign first_media = true -%}

    <div class="grid product-single">
      <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
        <div id="ProductMediaGroup-{{ section.id }}" class="product-single__media-group-wrapper" data-product-single-media-group-wrapper>
          <div class="product-single__media-group{% unless stacked %} product-single__media-group--single-xr{% endunless %}" data-product-single-media-group>
            {%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
            {% assign height = 850 %}
            {% assign width = 575 %}
            {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
            {% comment %}
              Display product images
            {% endcomment %}
            {%- for media in product.media -%}
              {%- assign featured = false -%}
              {%- if media == featured_media -%}
                {%- assign featured = true -%}
              {%- endif -%}

              {%- capture thumbnail_alt -%}
                {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                  {{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                {%- elsif media.media_type == 'model' -%}
                  {{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                {%- else -%}
                  {{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                {%- endif -%}
              {%- endcapture -%}


                <div id="main-prod" class="product-single__media-flex">
				 {%- include 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}
                  
                  {% comment %}
                    Display a "View in your space" button (multi) for the first visible media and each individual model.
                    Stacked layout only.
                  
                    {% if stacked %}
                      {%- assign xr_id = false -%}
                      {%- if first_media and first_3d_model -%}
                        {%- assign xr_id = first_3d_model.id -%}
                      {%- elsif media.media_type == 'model' -%}
                        {%- assign xr_id = media.id -%}
                      {%- endif -%}

                      {%- if xr_id -%}
                        {%- include 'xr-button' with model_id: xr_id, multi: true -%}
                      {%- endif -%}
                      {%- assign first_media = false -%}
                    {% endif %}
                  
                  {% endcomment %}
                </div>
            {%- endfor -%}
            
            {% if product.media.size > 1 %}
             <div id="slider-control">
                <div class="slick__controls slick-slider">
                    <button class="slick__arrow slick__arrow--previous" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slick-previous>
                       <span class="icon icon-slide-prev" aria-hidden="true"></span>
                    </button>
                    <button class="slick__arrow slick__arrow--next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slick-next>
                      <span class="icon icon-slide-next" aria-hidden="true"></span>
                    </button>
                    <div class="slick__dots-wrapper" data-slick-dots>
                    </div>
                 </div>
            </div>
			{% endif %}
            
          </div>

          {% comment %}
            Display a "View in your space" button (single).
            Stacked/Thumbnails layout (mobile)
            Thumbnail layout only (desktop)
          {% endcomment %}
          {%- if first_3d_model -%}
           {%- include 'xr-button' with model_id: first_3d_model.id, multi: false -%}
          {%- endif -%}

		  {% comment %}
          {% unless stacked %}
            <ul class="product-single__thumbnails small--hide grid-uniform" data-product-thumbnails>
              
              {% for media in product.media %}
                {% if product.media.size > 1 %}
              
                  <li class="grid__item medium--one-third large--one-quarter product-single__media-wrapper">
                    {%- capture thumbnail_alt -%}
                      {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                        {{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- elsif media.media_type == 'model' -%}
                        {{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- else -%}
                        {{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- endif -%}
                    {%- endcapture -%}

                    <a href="{{ media | img_url: 'grande' }}" class="product-single__thumbnail{% if media == featured_media %} active-thumb{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}" data-product-thumbnail>
                     	{% unless image.alt contains "header" %}
                  			<img class="product-single__thumb" src="{{ media | img_url: '160x' }}" alt="{{ thumbnail_alt }}">
                      		
                		{% endunless %}
                      
                     	{%- if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' -%}
                          <div class="product-single__thumbnail-badge">
                              {% include 'svg-definitions' with media.media_type %}
                          </div>
                       {%- endif -%}
                    </a>
                  </li>
                {% endif %}
     
              {% endfor %}
            </ul>
          {% endunless %}
		  {% endcomment %}
          
          
          
        </div>
      </div>

      <div  class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
          {% if section.settings.product_vendor_enable %}
            <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
          {% endif %}

           
          <h1 style="color: {{button_bg_color}}; font-weight: 600" class="product-single__title" id="prod-title" itemprop="name">{{ product.title }}</h1>
          <h2 style="color: {{button_bg_color}}">  {% for tag in product.tags %}
            		 {{ tag }} • {%endfor%}
          </h2>
        
        <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
        
          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            {% comment %}
              Optionally show the 'compare at' or original price of the product.
            {% endcomment %}
            <h3> {% include 'product-price', variant: current_variant %} </h3>
            
          
            
            <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

            {% capture "form_classes" %}
              product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
            {%- endcapture %}

            {% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}

            {% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}
              

              <select name="id" id="ProductSelect--{{ section.id }}" class="product-single__variants no-js">
                {% for variant in product.variants %}
                  {% if variant.available %}
                    <option {% if variant == product.selected_or_first_available_variant %}
                      selected="selected" {% endif %}
                      data-sku="{{ variant.sku }}"
                      value="{{ variant.id }}">
                      {{ variant.title }} - {{ variant.price | money_with_currency }}
                    </option>
                  {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>

              {% if section.settings.quantity_enabled %}
              <div class="product-single__quantity">
                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
              </div>
              {% endif %}

              <div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
                <button  type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            {% endform %}
          </div>
          {% if section.settings.social_sharing_products %}
            {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
          {% endif %}
        </div>
      </div>
    </div>

<div class="banner-img"> <img src="https://cdn.shopify.com/s/files/1/0458/5052/5849/files/USP_s.png?v=1597944343" /> </div>

<div class="product-desc">	
  	<img src="https://cdn.shopify.com/s/files/1/0458/5052/5849/files/Projection.jpg?v=1597944473"/>
</div>
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  <script type="application/json" id="ModelJson-{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
{% endunless %}

 

1 Like
Highlighted
Shopify Partner
7687 1058 2675

Hello, @confused 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
2 Likes
Highlighted
Tourist
10 0 4

Hi! @KetanKumar 

https://www.amelgo.co.uk/ 

I need the arrows on either side of the product so that you can click between images. 

confused_0-1599144251925.png

Like this but on the immediate page without having to click on the picture first.

confused_1-1599144308204.png

Thank you!

0 Likes
Highlighted
Shopify Partner
7687 1058 2675

@confused 

Thanks 

sorry i can't see multiple images 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
2 Likes
Highlighted
Tourist
10 0 4

@KetanKumar Hey sorry, is this one visible? I managed to get the arrows on the product page but I dont know how to do the functionality to make them click between uploaded images of a specific product. Thanks

Annotation 2020-09-03 211056.jpg

1 Like
Highlighted
Shopify Partner
7687 1058 2675

do you have add slider code?

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
2 Likes
Highlighted
Tourist
10 0 4

@KetanKumar what is the add slider code?? or where should i check for it?

1 Like
Highlighted
Shopify Partner
7687 1058 2675

@confused Thanks 

are you able to code HTML, CSS, JS, and liqiured code

can you please try this 

https://kenwheeler.github.io/slick/

or 

if you aren't able to this

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
10 0 4

@KetanKumar I know html, css and a bit of javascript and liquid. Now that I have the buttons on the screen, I don't know where to edit the liquid or javascript code in order to switch through product images. 

with the slider code, i don't know where to include it, could you please advise. Thank you

0 Likes
Highlighted
Shopify Partner
7687 1058 2675

@confused 

Yes, product template section fine image code and add your for lop code

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes