Intelligent Tabbed Navigation

Making sure your visitors don’t get lost in your site is an important role of a web publisher such as yourself. Any site on the web that pays attention to usability uses some variation of breadcrumbs or tabbed navigation. These are great ways to give your visitors a way back to dry land if they get discombobulated.

Though you may not know it, Vogue is already setup for tabbed navigation. You won’t need to write any CSS or XHTML, just some Liquid logic to light the tags up. By the way, this tutorial assumes you’re using the version of Vogue downloaded from this site. Also, the navigation tabs are displayed from your main-menu linklist.

So, here we go. Open theme.liquid and locate the following block of code…

<div id="navigation">
    <ul id="navigate">{% for link in linklists.main-menu.links %}
        <li><a href="{{ link.url }}">{{ link.title }}</a></li>{% endfor %}
    </ul>
</div>

The code to insert is not displaying properly here, possibly due to textile, so you’ll need to retype the code from the following screenshot…

Each time Shopify iterates through the forloop, our logic checks to see if the next link to be displayed is equal to the page we’re currently on. If that’s the case, we add class="current" to the link tag. I’ve already prepared the styling in the CSS documents.

This set of logic covers most all cases – index, collections, pages, blogs, cart and search. For the blog links, make sure you title the link with the exact name of the blog. All the other pages check URL’s so the links can have different names than the page title, collection title, etc.

That’s all! Watch those tab’s tell you where you are.

Product Tags

Displaying tags on the collection page is a piece of cake, but showing them on the product page always tends to baffle people. Thank goodness for the flexibility of Liquid though, which makes this quite an easy task.

All Products Collection
Before getting into the actual code, we need to create a collection that holds all the products. We can accomplish this by creating a smart collection titled All with conditions set to product price is greater than 0. Go ahead and do this now by clicking the “Collections” tab, then create a new smart collection.

The Tags
Now that we have a way to iterate through all the products, we can easily grab the tags for each product and dynamically show all products containing the specified tag(s) when clicked. Open product.liquid and locate the following code towards the end of the page…

Browse more {{ product.type | link_to_type }} or additional 
{{ product.vendor | link_to_vendor }} products.

This would be an ideal place to add the tags, so go ahead an replace the previous code with the following…

Browse more {{ product.type | link_to_type }}, additional 
{{ product.vendor | link_to_vendor }} products, or items tagged 
{% for tag in product.tags %}
<a href="/collections/all/{{ tag }}">{{ tag }}</a>{% unless forloop.last %}, 
{% endunless %}{% endfor %}.

Save and test it out. That’s it!

Continue Shopping...

While it’s great to add an item to the cart, then automatically go to the cart to see what you’ve put in it, sometimes you’d prefer to stay at the current product. Essentially, add the product and encourage the customer to continue shopping.

This post is not a full fledged tutorial about this topic as you can do all kinds of cool stuff with Javascript (AJAX), this article is intended to give you a quick and easy way to stay put after adding a product to the cart. Plus, it doesn’t rely on Javascript.

All we’re going to do is add a single line of code INSIDE the cart form in product.liquid. So, open product.liquid and locate the opening form tag…

<form action="/cart/add" method="post">

and add the following line immediately beneath it…

<input type="hidden" name="return_to" value="back" />

Save. If you watch the URL while adding the product to the cart, you’ll see it quickly add the product then return to the current product URL. Obviously, to really make this effective you’d want to notify the user that the product has been added and encourage them to continue shopping, but this is a start.

Min-Width Quirk

For those of you who applied Vogue from the Shopify admin, the is a quirk that you’ll DEFINITELY want to fix. If you downloaded Vogue from this site, the issue has already been resolved. At any rate, take a look at this horrid screenshot…

You’ll notice the backgrounds of the inner divisions don’t span the width of the browser when it’s less than the width of the container, which is 875 pixels. This is definitely not a good thing, but I believe it’s limited to Safari and Firefox. Fortunately, we can quickly fix this.

