In this post, I'm going to explain how you can add some custom text below your items in any Collection Page specifically in Flex Theme by Out of the Sandbox. I will start with some explanation behind the idea, and I will talk you through simple principles to copy and amend existing collection Shopify template. Having said that, if youâre here looking for a step-by-step guide, simply jump to the end of this post. Why should you include any text below Collection page?As all SEO experts know, good content syndication is a key to promote your website on Google. This principle seems to be even more critical now after recent Google core algorithm update rolled out on May 4th, 2020 that caused quite a stir. Shopify has a high number of adjustments that allow you to optimise your content for better ranking results. And some themes like Flex enable you to design your store in no time with some additional customisations. However, there are still a few options that are essential to optimise your content that Flex is missing and one of them is the ability to add custom text underneath your items Collection. There is, of course, an option to include all your SEO tailored content with H2, H3 etc. elements in a standard page description, but you will end up with a massive block of text at the top of the page. This is not very UX friendly as your visitor is on your page most likely to view your products and not necessarily read a 1000 words description of the Collection. This is why the idea is to keep the top description short and sweet and move all the content that Google bots are after, below the collection items feed. Using a custom Theme template for CollectionInitially, I thought to hire somebody to code this option into Flex theme so it can be easily accessible from the Collections customisation page. After further thought, I realised that this custom code would somehow amend the collections input space (where you usually adjust your title, description and meta description). And then a custom code would have to be created to pull that information from the page and display it below items Collection feed. Although this is a more elegant solution, I have decided that since I only have several collection pages to update, a more straightforward solution can be put in place. And thatâs where the idea to use Shopify theme templates came from. Collection template structureEvery Collection in Flex Theme is put together from the following sections that you can adjust for your needs:
HOW TO ADD TEXT BELOW COLLECTION FEED IN SHOPIFY FLEX THEME?The general idea is to use the main Collection template (collection.liquid) and duplicate it for every custom Collection in which we want to include the custom text. We will then insert a code that includes the custom text below Sidebar section. You can use basic HTML elements like H1-H6, paragraph, bold text for example, but if you want to include unsorted list you will have to create custom CSS styling as well. You can do that by creating custom.scss style sheet in the Assets folder or amending styles.scss.liquid file (remember though to back up it first before you make permanent changes). Once the custom collection template is created, you can simply go to your Product > Collections page and change the Theme template to your custom template. You then repeat that action for every Collection in which you want to include the custom text below collection feed. HOW TO ADD ACCORDION BELOW COLLECTION FEED?If your content is long adding text with simple styling might not be enough. In such a case, hiding paragraphs in toggles is a perfect solution. Fortunately, somebody smarter than me already came up with the ideas, so let me simply send you to this article by Leighton Taylor âHow to add an FAQ accordion to your Shopify storeâ. The tutorial includes a super easy 5 step guide, including a quick video and a demo of the solution that you will be implementing on your site. All you need to do is tweak CSS a bit for your needs and voila. And before you ask, the image was added with basic img tag.
By combining the three solutions with adding text, image and toggle below Shopify Collection feed in Flex Theme, hereâs what I was able to achieve in one of our clientâs stores. Step-by-step guide on how to add unique text below every Collection Page in Shopify Flex theme:1. Log in to your shop and navigate to âOnline Storeâ in âSALES CHANNELSâ section listed on the right-hand side of the screen; 2. Hover over âActionsâ button (located in âLIVE THEMEâ section) and select âEdit Codeâ from the drop-down menu; 3. Locate âTemplatesâ folder click blue command âAdd new templateâ. In the pop-up window, select âcollectionâ after âCreate a new template forâ and give it a name (stick to short names or if you need to use more than one word use dash instead of space bar). In our example weâve chosen the name âcoffee-tablesâ; then click âCreate templateâ button; 4. Go to your newly created Collection tab and scroll down to the bottom and locate last two lines of code </section> </div> 5. Copy and paste the following âCustom codeâ and paste it just before those two lines and after âCollection sidebarâ section (in example below the code is pasted on line 58); then Save {% comment %} Collection manual description {% endcomment %} 6. From right-hand side panel go to âProductsâ > âCollectionsâ and look up your custom collection 7. Once the collection is loaded, change âCollection templateâ in âTHEME TEMPLATESâ section in the bottom right corner from default âcollectionâ to âcollection-your-collection-nameâ (in case of this example âcollection.coffee-tables); then Save 8. When you view your Collection page, you should now see âYour custom textâ below images. I hope this tutorial gave you a better understanding on how to create custom collections. If you have any questions on how to add text below collection page in Shopify Flex Theme, just drop me an email and I will do my best to help you out. This text was originally posted on Colorpeak Blog: How to add text below Collection in Shopify Flex Theme by Out of the Sandbox?
Comments
|
AuthorColorpeak is a web design and marketing agency. We specialise in combining effective web design with best SEO practices to promote businesses online. Archives
August 2020
CategoriesColorpeak YouTube About
About.me Hatena Profile Hatena Bookmark Pinboard Diigo Colorpeak Medium Colorpeak 500px Colorpeak Behance Disqus IFTTT Profile Colorpeak Yelp Quora Profile GitHub Profile Meetup Profile Pinterest Profile Etsy Profile Evernote G-Drive Google Profile OneDrive OneNote Nimbus Google Maps Google My Business Freepik Profile |