Theme Settings: Bilingual Shopify Theme

Theme Settings

The theme settings below will allow you to customise your theme in great detail, and change it whenever you need, without touching code.

Adding Tabs

Horizontal Tabs

To set up tabs, you'll need to copy some code, and then replace the tab names & content with your own. Here's the code you need:

<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Tab 1 Title</a></li>
<li><a href="#pane2" data-toggle="tab">Tab 2 Title</a></li>
<li><a href="#pane3" data-toggle="tab">Tab 3 Title</a></li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<p>Tab 1 content goes here</p>
</div>
<div id="pane2" class="tab-pane">
<p>Tab 2 content goes here.</p>
</div>
<div id="pane3" class="tab-pane">
<p>Tab 3 content goes here.</p>
</div>
</div>
<!-- /.tab-content --></div>
<!-- /.tabbable -->

Vertical Tabs

Vertical Tabs

Here's the code you need:

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Vertical Tab 1</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Vertical tab 1 content goes here.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Vertical Tab 2 </a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Vertical Tab 2 content goes here.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Vertical Tab 3</a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Vertical Tab 3 content goes here.</div>
</div>
</div>
</div>

Open + Close sections (great for FAQs)

Use the same code as "Vertical Tabs" above.

How to Setup MailChimp

To enable MailChimp for your email subscriptions you need to select the MailChimp option in the Footer section of the Theme Settings for Newsletter System.

Next, you will need to login to your MailChimp account and copy the URL (form ID) for your account.  You now have the ability to have separate lists (newsletters) for each language.  So for example, you can have a newsletter for English and a newsletter for Spanish.

In your MailChimp account go to the Lists section and locate “For Your Website” > “Signup Form Embed Code”.

Copy the URL for the form action (look for <form action=”http://yourmailchimpurl”>).  Copy the link code between the “ “ and paste it in your Theme Settings in the box for ‘MailChimp Form Action URL’.

Click 'Save' to enable MailChimp for your email subscriptions.

Home Page Collections

You can display featured collections on the home page.  To do so you will first need to have collections created.

Go to Themes > Theme Settings > Home Page

You can feature up to 3 collections on the home page.  Select your collections from the drop down menu for featured collections 1 – 3. 

Check the box for ‘Show Collection Descriptions’ if you want to also display the description text.

You can also display featured products on the home page.  You will need to create a collection of the products you want to feature.

In the drop down menu next to 'Frontpage Product Collection' select the collection you want to feature.

Click ‘Save’ and your collection of featured products will now be featured on the home page.

Collection Templates (4-column)

By default the ShopifyNinjas Bilingual theme gives you 3-column product collections.  However, you may want to show 4-columns of products for a collection without the sidebar.  It's easy to set:

First, go to your Collections under Admin and click on one of your collections.  Now look for a section called 'Template' down near the bottom.

Select 'collection.4-columns' from the dropdown, click 'Save' and your collection will now display as 4 columns without the sidebar.

Currency Converter

Under General Settings in the Bilingual Theme is a section for turning on the currency converter.  This converter, when turned on, will automatically update pricing throughout your store depending on which currency is selected.

To use the currency converter, check the box to turn it on.  Next, enter in the currency code for each currency you want to support separated by commas.  You can look up the currency code on XE by clicking the link in the settings.

Then, select your default currency.  This is the currency you do business in.  It must be one included in the currencies list.

Lastly, you will need to tell the plugin where the money is (takes 30 seconds), according to the section titled "Editing the HTML for currency formatting" on this page: http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-show-multiple-currencies#currency-format

Done!  You are now ready to start using multiple currencies.

Attribution: Twitter Bootstrap

This theme is built on the wonderful Twitter Bootstrap framework.  Thanks to them for providing such a great platform to build on.
Designed and built with all the love in the world by @mdo and @fat.
Code licensed under Apache License v2.0, documentation under CC BY 3.0.