We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Dawn theme Display dots instead of numbers

Dawn theme Display dots instead of numbers

AndreiGhetu
Tourist
53 0 3

Hello. Does anyone know how can I make to display dots or lines instead of 1/x?

AndreiGhetu_0-1679880613717.png

 

Replies 7 (7)

irene-vintage
Shopify Partner
853 103 376

Hello @AndreiGhetu ,

 

You can try to do this:

  • Go to Online Store -> Theme -> Customize 
  • In the left-hand panel, click on the "Product pages" section. -> product image gallery -> Image navigation style
  • Choose "Dots" or "Lines" from the drop-down menu to display dots or lines instead of counting numbers.

Hope this can help. Let us know if you need anything else.

 

Regards,

Ali Reviews team.

 

 

- Was my answer helpful? Please hit Like or Mark it as solution!
- Kudosi Product Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
AndreiGhetu
Tourist
53 0 3

Hi. Thank you for your reply, but I can't find any "Product pages" section.

irene-vintage
Shopify Partner
853 103 376

Hello @AndreiGhetu ,

Screen Shot 2023-03-27 at 18.14.16.png

 

You can find it like in my screenshot.

 

Let us know if you need anything else.

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Kudosi Product Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
AndreiGhetu
Tourist
53 0 3

I found it but I still can't find "Image navigation style", and I don't have any drop-down menu to chose between dots and lines.

AndreiGhetu_0-1679916133981.png

 

pacorisas
Shopify Partner
2 0 0

Hey Andrei! Did you find any solution? Im stuck in the same place...

LoungeWeAre
New Member
4 0 0

I'm also stuck in this. Please can somebody help?

sokolm333
Shopify Partner
4 0 2

I found the answer in this thread: https://community.shopify.com/c/shopify-design/how-can-i-replace-slide-numbers-with-dots-on-my-websi...

I'll duplicate the answer here:

 

1. Go to Store Online -> theme -> edit code


2. Assets/global.js


3. find class class SliderComponent after that replace with code below

 

 

class SliderComponent extends HTMLElement {
  constructor() {
    super();
    this.slider = this.querySelector('[id^="Slider-"]');
    this.sliderItems = this.querySelectorAll('[id^="Slide-"]');
    this.enableSliderLooping = false;
    this.currentPageElement = this.querySelector('.slider-counter--current');
    this.pageTotalElement = this.querySelector('.slider-counter--total');
    this.prevButton = this.querySelector('button[name="previous"]');
    this.nextButton = this.querySelector('button[name="next"]');

    if (!this.slider || !this.nextButton) return;

    this.initPages();
    const resizeObserver = new ResizeObserver(entries => this.initPages());
    resizeObserver.observe(this.slider);

    this.slider.addEventListener('scroll', this.update.bind(this));
    this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
    this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
    this.sliderControlLinksArray = Array.from(this.querySelectorAll('.slider-counter__link'));
    this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this)));
  }

  initPages() {
    this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
    if (this.sliderItemsToShow.length < 2) return;
    this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft;
    this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset);
    this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
    this.update();
  }

  resetPages() {
    this.sliderItems = this.querySelectorAll('[id^="Slide-"]');
    this.initPages();
  }

  update() {
    
    const previousPage = this.currentPage;
    this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1;

    if (this.currentPageElement && this.pageTotalElement) {
      this.currentPageElement.textContent = this.currentPage;
      this.pageTotalElement.textContent = this.totalPages;
    }

    if (this.currentPage != previousPage) {
      this.dispatchEvent(new CustomEvent('slideChanged', { detail: {
        currentPage: this.currentPage,
        currentElement: this.sliderItemsToShow[this.currentPage - 1]
      }}));
    }

    if (this.enableSliderLooping) return;

    if (this.isSlideVisible(this.sliderItemsToShow[0]) && this.slider.scrollLeft === 0) {
      this.prevButton.setAttribute('disabled', 'disabled');
    } else {
      this.prevButton.removeAttribute('disabled');
    }

    if (this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1])) {
      this.nextButton.setAttribute('disabled', 'disabled');
    } else {
      this.nextButton.removeAttribute('disabled');
    }
    this.sliderControlButtons = this.querySelectorAll('.slider-counter__link');

    if (!this.sliderControlButtons.length) return;

    this.sliderControlButtons.forEach(link => {
      link.classList.remove('slider-counter__link--active');
      link.removeAttribute('aria-current');
    });
    this.sliderControlButtons[this.currentPage - 1].classList.add('slider-counter__link--active');
    this.sliderControlButtons[this.currentPage - 1].setAttribute('aria-current', true);
  }

  isSlideVisible(element, offset = 0) {
    const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset;
    return (element.offsetLeft + element.clientWidth) <= lastVisibleSlide && element.offsetLeft >= this.slider.scrollLeft;
  }

  onButtonClick(event) {
    event.preventDefault();
    const step = event.currentTarget.dataset.step || 1;
    this.slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (step * this.sliderItemOffset) : this.slider.scrollLeft - (step * this.sliderItemOffset);
    this.slider.scrollTo({
      left: this.slideScrollPosition
    });
  }
  linkToSlide(event) {
    event.preventDefault();
    const slideScrollPosition = this.slider.scrollLeft + this.sliderItemOffset * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
    this.slider.scrollTo({
      left: slideScrollPosition
    });
  }
}

 

 

4. Sections/main-product.liquid


5. find code below

 

 

<div class="slider-counter caption">
  <span class="slider-counter--current">1</span>
  <span aria-hidden="true"> / </span>
  <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
  <span class="slider-counter--total">{{ media_count }}</span>
</div>

 

 

6. Replace code of step 5 with code below

 

 

<div class="slider-counter caption">
  <div class="slideshow__control-wrapper">
    {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
    {% if section.settings.hide_variants and variant_images contains featured_media.src %}
      <button class="slider-counter__link slider-counter__link--dots link"  aria-controls="Slider-{{ section.id }}">
        <span class="dot"></span>
      </button>
    {% endif %}
     
    {%- for media in product.media -%}
      {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
        {% if section.settings.hide_variants and variant_images contains media.src %}
        {% else %}
          <button class="slider-counter__link slider-counter__link--dots link" aria-label="Load {{ forloop.index }} of {{ forloop.length }}" aria-controls="Slider-{{ section.id }}">
            <span class="dot"></span>
          </button>
        {%- endif -%}
     {%- endunless -%}
    {%- endfor -%}
  </div>
</div>