We simply need to add min-width: 875px; to #header, #mini-header, #layout and #footer in stylesheet.css, sea.css, and caramel.css…

Here’s an example of the header id in stylesheet.css…

#header {
    color: #fff;
    background: #9b0103 url(header.png) repeat-x center top;
    min-width: 875px;
}

Repeat that for each of the id’s mentioned above in all three stylesheets, if you intend to use either of the others at some point. Well, were good to go again. Sheesh!

Removing the Sidebar Indents

If you downloaded Vogue from this site, this article doesn’t apply to you. However, if you applied Vogue from within the Shopify admin, you may choose to make this simple modification.

I’ve had several questions about removing the indent of the lists in the sidebar. Fortunately, this is an easy modification.

Navigation & Blog Entries
Open your stylesheet (stylesheet.css, caramel.css and/or sea.css), locate the section called @group Global Styles, then highlight the following section…

ul, ol {
    margin-bottom: 10px;
}

ul li {
    margin-left: 25px;
    padding: 1px 0;
    list-style-type: disc;
    list-style-position: outside;
}

ol li {
    margin-left: 25px;
    padding: 1px 0;
    list-style-type: decimal;
    list-style-position: outside;
}

and replace with…

ul, ol {
    margin-bottom: 15px;
}

ul li {
    padding: 2px 0 2px 15px;
    list-style-type: disc;
    list-style-position: inside;
}

ol li {
    padding: 2px 0 2px 15px;
    list-style-type: decimal;
    list-style-position: inside;
}

Save. While we just took care of the navigation list and weblog entries, we still need to shift the Featured Product list to the left as well.

Featured Products
Still in your stylesheet, locate the following block of code…

ul#featuring li {
    padding: 4px 20px;
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
}

and change to…

ul#featuring li {
    padding: 4px 0;
    list-style-type: none;
    list-style-position: outside;
}

Save your stylesheet once again to update your theme with the new changes.

Complete
That should do it. Head over to your shop and if you did everything correctly, the sidebar contents should all be left aligned.

Grab the Feed

