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

Solved

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

megeh
Shopify Partner
9 0 2

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:

 

PRoduct MEdia Modal Pop up Text after close icon.pngI 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

Accepted Solution (1)

GTLOfficial
Shopify Partner
276 52 53

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 4 (4)

GTLOfficial
Shopify Partner
276 52 53

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
megeh
Shopify Partner
9 0 2

Thanks so much - this worked absolutely perfectly!!! 

GTLOfficial
Shopify Partner
276 52 53

Thank you so much 🙂

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

BSS-TekLabs
Shopify Partner
635 177 207

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

step.png

- 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>

BSSTekLabs_1-1719226255301.png

 

- Here is the result you will achieve:

BSSTekLabs_0-1719226214822.png

 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency