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
Today I am reviewing Divi Pixel plugin from Octolab OU. In short this a a tool that will speed up your design process in you're using Divi from Elegant Themes. This is not an affiliate review; however, I have been granted access to the early version of the plugin for free for the review purposes. Ok, so without any further ado, here are my thoughts upon taking Divi Pixel for a spin. Divi Pixel is one of those tools compatible with Divi Builder by Elegant Themes that makes your life easier when it comes to customising basic settings. In an ideal world, Divi should have implemented them a long time ago. Furthermore, Divi Pixel offers some advanced styling solutions that can only be achieved with custom CSS. I also think this plugin will save you some money since there is no need to purchase separate plugins to improve or speed up your design process. It combines many great solutions that are available as different plugins in one. The most important thing, however, is that if you do not need some of the options that Divi Pixel offers, then you can disable them and no additional scripts will load on your w website to slow it down. User Experience with Divi PixelUpon Divi Pixel plugin installation, you will be able to access all its features through the left-hand side panel (Dashboard > Divi > Divi Pixel). Right of the bat, I can see that the developers knew exactly what UX is. That is how to design with user experience in mind. I would be surprised if anyone ever had to skim through the documentation file as the set up of the plugin is pretty much self-explanatory. The design is great for the eye but most importantly, very clean and straightforward. You can jump onto customisations right away. Divi Pixel OptionsWhen you open Divi Pixel panel, you will see that the plugin has seven main features or control settings if you like:
General Settings in Divi PixelGeneral settings take care of some basic items that allow you to make your website âyoursâ or in other words, apply some branding in a sense. It also has some options that I am only guessing did not fit into any other category. However, they remain handy none the less. In terms of mentioned âpersonalisationâ, you can adjust the login page, add a page preloader, custom browser scrollbar, change logo on scroll and zoom on it as well as customise back to top button. If you use Google API for maps instead of embedding them, you will appreciate an option to add Custom Map Marker. There are several options to customise your footer and one that allows you to upload SVG files which are blocked by WordPress by default. Blog adjustmentsThe Blog adjustments in Divi Pixel are a bit of a hit and miss for me. The reason being some of the options are already available in Divi Theme builder. For example, removal of sidebar or adjustment of Archive pages. But where the Divi Pixel Blog adjustments stand out is the Customisation of comments section that currently requires custom CSS, so it makes for a great addition. It gives you some additional customisations for Archive pages as well so if you want your blog related pages to look a bit fancier than the standard, this functionality will help. Social MediaSocial Media section will come in handy for those of you who are not graphic pros, and you would like to customise social media icons. Divi Pixel gives you more options when it comes to where you can display social media icons â be it the header, footer or mobile menu. It also gives you control over individual icons, so that you can choose the display location for them separately. Mobile SettingsDivi Pixel Mobile adjustments allow you to modify some essential mobile view settings, including making it full screen (make sure to Enable Custom Mobile menu Style first, so you donât miss it ;). Yes, some options are available in Theme Builder already, like fixed position and swapping logo in mobile view. But the plugin gives you an opportunity to change breakpoint for mobile menu, collapse submenus on mobile and animate hamburger menu icon among others. Mobile menu settings are one of the best features of Divi Pixel plugin. ModulesWhere Divi Pixel stands out is the Modules section which adds 17 custom modules to the Divi Builder. You can, of course, review all of them directly on their website, so let me just mention my picks: before and after effect, tilt image, typing effect, masonry gallery, and my absolute favourite image hot spot and floating images. IMAGE HOT SPOT BY DIVI PIXELDivi Pixel is not the first plugin to have this feature, but I have yet to see one that does it so well. We once reviewed Vistag tool that allows you to tag any element on an image and display more info upon hovering over selected points, but the company closed in February 2020. So, I was pleased to see that the idea was implemented by somebody else. I would say the room for improvement is in expanding options for tablet and mobile view, but with the right mindset, you can make it work. And I hear further enhancements are in the development stage. FLOATING IMAGESYet another feature that will make your website stand out among others. Floating images allows for a subtle animation of your images. In fact, the subtle animations trend started back in 2019, and it continues to be quite popular in 2020. A great feature to present your team photos, locations on a map or product highlights. Layout InjectorDivi Pixel allows you to inject any saved section in Divi Library where by default it was not possible. For example, before or after the navigation section, footer or on specific pages only. There are also several options for blog pages. SettingsIf you decide to return to default settings on your website, you can reset them in plugin Settings. Do not worry if you ever want to retrieve them, as Divi Pixel plugin allows you to import and export said settings. And if you would like to remain up to date with future developments, you can enable Beta Updates although you probably donât want to use that option on your client websites. I have not listed all the options that Divi Pixel provides as I wanted to focus on those functionalities that I find most useful. So if you would like to learn what is the full scope of Divi Pixel Plugin, please head over to their Documentation page. Divi Pixel Review SummaryUpon using Divi Pixel I can state with confidence; this is a very handy plugin that will save you a lot of time when developing a website. It provides certain basic solutions which Divi should already have, in my opinion. If you often find yourself injecting the same template codes to disable footers, adjust menu breakpoints or blog layouts in your websites, Divi Pixel will save you a lot of time. In addition, Divi Pixel offers 17 design solutions that will take your website to the next level and help you build a unique design that does not look like thousands of other Divi websites. Before wrapping up, I think it would be a great addition if the developers included some templates to go along with this plugin, which would further speed up the design process. Time-saving and unique design options are my biggest takeaways from using Divi Pixel, and I would recommend it to those who are looking to speed up and improve their website design process. This article was originally posted on: Colorpeak.co.uk: Divi Pixel Plugin Review for Divi WordPress Theme |
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 |