Up until now visitors have been subscribing to the XML feed that Shopify generates for this blog. For any blog in any Shopify store, by simply adding .xml to the blog name in the URL, an RSS feed is available (i.e. http://vogue.sofamade.com/blogs/weblog.xml).

I’ve switched this blog over to Feed Burner, so please update your feed reader to the new address...

Grab the feed while it’s hot! I’ll be posting several tutorials very soon.

Vogue Gets Easier!

As with any Shopify theme, you currently have to log into your account and apply it before being able to dive into the code. Well, I’ve just added a new section to this site where you can download Vogue without applying it to your shop.

Now, the downloadable version has some noticeable differences from Vogue in your admin. Why is this? Well, there are several customizations (custom image sizes, etc.) that prove to be a challenge with the version available directly from Shopify. After completing Vogue, the Shopify guys made a few changes to the XHTML/CSS to improve Vogue’s performance on Shopify. While the changes are excellent, some of them limit Vogue’s flexibility.

So, I since blended the code and am excited to announce Vogue 1.1. As previously mentioned, simply head to the download page to get your hands on the latest version. Once you’ve downloaded it, you can upload the ZIP file into your admin.

It’s important to note that this latest release does NOT include any customizations such as image logo, custom image sizes, color schemes, etc. You will need to make those changes AFTER you download the latest version, but they will be a breeze as all the tutorials on this site will guide you through the process.

As always, send an email to vogue [at] sofamade [dot] com to inform us of any issues. Vogue is provided free of charge, but also free of support. I try to answer as many questions as I can, but my time is limited. Refer to the Shopify Forums for general support. Thanks!

Javascript Disabled?

One thing that’s always kinda bugged me about the standard Shopify themes is the fact that they rely on a user having Javascript turned on. Well, at least the cart does.

While it’s true that the majority of users have Javascript enabled, I believe it’s designers/developers duty to make sure websites function properly if a user chooses to disable it. There are exceptions, but I strive to make the page work for everybody, then add the dynamic and interactive Javascript features later.

All that said, all the standard Shopify themes (including Vogue) use Javascript to remove a product from the cart. It’s bothered me, but I’ve never spent the time to figure out how to remove an item without it. Fortunately, Daniel of Shopify did!

While perusing through Daniel’s Showroom theme, I stumbled across his solution to remove a product from the cart with Javascript if it’s enabled and a standard XHTML LINK tag if it’s not. This is fantastic because we can easily apply this method to the Vogue theme and make it 100% accessible! Let’s do it…

First, login to your admin, click “Look & Feel”, then click cart.liquid. Once you’ve opened the cart template, locate the following block of code towards the bottom…

<a href="#" onclick="remove_item({{ item.variant.id }}); return false;">Remove</a>

And replace it with…

<a href="/cart/change/{{ item.variant.id }}?quantity=0" 
onclick="remove_item({{item.variant.id}}); return false;">Remove</a>

This little piece of code was the only thing holding Vogue back from accessibility to everybody. There is now NO dependence on Javascript, but still takes advantage of it if enabled!

Custom Image Sizes

The most common question I receive is, “How do I make my product images the same size as the Vogue demo site?” Fortunately, your shop can look just like this with a little creativity.

For these modifications to work correctly, you must be using Vogue downloaded from this site. When using Vogue applied from your Shopify admin, you will experience issues with the product page.

Before we get into the tutorial, it’s important to understand how Shopify handles product images. After an image is uploaded through the shop admin, Shopify stores it on a separate image server, which can then be accessed using Liquid within the theme templates. A few default sizes are available using a Liquid Filter for product images.

After some begging and pleading (not really), Tobi recently added original as a variant of the product_img_url filter. This variant is what makes custom image sizes possible, but does require a slight work-around. So, let’s do it already…

Product Images
We’ll need to create an image to act as your custom image that will display on index.liquid and collection.liquid. We’ll also create a custom AND full size image to display on product.liquid.

Using Photoshop or another photo editing tool, open your product image and…

1. Resize/Crop to 175×130 pixels, then save as title-feature.jpg.
2. Re-open original and resize/crop to 356×265 pixels, then save as title-product.jpg
3. Re-open original and resize/crop to 480×360 pixels, then save as title.jpg.

After these images have been created, upload them to your product images. Make sure title-feature.jpg is in the first position and title-product.jpg is in the second position. Any product in the third position or greater should be sized like title.jpg and the quantity is unlimited. Do this for all of your products.

Edit the Templates
Now that you have uploaded the appropriate product images, we need to edit a bit of code in the theme templates. First, open index.liquid and locate…

<img src="{{ product.images.first | product_img_url: 'small' }}" 
alt="{{ product.title }}" />

and change to…

<img src="{{ product.images.first | product_img_url: 'original' }}" 
alt="{{ product.title }}" />

Save, then open collection.liquid and make the same changes as above. Next, open product.liquid and locate…

{% for image in product.images %}{% if forloop.first %}
<div id="product-image">
    <a href="{{ image | product_img_url: 'original' }}" rel="lightbox[images]" 
    title="{{ product.title }}"><img src="{{ image | product_img_url: 'medium' }}" 
    alt="{{ product.title }}" /></a>
</div>

and replace with…

{% for image in product.images offset: 1 %}{% if forloop.first %}
<div id="product-image">
    <a href="{{ image | product_img_url: 'original' }}" rel="lightbox[images]" 
    title="{{ product.title }}"><img src="{{ image | product_img_url: 'original' }}" 
    alt="{{ product.title }}" /></a>
</div>

Complete
Go to your homepage and it should now look like this Vogue demo site. All done!

Upcoming Articles

Well, Vogue has been out for almost 2 weeks and the response has been terrific. Thank you all for the emails of praise!

As with any theme, you probably want to customize it and make it your own, right? Well, I’ve already shown you how to add a logo and switch the color palette of Vogue, but I’m sure you want more. Vogue is flexible and has the ability to be tweaked to your liking, so I’ll be posting some more tutorials in the upcoming weeks and months. Here’s some topics I’ll be covering…

• Adding a RSS 2.0 feed for products & integrating FeedBurner
• Adjust product image sizes without using XHTML/CSS
• Understanding how to loop through product images
• Highlight the “current” navigation tab (like this demo)
• Removing indent of the sidebar lists
• Adding a secondary navigation linklist to the sidebar
• Adding “Related Products” to the products page
• Including “Tags” on the products page
• Create a “Best Sellers” collection and display in sidebar
• Adding a Formspring contact form to your site
• Integrating Mojo Helpdesk to handle support requests

If there are other topics you’d like to see covered, please drop us an email to vogue [at] sofamade [dot] com. We are also about to launch a product that the Shopify community will be sure to love. Stay tuned for more details.

Adding a Logo

So, you want to give Vogue a personal look by adding your logo. Well, that’s not a difficult thing to do with a couple minor modifications. Let’s get started…

Step I – Create the Logo
Before we begin hacking away in the code, let’s make sure your logo is the proper dimensions and will properly align in the header. Right-click one of the following images that matches the color scheme you’re using, then save it to your desktop.

Once, you’ve downloaded the background image, open it with Photoshop or another image editing application. Add your logo over the background and save it in .png format, then upload it to your assets. Your logo should not be any larger than 240×65 pixels to avoid distortion to the header. Now, you’ll need to modify a bit of code.

Step II - Insert the Image
In your shop admin, click the “Look & Feel” tab from the main navigation. Then choose theme.liquid from the list of templates in the right column. Locate the following section of code…

<h1><a href="/" title="{{ shop.name }}">{{ shop.name }}</a></h1>

and replace it with…

<a href="/" title="{{ shop.name }}">
    {{ 'logo.png' | asset_url | img_tag: 'Shop Name' }}
</a>

Press the “Save Changes” button to apply the modifications you’ve made to theme.liquid. We’re almost finished, but there’s one last piece of code that needs updating.

Step III - Modify the Stylesheet
From the “Look & Feel” tab, choose stylesheet.css, caramel.css, or sea.css depending on which color scheme you’re using. Locate the following section of code…

#logo {
    line-height: 28px;
    width: 240px;
    padding-top: 24px;
    float: left;
}

