Minimal Theme - Want to create a Page that leads to

Solved
Tourist
13 2 0

Hello everyone, I want to create a Page that leads to some other Pages. So when you enter this main page, you can click on different Pictures with Title that takes you to those pages.

I have this page called Lesson Plans and linked these other pages, you can see it on the menu.

Capture.PNGBut I want those pages to be displayed on "Lesson Plans" page, as image with Title, just like collections look like.

Something like this:

Capture2.jpgThank you very much.

 

0 Likes
Shopify Partner
435 83 94

Hello 

You can create page like this using alternate template concept, but you have to do customization to achieve this.

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Tourist
13 2 0

Yes, my question is, how to do those modifications on the code. Maybe someone can help me with this.

0 Likes
Astronaut
1082 147 272

Check out this codepen I mocked up for you. You can probably directly copy and paste this and just change our the href attributes to fit the urls for your pages you want to link to, and swap out the src attributes with the urls for the pictures you want to use for each collection:

 

https://codepen.io/ninthony/pen/xxbPZRZ

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
13 2 0

Thanks a lot, I am almost there. Now it is looking like this:

Capture3.PNGCapture4.PNG

I could replace text and photos, and make them smaller. But I want them to be aligned differently, one besides the other one. And if possible, linking the picture to the page too.

 

0 Likes
Astronaut
1082 147 272

Copy the css from my codepen and put it in style tags above the rest of the code:

 

<style>
.other-pages__container {
  display: flex;
  text-align:center;
  box-sizing: border-box;
  font-family: sans-serif;
  font-weight: bold;
  flex-wrap: wrap;
}
.page-wrapper {
  width: 20%;
  padding: 0 20px;
  box-sizing: border-box;
}
.page-wrapper img {
  width:100%;
}

@media (max-width: 767px){
  .page-wrapper {
    width:50%;
  }
}
</style>
<div class="other-pages__container">
  <div class="page-wrapper">
    <div class="page-thumbnail">
      <img src="https://newsroom.ibm.com/image/security%2Bthumbnail%2B400x400.png">
    </div>
    <div class="page-title">
      <a href="/pages/viro-bots">Viro Bots</a>
    </div>
  </div>
    <div class="page-wrapper">
    <div class="page-thumbnail">
      <img src="https://pbs.twimg.com/profile_images/446356636710363136/OYIaJ1KK.png">
    </div>
    <div class="page-title">
      <a href="/pages/green-screen">Green Screen</a>
    </div>
  </div>
    <div class="page-wrapper">
    <div class="page-thumbnail">
      <img src="http://www.commongroundgroup.net/wp-content/uploads/2011/10/earth-from-space-western-400x400.jpg">
    </div>
    <div class="page-title">
      <a href="/pages/electric-car">Electric Car</a>
    </div>
  </div>
    <div class="page-wrapper">
    <div class="page-thumbnail">
      <img src="https://www.jotform.com/resources/assets/icon/min/jotform-icon-orange-400x400.png">
    </div>
    <div class="page-title">
      <a href="/pages/rubberband-vehicles">Rubberband Vehicles</a>
    </div>
  </div>
      <div class="page-wrapper">
    <div class="page-thumbnail">
      <img src="https://safespaceradio.com/wp-content/uploads/Apologies-400x400.jpg">
    </div>
    <div class="page-title">
      <a href="/pages/electric-boats">Electric Boats</a>
    </div>
  </div>
</div>
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes

Success.

Astronaut
1082 147 272

For the linking of the image, just wrap the anchor tag around the image tag as well

 

<a href="pages/electric-boats">
  <img src="path-to-your-image.jpg">
</a>
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
13 2 0

Oh man, you are the one. Thanks a lot!!!

0 Likes
Astronaut
1082 147 272

No problem, glad it helped.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like