How to create a multicolumn section with popup image and text?

Sohan2198
Tourist
33 0 0

Hello, 
I want to create a section like multicolumn. In this section when someone clicks on the image it shows a click pop-like image with a text section.

Please check & resolve the same

Best Regard

Sohan

Shopify_
Replies 4 (4)

deepaksharma
Shopify Partner
448 63 93

Hi there @Sohan2198 

 

Hi there can you elaborate in detail what else do you need, also if there is any website for reference it will help me create your custom more quickly.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Sohan2198
Tourist
33 0 0

Hello @deepaksharma,

Sohan2198_0-1709897356717.png

On clicking the image I need that popup  https://codepen.io/Idered/pen/DdeoeW
In each popup generate different content


 

Shopify_
Sohan2198
Tourist
33 0 0

Hello @deepaksharma ,

 

Any updates

Shopify_

Sohan2198
Tourist
33 0 0

Hello 
I try and write a code for the  section but I facing issue when need one more image column 

 <style>
/* [Object] Modal
 * =============================== */
 .modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 50%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
  .photo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(89px, 2fr));
    grid-gap: 10px;
    column-gap: 99px;
}
}


/* Other
 * =============================== */
.photo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 10px; /* Adjust gap between elements as needed */
  }
.btn {
  cursor: pointer;
  background: #27ae60;
  display: inline-block;
  color: #fff;
  border-radius: 3px;
}

.btn:hover,
.btn:focus {
  background: #2ecc71;
}

.btn:active {
  background: #27ae60;
  box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
}

.btn--blue {
  background: #2980b9;
}

.btn--blue:hover,
.btn--blue:focus {
  background: #3498db;
}

.btn--blue:active {
  background: #2980b9;
}

 img {
  max-width: 300px;
  height: auto;
  float: left;
  margin: 0 0 1em 0;
}
.text {
  width: 49% !important;
  /* padding-left: 100px; */
  float: right;
}
.im img {
  max-width: 49%;
  height: auto;
  float: left;
  margin: 0 0em 1em 0;
}
@media screen (min-width:600px){
.multicolumn.container {
    padding: 7rem 10rem;
}
}
.title{
    text-align: center;
    font-size: xxx-large;
}
 </style>
<div class="multicolumn container">
  <h2 class="title">{{ 'meet our team' }}</h2>
  <div class="photo">
    <label  for="modal-1"><img class="btn" src="{{ section.settings.image_1_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_1_icon.alt }}"></label>
    <label  for="modal-2"><img class="btn btn--blue" src="{{ section.settings.image_2_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_2_icon.alt }}"></label>
    <label  for="modal-3"><img class="btn btn--blue" src="{{ section.settings.image_3_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_3_icon.alt }}"></label>
     <label  for="modal-4"><img class="btn" src="{{ section.settings.image_4_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_4_icon.alt }}"></label>
  </div>
</div>


<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label>
   <h2>{{ section.settings.model_1_heading }}</h2>
      <div class="im">
        <img src="{{ section.settings.model_1_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_1_icon.alt }}">
      </div>
      <div class="text">
   <p>{{ section.settings.model_1_description }}</p>
      </div>
  </div>
</div>

<input class="modal-state" id="modal-2" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-2"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-2"></label>
 <h2>{{ section.settings.model_2_heading }}</h2>
      <div class="im">
               <img src="{{ section.settings.model_2_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_2_icon.alt }}">

      </div>
      <div class="text">
   <p>{{ section.settings.model_2_description }}</p>
      </div>
  </div>
</div>
  <input class="modal-state" id="modal-3" type="checkbox" />
  <div class="modal">
    <label class="modal__bg" for="modal-3"></label>
    <div class="modal__inner">
      <label class="modal__close" for="modal-3"></label>
 <h2>{{ section.settings.model_3_heading }}</h2>
        <div class="im">
                     <img src="{{ section.settings.model_3_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_3_icon.alt }}">

        </div>
        <div class="text">
   <p>{{ section.settings.model_3_description }}</p>       
 </div>
    </div>
  </div>
  <input class="modal-state" id="modal-4"  />
  <div class="modal">
    <label class="modal__bg" for="modal-4"></label>
    <div class="modal__inner">
      <label class="modal__close" for="modal-4"></label>
 <h2>{{ section.settings.model_4_heading }}</h2>
        <div class="im">
                     <img src="{{ section.settings.model_4_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_4_icon.alt }}">

        </div>
        <div class="text">
   <p>{{ section.settings.model_4_description }}</p>       
 </div>
    </div>
  </div>

{% schema %}
{
  "name": "pop-up",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1_icon",
      "label": "image_1_icon"
    },
    {
      "type": "image_picker",
      "id": "image_2_icon",
      "label": "image_2_icon"
    },
    {
      "type": "image_picker",
      "id": "image_3_icon",
      "label": "image_3_icon"
    },
    {
      "type": "image_picker",
      "id": "image_4_icon",
      "label": "image_4_icon"
    },
 {
      "type": "image_picker",
      "id": "model_1_icon",
      "label": "model_1_icon"
    },
   {
      "type": "text",
      "id": "model_1_heading",
      "label": "model_1_heading",
      "default": "model_1_heading."
    },
    {
      "type": "textarea",
      "id": "model_1_description",
      "label": "model_1_description",
      "default": "model_1_description."
    },

{
      "type": "image_picker",
      "id": "model_2_icon",
      "label": "model_2_icon"
    },
   {
      "type": "text",
      "id": "model_2_heading",
      "label": "model_2_heading",
      "default": "model_2_heading."
    },
    {
      "type": "textarea",
      "id": "model_2_description",
      "label": "model_2_description",
      "default": "model_2_description."
    },
{
      "type": "image_picker",
      "id": "model_3_icon",
      "label": "model_3_icon"
    },
   {
      "type": "text",
      "id": "model_3_heading",
      "label": "model_3_heading",
      "default": "model_3_heading."
    },
    {
      "type": "textarea",
      "id": "model_3_description",
      "label": "model_3_description",
      "default": "model_3_description."
    }
    ,
{
      "type": "image_picker",
      "id": "model_4_icon",
      "label": "model_4_icon"
    },
   {
      "type": "text",
      "id": "model_4_heading",
      "label": "model_4_heading",
      "default": "model_4_heading."
    },
    {
      "type": "textarea",
      "id": "model_4_description",
      "label": "model_4_description",
      "default": "model_4_description."
    }

  ],
 
  "presets": [
    {
      "name": "pop-up"
}
]
}
{% endschema %}

 please check 

Best 
sohan

Shopify_