Dawn Customisation - How to add text after the close icon on the Product Media Modal Popup

[megeh]

I'm using the Dawn theme. We have quite a few images in the product media gallery for each product. On desktop, it's not clear that the user can scroll down the product media modal popup to view all the product media.

We'd like to make it more clear by adding a bit of text saying 'SCROLL DOWN TO VIEW MORE IMAGES' to the product media modal popup's desktop view. We'd like this text to appear as vertical text right under / after the close icon. I have attached a screenshot of where we'd like this text:

I tried to code this in, but can't get the positioning right and would really appreciate if someone could provide the correct code for this.

This is our store url: https://arrange-studio-sa.myshopify.com/

Password: ohtsau

Thank you

[GTLOfficial · Accepted solution]

Hello @megeh 
here is the code you need to replace the code with the old code.
Go to Online Store ------------> Themes ----------------> (click 3 Dots) Edit code-------------> find this file in the Snippets section "product-media-modal.liquid" and replace the whole code with this modified code

{% comment %}
  Renders a product media modal. Also see 'product-media-gallery'

  Accepts:
  - product: {Object} Product liquid object
  - variant_images: {Array} Product images associated with a variant

  Usage:
  {% render 'product-media-modal' %}
{% endcomment %}

<product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
  <div
    class="product-media-modal__dialog color-{{ section.settings.color_scheme }} gradient"
    role="dialog"
    aria-label="{{ 'products.modal.label' | t }}"
    aria-modal="true"
    tabindex="-1"
  >
    <div class="button-text">
      <button
        id="ModalClose-{{ section.id }}"
        type="button"
        class="product-media-modal__toggle"
        aria-label="{{ 'accessibility.close' | t }}"
      >
        {% render 'icon-close' %}
      </button>

      <span class="close-Text" style="right: 4rem;padding: 1.2rem;position: fixed;top: 6rem;writing-mode: vertical-lr;"
        >SCROLL DOWN TO VIEW MORE IMAGES</span
      >
    </div>
    <div
      class="product-media-modal__content color-{{ section.settings.color_scheme }} gradient"
      role="document"
      aria-label="{{ 'products.modal.label' | t }}"
      tabindex="0"
    >
      {%- liquid
        if product.selected_or_first_available_variant.featured_media != null
          assign media = product.selected_or_first_available_variant.featured_media
          render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
        endif
      -%}

      {%- for media in product.media -%}
        {%- liquid
          if section.settings.hide_variants and variant_images contains media.src or variant_images contains media.id
            assign variant_image = true
          else
            assign variant_image = false
          endif

          unless media.id == product.selected_or_first_available_variant.featured_media.id
            render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
          endunless
        -%}
      {%- endfor -%}
    </div>
  </div>
</product-modal>

 
Please let me know
Thanks

[megeh]

Thanks so much - this worked absolutely perfectly!!! 

[GTLOfficial]

Thank you so much 🙂

[BSS-TekLabs]

- Here is the solution for you
- Please follow these steps:

 

- Then find the main-product.liquid file.
- Then add the following code at the end of the file and press 'Save' to save it.

<script>
document.querySelector(".product-media-modal__dialog").innerHTML+=`<span style="
    position: fixed;
    right: 5rem;
    top: 7.2rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 40px;
    line-height: 40px;
">
      SCROLL DOWN TO VIEW MORE IMAGES 
    </span>`
</script>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.