Add custom tabs to your Pages

To add tabs to your Pages in the theme, you can use this modification.

Example:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1

Add tabs script code

Javascript code to add:

/* -- page tabs javascript -- */
 $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });
/* - end tabs - */

Where do I add the Javascript code?

Use this link to learn where exactly to add this code snippet:

Where to add your Javascript code

2

Add style code

CSS style code to use:

/* -- page tabs styles -- */
.template-page ul.tabs {
    border-bottom: 1px solid #d7d7d7;
    display: block;
    margin: 0 0 20px;
    padding: 0;
}

.template-page ul.tabs li {
    display: block;
    float: left;
    height: 30px;
    margin-bottom: 0;
    margin: 0rem 2.5rem 0rem 0rem;  
    padding: 0;
    width: auto;
}

.template-page ul.tabs li a {
    display: block;
    font-size: 14px;
    margin: 0;
    text-decoration: none;
    width: auto;
    
}

.template-page ul.tabs li a.active {

    border-bottom: 2px solid #d7d7d7;
    padding-bottom: 6px;
}

.template-page ul.tabs li:first-child a.active {
    margin-left: 0;
}

.template-page ul.tabs:before,ul.tabs:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

.template-page ul.tabs:after {
    clear: both;
}

/* - end page tabs - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

3

Add HTML to your page - Tab content

Here's the HTML code you'll add to your page. Open the Page Editor:

https://shopify.com/admin/pages

Use the code view icon to switch to code mode:

You'll notice the other icons in the toolbar will be hidden when you switch to code mode. 

Add the following example HTML to your page:

<ul class="tabs">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1">
<p>It was a wild, black night of howling storm, the night in which I was born on the foaming bosom of the broad Atlantic Ocean. My father was a sea-captain; my grandfather was a sea-captain; my great-grandfather had been a marine. Nobody could tell positively what occupation his father had followed; but my dear mother used to assert that he had been a midshipman, whose grandfather, on the mother’s side, had been an admiral in the royal navy.</p>
<p>At any rate we knew that, as far back as our family could be traced, it had been intimately connected with the great watery waste. Indeed this was the case on both sides of the house; for my mother always went to sea with my father on his long voyages, and so spent the greater part of her life upon the water.</p>
</div>
<div id="tab-2"><img src="https://cdn.shopify.com/s/files/1/2018/8867/files/womens_1800x_6cec7860-6287-474a-b52c-ce92eb39bb4d.jpg?5647158683541354922" /></div>
<div id="tab-3"><img src="https://cdn.shopify.com/s/files/1/2018/8867/files/bob-daamen-49105.jpg?5647158683541354922" /></div>

Let's breakdown the HTML code:

1

The first section are your tab titles. Use that exact format to create/remove each tab title. The links like #tab-1, #tab-2, #tab-3 must be different and will have to match the content in the next section.

2

This section is your tab content. Each content section must start with a div and must be closed (see arrows). The id must match the title href from the first section. You can add as much content as you like within the div. That will all be contained in the tab. 

The second and third tabs are just showing images:

They still start and close with the div matching the title. The content inside is just an image reference. 

Customize your tab titles and tab content using this sample code format. If the tabs aren't working, go back and look at the HTML to make sure the code isn't broken from the example. 

After you're done, you can switch back to regular mode:

Tip: Use the HTML code mode to make changes and add/remove content. When you work in the Rich Text Editor, there might be added styles or code which can break the tabs. 

Still need help? Contact Us Contact Us