and replace it with…

#logo {
    line-height: 28px;
    width: 240px;
    float: left;
}

Press the “Save Changes” button to apply the modifications you’ve made to the stylesheet. There you have it, a beautiful image logo in the header!

Switching Color Palettes

You may not know this, but Vogue has been packaged with three unique color schemes. Obviously, the red version you’re currently viewing, but there’s two more beauties that are waiting to be unleashed! Switching to either of the additional color schemes is quite easy to do.

If you’re a lover of chocolate, caramel, and red wine, maybe the color scheme Caramel is for you. Let’s go over the steps to load Caramel into Vogue.

1. Sign-in to your admin then press the “Look & Feel” tab.
2. Choose the theme.liquid file in the sidebar.
3. Locate {{ 'stylesheet.css' | asset_url | stylesheet_tag }} near the top.
4. Change to {{ 'caramel.css' | asset_url | stylesheet_tag }}.
5. Locate {{ 'seek.png' | asset_url }} further down the page.
6. Change to {{ 'seek-caramel.png' | asset_url }}.
7. Press the “Save Changes” button at the bottom of the page.
8. Choose the product.liquid file in the sidebar.
9. Locate {{ 'purchase.png' | asset_url }} near the bottom.
10. Change to {{ 'purchase-caramel.png' | asset_url }}.
11. Locate {{ 'checkout.png' | asset_url | img_tag: 'Checkout' }} below.
12. Change to {{ 'checkout-caramel.png' | asset_url | img_tag: 'Checkout' }}.
13. Press the “Save Changes” button at the bottom of the page.
14. Choose the cart.liquid file in the sidebar.
15. Locate {{ 'update.png' | asset_url }} near the bottom.
16. Change to {{ 'update-caramel.png' | asset_url }}.
17. Locate {{ 'checkout.png' | asset_url }} below.
18. Change to {{ 'checkout-caramel.png' | asset_url }}
19. Press the “Save Changes” button at the bottom of the page.

