The Podcast
Show Links
- Code for Split Method
- Show More / Less Solution
- Shopify Cheat Sheet
- Chrome Developer Tools Videos
- Shopify Forums
- Hiring a Shopify Expert podcast episode
Help the Podcast
Transcript
Hey Scott Austin here.
In this episode I'm going to continue what I was doing in the previous episode, which is walking you through some basic code edits that you can do to your theme. These simpler edits can help teach you how to edit your theme code. Doing these simpler edits will help you better understand some of the concepts in Liquid and HTML code and improve your confidence in your ability to make more complex theme edits down the road.
I'm also going to continue using examples of editing the collection pages. I think collection pages are very important in a Shopify store. They are the main decision making pages in your shopping experience. In the last episode I talked about how to replace the product title with a product short title using metafields and editing your theme's liquid code.
In this episode, I'm going to cover three different edits that affect the way the collection description is displayed on the collection page.
- The first edit is going to be just moving the whole collection description to be below the product grid instead of above the product grid. Most themes have the description at the top of the page by default. This will allow you to have longer collection descriptions and still have the customers able to quickly see products on the page without having to scroll.
- The second edit will be to split the product description into two. The first piece will stay in its default theme position above the product grid. The second piece will go towards the bottom of the collection page below the product grid. This way, you can provide important content at the top before customers get to see products while allowing less important content to be seen after the product grid.
- Now the third edit is going to be a more involved process because it includes JavaScript. This edit will create a Show More/Show Less toggle that shows up if the collection description is long. So if the collection description is long, only some of the text will show with a link that says show more. When the customer clicks on the show more link, the text will expand to show the full collection description. Below the full collection description, a Show Less link will appear. When clicked, the show less link brings the content back to the original shortened display.
Before I dig into the technical edits, let's discuss why we would want to alter the display of content on collection pages.
First, for many stores, collection pages are important pages for SEO. Collections cover tail keywords phrases like 'blue high-top sneakers for men' or 'DSLR cameras under $1000'. And we know that for SEO purposes we should have a certain amount of text to support the targeted keyword phrase. Now a little side-note here. A serious SEO campaign is going to invest in a lot of text content and place that in pages and articles. In other words, a serious SEO campaign won't rely on just collection pages for rankings.
Now, back to our reasons for changing the display of the description text on the collection page. The second reason is that a lot of text at the top of a collection page can hurt our conversion. A long collection description can move the product grid down below the fold. So that customers may not realize that the page contains products that they can choose from. This problem is even bigger on mobile where the screen size is smaller.
So, all three of these solutions reduce or eliminate the amount of text that is displayed above the product grid so that customers can quickly see the products on the page.
Let's dig into the first solution, which is the easiest one to implement. For this solution, all we are going to do is move the display of the collection description from above the product grid to below the product grid. To make this change, we need to know what Shopify entity to look for in the theme code. To do that, go to the Shopify Cheat Sheet, which I'll link to in the show notes. On the Cheat Sheet, you'll see the top level Shopify objects in blue. Now you have to find the object for the collections. And intuitively, collection is the Shopify object for collections. Now the next step can sometimes be a little trickier. We need to determine what element under the Collection object is used to store the collection content. So as you look at the Collection object in the Cheat Sheet, you'll see the elements. The first two are collection.all_products_count and collection.all_types. You need to look through the elements and figure out which one stores the collection content. And looking through the list, you will be able to determine that we're looking for collection.description. Now sometimes it is not so clear which element is the right one, so in those cases you can click on the element in the Cheat Sheet to see an explanation of the element. And there's also a Learn More link to more documentation from Shopify on the element. So, by looking at the cheat sheet, we were able to determine that we're going to be looking for collection.description in the theme code.
So, let's go to the theme code and now find that text. We access the theme code by going to the Shopify Admin, then Online Store, then Themes, and selecting the Edit Code option under Actions in either the live theme or an offline theme we are using for development purposes. What file we need to edit can be different for each theme. This is where we have to use our common sense and do some detective work. We start in the template folder and find the template file for collections. For most themes, it is going to be called collection.liquid. But when you look in that file, you'll see there's not much a text and a search for 'collection.description' will probably show that the text string is not in there. In that case, we need to keep looking in the files that this template calls upon. The liquid commands that call other files are either section or include or render. In one store that I'm looking at right now, the collection.liquid is calling the section 'collection-template' while in another theme collection.description is referenced in the collection.liquid template file. So in your theme, find the file that has the code that calls for the collection.description element. And to be very sure that you've found the right code, the element you are looking for is going to be wrapped in double curly-braces. Double curly braces is Liquid's way of saying that a data element is being called. So we want to cut that element from the code. When you do, you may also want to cut some divs that may be used to wrap the collection description and are used by CSS to format the content. A div, which in code looks like < Less than symbol and D I V and > a Greater than symbol, is HTML code that divides up sections of the HTML page for formatting by CSS. A DIV also has a corresponding end DIV that has a forward slash in it. So if the only code within the DIV pair or sets of DIV pairs is the collection.description liquid code, then you should probably cut the divs too.
So now you've removed the collection.decription from the collection page. This is a good time to check that the proper code was cut. Test a few collection pages on your website to see if collections are still rendering properly without the code that you have removed. If you are working in an offline theme, you'll need to do this in preview mode. If the collection pages look good, we can move onto adding the code that we just cut into a place below the product grid.
Getting the placement right can be a little tricky. And that's because your collection page is made up of hundreds of those HTML DIVs that I mentioned. The cut code needs to be placed within the right DIV to render correctly. This usually takes a little detective work and some trial and error. You can use Chrome Dev Tools to visually see what part of the page each DIV is for. I've included a couple of links in the show notes to some videos tutorials on how to use Chrome Dev Tools. When you think you've identified the right location, go ahead and paste the collection description code there. Then test it on the front-end of your store. Ensure the content is rendering where you want it on the page. If its not, you may need to change where the code is inserted or adjust the CSS. If you've haven't edited HTML and CSS before, this part may take you time to figure out as there's quite a learning curve here. I mention that so that you don't get intimidated the first time you try this. Everyone else was just as confused the first time they edited HTML and CSS.
So let's move onto the next solution and that is splitting the collection description with some content above the product grid and some content below the product grid.
This starts with us editing the collection description in the Shopify Admin. We need to tell liquid, where we want to split the content and were going to do that with the HTML code for comments. In Shopify, the collection description is stored in HTML. In the Shopify Admin, you can look at the description and edit in HTML view. What we are going to do is place of line of HTML between the content for the top and bottom. That code is <!-- split -->. In HTML, code goes between the less than and greater than symbols. The exclamation point is HTML for comment. So whatever else is put in after the exclamation point - in this case the dashes and split - will be ignored by HTML. So putting this code in the middle of the collection description has no impact on what the customer sees. But what we are going to do is have Liquid find and use that comment code to divide the collection description in two.
For the top content, we'll replace the Liquid code for collection.description with some new code that I'll link to in the show notes. Here's what is going on with that new code. Collection.description will be augmented with two new elements that are separated by vertical pipes. In Liquid, we can manipulate an element like collection.description. The first step is divide the content up. We do that with the split function. In the Shopify Cheat Sheet, you'll find split under String Filter. Here's what the Cheat Sheet says about split "The split filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array. You can output different parts of an array using array filters." Now in our case, the substring is the HTML comment code that we added to the collection description that has the exclamation point and split. So liquid will find every instance of that in the description and break the content up. Once that is done, Liquid now shows the first section of the collection content. This is done with the filter 'first'. You can find first in the Shopify Cheat Sheet under Array filters. So to explain the steps again, the collection description string is divided into an array of strings where ever the appropriate HTML comment code is found. Then the first string in that array is shown.
Moving onto the bottom content. We need to go through the same process I described in the first solution to identify where in the collection code to put the description code so that its displays below the product grid. In there, we'll add 3 lines of code. The middle line of this code work very similar to the code for the top content. But we'll replace the first array filter with a last filter instead. So this way, the content intended for the bottom of the collection will be displayed here. One thing to note is that is possible to add the HTML comment code with the split more than once in the collection description. In that case, only the first and last sections would be shown. This middle line of code to display the last description content is wrapped in a Liquid if statement that looks for the HTML comment split code. That way, if we don't want content below a collection, no code or empty divs will appear. This will keep the rendering of the collection page smooth and free of formatting issues.
Lets move onto the last of our three solutions. That is the More/Less toggle of the content on the top of the collection page to show and hide the collection description. I've got a link in the show notes that explains the steps to update the theme and gives a starting point for the code. As always, that code will need to be adjusted for your theme. This solution is more complex than the first two. Like the first two, we're editing and creating HTML and Liquid. But this solution also requires JavaScript. And that's because the more/less solution requires user interaction. When the store visitor clicks on the Show More link, the page needs to respond. JavaScript is the code that will provide that interaction. Here's how to think about how Liquid, HTML and JavaScript come together:
- On the Shopify servers, the Liquid code is interpreted and compiled into HTML that gets sent by the Shopify server to the store visitor's browser.
- In the browser, the HTML and CSS is read and interpreted to display the page. There is no Liquid being processed by the browser. Liquid only existed on the Shopify server.
- Once the page's HTML is rendered, any interactivity is driven by the JavaScript. HTML is static or fixed in the browser. JavaScript is dynamic and can respond to user inputs like clicking the Show More link.
Back to our Show More solution, here's what the liquid code is doing. It starts out with an if statement to determine if the collection description is long enough to warrant shortening. If it is long enough, two version of the description are created. A shortened version and the full version. Both versions are included on the page. The shortened version is displayed in the browser while the full version is hidden.
Then the JavaScript code will kick in if the Show More link is clicked. It will toggle the shortened description to be hidden while displaying the full description. Then, when the Show Less link is clicked, the JavaScript toggles back to showing the shortened description and hiding the full description.
So that's our three different ways of enhancing the default display of collection content in your theme. These are relatively simple edits, but they still require a lot of understanding of Liquid and HTML to carry out. So if you are a busy store owner and not technically inclined, I recommend you leave this kind to Shopify Experts. There's an entire eco-system of them out there. I'll include a link in the show notes to the episode that I did in the past on how to hire a Shopify Expert.
For those of you that want to learn how to edit your theme, go ahead and try these solutions. You should be able to work through it with the guidance I'm giving and the supporting documentation in the Show Notes. If you do get stuck, you can look for guidance on the Shopify Community forums, also linked to in the show notes.
Here's my advice when posting in the forums. Show as much of your work as possible. Show the URLs of the pages you are working on. Explain the steps that you have taken. Explain the problem. Explain the troubleshooting you have done. Show your code edits. State which theme you are using. In other words, provide as much information as possible. Doing so will drastically increase the likelihood of someone responding to your post. The forums are littered with unanswered posts where someone doesn't provide any information and expects the responder to all of the work. There are a ton of knowledgeable people who provide awesome support on the forums. Help them to help you by providing the complete picture.
That's it for this episode. If you made all of the way to the end of this one, then you are probably pretty geeky, which means you are my kind of listener.
Thanks for listening.