Shredall

Absolute collaboratively designed the new website look and feel with Shredall, with a key focus of using their set brand guidelines and large images to make it visually appealing - with a few full bespoke pages which deviate from the Shopify theme layout used. The decision on what platform to use was easy - as we recently built their sister site Loft on Shopify, an all in one storage company, it made sense to continue with this so they could manage and make changes on both sites in the same way without having to retrain staff on a brand new CMS.

Shredall’s main objective was to make the website more visually appealing, we did this by including a video slider, showcasing the company’s large on-site facilities. We also included small animations and interactions across the site to catch the attention of the user on Shredall’s offerings.

Site hierarchy

Although Shopify makes creating visually rich layouts incredibly simple, it is primarily an eCommerce platform and not really designed for deep content sites. Where this can become apparent is that pages can’t be ‘nested’ under other pages. The previous Shredall site had a lot of top level pages that then had other pages within them that gave further detail about each topic - and this hierarchy was displayed within the URL and the breadcrumb trail on the page. So for example the /shredding/ page might then also have /shredding/on-site-shredding and /shredding/high-security-shredding/ as pages beneath it.

Shopify won’t natively allow that structure, but with a little ingenuity, we can present that hierarchy to search engines. When a page loads, the theme code looks through the main navigation to see if that page is listed there, and if it is, we can use that structure to create the breadcrumb which helps the user orientate themselves. But we can also add some additional information for Google to understand that hierarchy as well. By adding structured data [https://developers.google.com/search/docs/appearance/structured-data/breadcrumb] to this, Google gets an understanding of how the pages relate to each other.

Four level deep navigation

Shopify’s menu system only allows a 3 level deep structure to be created, and for most sites, this is plenty. But Shredall did have some particularly deep pages that were four levels deep. We wanted to preserve that structure to make the transition to the new site as easy as possible for both existing users and search engines, and so we came up with a system to extend Shopify’s navigation to allow a fourth level.

Heading hierarchy

Working with Shredall’s SEO partner while migrating the content raised a possible issue with the page structure. Ideally, we want a level 1 heading at the top of the page, and level 2 headings beneath that, and level 3 beneath those.

The theme has a wide range of different elements that can be dragged and dropped in the editor to create a visually interesting page, but because they can be placed anywhere, they often all have the same level heading and that organisation of the page can be lost.
Because of the nature of it, it’s a very difficult thing to create a set of rules that could automate those heading levels, but what we could do is extend each of the drag-and-drop sections so the SEO partner could select which level they wanted for each instance. This meant a bit of manual work, but it ensured that this important SEO and Accessibility structure was maintained.