You’ll notice you simply changed the primary stylesheet and a few images. Now, go to your shop domain and check it out. Perhaps Caramel is not your thing, but Deep Sea is. Again, you’ll switch the stylesheet and a few images to load the new look into Vogue.

1. Sign-in to your admin then press the “Look & Feel” tab.
2. Choose the theme.liquid file in the sidebar.
3. Locate {{ 'stylesheet.css' | asset_url | stylesheet_tag }} near the top.
4. Change to {{ 'sea.css' | asset_url | stylesheet_tag }}.
5. Locate {{ 'seek.png' | asset_url }} further down the page.
6. Change to {{ 'seek-sea.png' | asset_url }}.
7. Locate {{ 'feed.png' | asset_url }} below.
8. Change to {{ 'feed-sea.png' | asset_url }}.
9. Press the “Save Changes” button at the bottom of the page.
10. Choose the product.liquid file in the sidebar.
11. Locate {{ 'purchase.png' | asset_url }} near the bottom.
12. Change to {{ 'purchase-sea.png' | asset_url }}.
13. Locate {{ 'checkout.png' | asset_url | img_tag: 'Checkout' }} below.
14. Change to {{ 'checkout-sea.png' | asset_url | img_tag: 'Checkout' }}.
15. Press the “Save Changes” button at the bottom of the page.
16. Choose the cart.liquid file in the sidebar.
17. Locate {{ 'update.png' | asset_url }} near the bottom.
18. Change to {{ 'update-sea.png' | asset_url }}.
19. Locate {{ 'checkout.png' | asset_url }} below.
20. Change to {{ 'checkout-sea.png' | asset_url }}
21. Press the “Save Changes” button at the bottom of the page.
22. Choose the blog.liquid file in the sidebar.
23. Locate {{ 'feed.png' | asset_url }} half way down.
24. Change to {{ 'feed-sea.png' | asset_url }}.
25. Press the “Save Changes” button at the bottom of the page.
26. Choose the index.liquid file in the sidebar.
27. Locate {{ 'feed.png' | asset_url }} half way down.
28. Change to {{ 'feed-sea.png' | asset_url }}.
29. Press the “Save Changes” button at the bottom of the page.
30. Choose the page.liquid file in the sidebar.
31. Locate {{ 'feed.png' | asset_url }} half way down.
32. Change to {{ 'feed-sea.png' | asset_url }}.
33. Press the “Save Changes” button at the bottom of the page.

Just like in the previous color switch, you simply replaced the stylesheet and a few images. Go to your store and refresh the browser window to check out Deep Sea. That’s all there is to switching the look within a few minutes. There’s one additional change that can be made as well.

If you would prefer a solid header as opposed to the diagonal stripes, images have been provided with your theme to make this quite easy. Depending on what color scheme your using, choose the primary stylesheet (stylesheet.css, caramel.css, or sea.css) from the sidebar. Locate the group titled ”@group Header” and add ”-flat” to the filename. It will look like this:

stylesheet.css:
background: #9b0103 url(header-flat.png) repeat-x center top;

caramel.css:
background: #984201 url(header-caramel-flat.png) repeat-x center top;

sea.css:
background: #42849b url(header-sea-flat.png) repeat-x center top;

And there you have it. Another easy customization to your shop! Perhaps I’ll add some other color schemes in the future…