Add tab anywhere on shopify theme using only HTML & CSS

You can add tab anywhere on shopify theme using only HTML & CSS. No need to use Jquery and Javascript! This code sample tested on debut shopify theme. If you are using another theme then you need to follow there grid framework.

 <div class="page-width">
  <div class="grid">
   <div class="grid__item medium-up--one-whole">
     <div class="tab-frame">
      <input type="radio" checked name="tab" id="tab1">
      <label for="tab1">REAL RESULTS</label>

      <input type="radio" name="tab" id="tab2">
      <label for="tab2">BENEFITS</label>

      <input type="radio" name="tab" id="tab3">
      <label for="tab3">HOW TO USE</label>

      <div class="tab mz-img-tab">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
       <div class="tab">
         <h4>STRENGTHENING</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

         <h4>DETOX</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

         <h4>CLEANSING</h4>
         <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
       </div>
      <div class="tab">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>
  </div>
</div>
</div>

<style>

div.tab-frame input{
  display:none;
}
div.tab-frame label{
  display:block;
  float:left;
  padding:5px 35px;
  cursor:pointer;
  text-align: center;
}
div.tab-frame input:checked + label{
  background:black;
  color:white;
  cursor:default
}
div.tab-frame div.tab{
  display:none;
  padding: 30px;
  clear:left
}

div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3){
  display:block;

}
div.tab-frame {
    background: #FBFBFB;
      padding: 30px;
}

.mz-img-tab {
    padding: 30px 0 ! important;
}
</style>

 

And that’s it!

If you have any trouble, feel free to leave a comment below and I’ll do my best to help.
out of sandbox theme
pixel union shopify theme
themeforest free shopify theme
bold shopify apps

1 comment

  • I applied this code and it looks great. How do you adjust the grid layout for another theme?

    Stephanie

Leave a comment

Please note, comments must be approved before they are published