Case Study: Themes and a Mobile UX Problem

Case Study: Themes and a Mobile UX Problem

Mobile Friendly is more than just squishing the theme down to the size of a mobile device. It’s also making the squish easy to understand. Theme writers, especially writers of free themes, often meet the minimum need to make Google consider the site mobile friendly, forgetting that people are the primary market.

Analyzing a Theme Feature

Mountain Press is a small publishing house in Missoula, Montana. Most of their books are non-fiction and cover many science and nature topics. The site technology is the Shopify online service. The theme is Venture.

The home page in Venture has rows that display a selection of different product Collections. Collections is Shopify’s name for categories. The image below shows a recent row of New Releases. Mountain Press releases new books several times a year.

The mobile version of the New Releases reduces the blocks to 5 and puts them into 2 rows and 2 columns. The upper left block contains the larger book image and the words overlapped. There are a number of principles and problems with this mobile layout.

Identifying the Issues

1. Both layouts assume the viewer will see the whole block, whether a horizontal block or the grid. This assumption can be seen because the first item is the title.
2. The first item serves as both a title and a book listing.
3. To serve as a row title, the image is larger, there is no book title or price, and the block title is superimposed over the image.
4. To serve as a book listing, the book image shows.
5. It’s not certain whether clicking the first item will go to a page about the book, like the others do, or to a collection page. The second is the case.
6. When the items are in a row, it’s more obvious to English readers that the first one is a row title. We are used to this format.
7. When the items are in a block, the first block looks out of place, because we are used to the 4 items in this configuration to be equal.
8. When the items are in a row, we can be fairly sure that if one book shows, they will all show.
9. When the items are in a grid, the second row may be below the screen, making the whole grid idea somewhat muddled.

possible Design Changes

We will look at 2 options.

1. Make the first item exactly like the others and put the title above the section.
2. Make the first item exactly like the others and super impose the title over the first item.

I think that the first option is the best. It uncouples the Collection title from the book listing.

Analyzing the existing code

The site and theme are existing code, so the first step is to figure out how the code is setup. We need to know whether there are HTML structural changes that need to be made or whether we can make the changes in CS.

There are several places we will look:

1. View Source in the browser
2. Firefox Inspector. Chrome has a similar tool.
3. The Shopify Dashboard

Looking at the HTML source

I have added comments to make the layers easier to follow

1. <div id=”shopify-section-1552088474958″ class=”shopify-section index-section”>
2. <div class=”page-width”>
3. <div class=”section-block”>
4. <div class=”grid grid–no-gutters grid–uniform collection”>
5. <div class=”grid__item small–one-half medium-up–one-fifth collection__cover”>
6. <a href=”/collections/new-releases” class=”collection-card” style=”background-image: url(//cdn.shopify.com/s/files/1/2470/3250/collections/9780878426911_480x480.jpg?v=1558737770);”>
7. <div class=”collection-card__meta”>
8. <p class=”h1 collection-card__title”>New Releases</p>
9. <p class=”collection-card__subtext”>View all</p>
10. </div><!– end collection-card__meta –>
11. </a>
12. </div><!– end grid__item –>
13. <div class=”grid__item small–one-half medium-up–one-fifth collection__card–first “>
14. <!– /snippets/product-card.liquid –>
15. <a href=”/collections/new-releases/products/roadside-geology-of-oklahoma” class=”product-card”>
16. <div class=”product-card__image-wrapper”>
17. <img src=”//cdn.shopify.com/s/files/1/2470/3250/products/RGOK_cover_480x480.jpg?v=1571863916″ alt=”Roadside Geology of Oklahoma” class=”product-card__image”>
18. </div><!– end product-card__image-wrapper –>
19. <div class=”product-card__info”>
20. <div class=”product-card__name”>Roadside Geology of Oklahoma</div>
21. <div class=”product-card__price”>
22. <span class=”visually-hidden”>Regular price</span>
23. $26
24. </div><!– end product-card__price –>
25. </div><!– end product-card__name –>
26. <div class=”product-card__overlay”>
27. <span class=”btn product-card__overlay-btn “>View</span>
28. </div><!– end product-card__overlay –>
29. </a>
30. </div><!– end product-card__info –>
31. … Additional books in row
32. </div><!– end grid-item –>
33. </div><!– end grid –>
34. </div><!– end section block –>
35. </div><!– end page width –>
36. </div><!– end shopify section –>

After finding this code, we need to consider what code makes the first book a title that goes to the Collection page from the second book that goes to an individual product page. Lines 5 and 13 contain the code that start the layers for the first two book listings. The code for both books starts with a class called grid-item. Note that the first book doesn’t have as many lines of code because it doesn’t have a book title or a price.

The book image on the first entry is a background image, while on the second image it’s an inserted image (with an <img>). The text over the image is in two lines:

1. <p class=”h1 collection-card__title”>New Releases</p>
2. <p class=”collection-card__subtext”>View all</p>

Can we move this code above the rest of the row? To do that, we will have to get into the files that create the theme.

Making the Changes

1. Log into the Shopify site.
2. Go to Online Store -> Themes -> Customize -> Theme Actions -> Edit Code. Shopify navigation is scattered, so you won’t find the whole path in the left menu. For Customize go to the right. For Theme  Actions go to the bottom of the left sidebar.
3. When the file panel opens up, there is a second left column that shows the files that make up the theme. The problem is, which file is making the row happen?
4. Every page starts with theme.liquid. This file creates the header and footer and calls the information file for whichever page it is.
5. You can check that each of the following files is part of the page by adding a Test. For example, I added the words “Test 1” to template.liquid, and it shows in the upper left hand corner of the page.
6. index.liquid starts the content of the home page. It doesn’t have much code, but when I add Test 2, you can see that the test is below the banner, which is in template.liquid.
7. It’s a little unclear where to go from here to get to the inside areas. collection.liquid? list-collections.liquid? collection-filters.liquid?
8. It turns out that featured-collections.liquid was a winner, at least for the first row.
9. The areas we want to change are controlled by the featured-products.liquid template file.
10. I was able to move the title above the books by moving Line 8 above Line 4.
11. Note that what you see in the View Source is different from what you see in the files in the Shopify dashboard. In the dashboard, Line 8 is in the 30s and looks like this:
    <p class=”h1 collection-card__title”>{{ collection.title }}</p>
    The same code is used to create both New Releases and Best Sellers. The {{collection.title}} pulls the correct title for each. these are called Liquid Tags. Sometimes, they have {% %}
12. After moving the code, there are only 4 images showing on the desktop and 3 on mobile.
13. Also, moving the <p> loses the link.
14. To get the link back, more code is moved to the top.
    <a href=”{{ collection.url }}”>
    <p class=”h1 collection-card__title”>{{ collection.title }}</p>
    </a>
15. Moving the link code makes a big gray box, an, so the reference to the CSS class needs to be removed.
16. With the critical parts moved, the title and the link, the rest of the code that made the larger title image can be removed.
17. Finally, the number of books showing needs to be increased by one to fill the space previously taken by the title. This is done in the active programming at the top of the page.
    Line 7: {% assign product_limit = rows | times: 6 | minus: 1 %} changed 5 to 6 for the desktop
    Line 23: {% assign product_index_hide_on_mobile = 5 %} changed the 4 to 5.
    Note that the % do not mean percent. They have a special meaning in the coding.
18. That should be it! Ready for proofing by the client.

Thanks to Mountain Press for permission to use their site for this case study!