Click to PopUp Product Selection Window

Highlighted
New Member
2 0 0

Hello to the Shopify community,

This is my first post in the forums, so I am relatively new with the technology.

My question is about PopUps upon clicking, for example I have a button which after clicked, rather than redirecting you to a new page, it opens the page itself (or a very similar separately-made page). Not only that, but is it possible to make it like an interactive pop up, where you have to product options, and when you select either, you still remain on the same page with the same pop-up, just different information (and an Add to Cart button for each product). All I have seen so far is mailing list popups or very simple ones, I want to make mine interactive.

And lastly, certainly not necessary, but very user-friendly would be to have a transition animation to the pop-up, rather than a regular static one. I know this might be too much, so disregarding it is perfectly fine.

https://ibb.co/gPeP9b

https://ibb.co/f1Gt2w

Something like this. 

Thank you,
Plamen

 

0 Likes
Highlighted
New Member
2 0 0

I am wondering the same thing. I am having trouble with calling only that specific products details. The popup works but is displaying all the products. Below is my test site

https://huskilla-com.myshopify.com

and here is the code I am using, I am not using a theme I am coding from scratch on the bootstrap framework.

Thanks in advance! 

<div class="container">
	<div class="row"> 
      	{% assign page = pages.frontpage %}
    	{{ page.content }}
    	{% assign collection = collections.frontpage %}
    	{% for product in collection.products %}
		<div class="col-md-4">
			<div class="thumbnail">
				<img src="{{ product.featured_image | product_img_url: 'medium' }}" style="width:100%;" alt="{{ product.title | escape }}" />
       			<div class="caption">
          			<h4>{{ product.title }}</h4>
         			 <p>{{ product.description }}</p>
       			 </div>
        		<div class="ratings">
         			<button role='button' type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      View
    </button>
        		</div>
			</div>
   		</div>
    	{% else %}
    	<p>You have no products in your Frontpage collection. <a href="http://www.shopify.com/admin/custom_collections">Add some.</a></p>
    	{% endfor %} 
	</div>


    <!-- Button trigger modal
    <button role='button' type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Product Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div style="border:none;" class="modal-content">
          <div style="border:none;" class="modal-header">
              <h5 class="modal-title"></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
           </div>
          <div class="modal-body">
            <div class="container col-md-12">
              {% for product in collection.products %}
                <div class="row">
                    <div class="col-md-6"><img style="width:100%;" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" ></div>
                  <div class="col-md-6">
                    <h1>{{ product.title }}</h1>
                    <p style="color:#f2d63a;"><i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
					<i class="fa fa-star" aria-hidden="true"></i>
					<i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-o" aria-hidden="true"></i> <a href="">597 customer reviews</a></p>
                    <p>{{ product.description }}</p>
                  <a target="blank" href="https://www.amazon.com/gp/product/B000BU7U9I/ref=s9u_simh_gw_i1?ie=UTF8&fpl=fresh&pd_rd_i=B000BU7U9I..." class="btn btn-primary">Buy Now</a>
                  </div>
                   
                     </div>
              {% else %}
    	<p>You have no products in your Frontpage collection. <a href="http://www.shopify.com/admin/custom_collections">Add some.</a></p>
    	{% endfor %}
                 </div>
          </div>
      </div>
        <div style="border:none; background-color:#eee;" class="modal-content">
          <div class="modal-body">
            <div class="container col-md-12">
                <h4 style="text-align:center;">Related Items</h4></div>
                <div class="row">
                  <div class="col-md-12">
                  </div>
                 </div>
        </div>
      </div>
        <div style="border:none; background-color:#0087ff;" class="modal-content">
          <div class="modal-body">
            <div style="text-align:center;color:#fff;" class="container col-md-12">
                <h4 style="text-align:center;color:#fff;">Related Items</h4><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" data-dismiss="modal">Join Now</button></div>
                <div class="row">
                  <div class="col-md-12">
                  </div>
                 </div>
        </div>
      </div>
    </div>
      
</div>
<!-- End Product Modal -->

    <!-- Login Modal -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-md" role="document">
        <div style="border:none;" class="modal-content">
          <div style="border:none;" class="modal-header">
              <h5 class="modal-title"></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
           </div>
          <div class="modal-body">
            <div class="container col-md-12">
                <div class="row">
                  <a target="blank" href="https://www.amazon.com/gp/product/B000BU7U9I/ref=s9u_simh_gw_i1?ie=UTF8&fpl=fresh&pd_rd_i=B000BU7U9I..." class="btn btn-primary">Buy Now</a>
                  </div>
                     </div>
                 </div>
        </div>
      </div>
  
    </div>
  <!--End Login Modal -->

 

0 Likes
Highlighted
New Member
3 0 0

Hello, I am new to Shopify please let me know where to insert this code as I need a pop-up window to b opened while clicking on the quick view button and to select product from there in the popup window

0 Likes