Schema & Breadcrumbs


Schema is an advanced markup code added to your website. Websites with Schema are easier for search engines and other crawlers to index, meaning it’s easier for them to understand the content of your store, and serve it to more relevant people.

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. 

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Our app automatically adds both breadcrumb navigation and schema code to your shop as easy as clicking a button.

Benefits:

  • Extremely simple to use
  • No messy code left in case you uninstall the app
  • You only have to pay once for the app, no hidden costs, no monthly payments
  • Built-in css editor and live preview to see how the navigation looks like in real time
  • Well documented and fast support

FAQ

How do i know if it works?

  • First and the fastest method is to go on any of your shop`s pages (product, articles, blogs...), right click>view page source or ctrl+u and search for "json+ld" (without the quotes) and you should see something like this:

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":{
.
.
.
  • Another way is to copy the url of any of the pages and go to Google`s structured data testing tool and paste your url there. As a result you will see something like in the image below:

schema and breadcrumbs results

  • A recent tool from Google is the new Rich Results testing tool that can show if your page is eligible or not for rich snippets, but does not support all kind of schema objects yet.

Why am I getting errors on structured data testing tool?

  • First of all make sure it actually says error and not warning
  • If there are any errors feel free to contact us and we will make the problem go away ASAP
  • Most of the time they show up for product resources, either because of a missing barrcode or sku, but if they are just warnings there are no issues.
I messed up the style in the css editor. What should I do?
  • The easy solution is to click on the "remove breadcrumbs" button and then re-initialize them. The styles will be back to their initial state.
  • It is recommended you save the css in a local file for backup in case this happens and copy-paste it from the backup file.
Will it work without javascript?
  • Yes. There is no javascript involved so it works on any browser and on any shop.

I have installed the app but nothing happened.

  • This may be a fault related to the theme`s code structure. Nothing we can not handle. If you see anything out of the ordinary, contact us
How long does it take until I see any results?
  • It usually takes a few weeks before Google indexes all the changes and maybe more until it generates rich snippets. Patience is the key here

I need to change the breadcrumbs position. How do I do that?

  • The app installs the code in the header section of your theme by default, but not all themes are the same so the position may not be optimal. In order to change the position follow these steps:
  1. Log into your Shopify store ( in case you have not already )
  2. Select Online Store->Actions(for the main theme)->Edit Code
  3. Go to the Sections "folder" and find the file called header.liquid
  4. There scroll down untill you find a line that looks like this:                                                  {% include "bodanu-breadcrumbs" %}
  5. Select it and ctrl+x/cmd+x ( cut )
  6. Now go to the layout "folder" and select theme.liquid file
  7. Scroll down untill you come across a line that says {{ content_for_layout }} and paste the line just above.

It should look something like this:

{% include 'bodanu-breadcrumbs' %}
<main id="main" role="main">
{{ content_for_layout }}
</main>
Now the breadcrumbs are outside of the header section, just above the main content, and bellow the main navigation or bars or other contents that may reside in your header and it can be styled easier.
I have installed and initiated the app, but the breadcrumbs are nowhere to be seen.
  • This issue is certainly caused by the fact that your theme uses an older theme structure and there is no header section.
  • In order to solve this issue, please follow the same steps as stated in the above question. It will fix it for sure.

I have initiated/removed the breadcrumbs and it messed up my theme

There are so many themes and structures that it is almost impossible to anticipate all the issues that may pop up. We are constantly working on improving the app to work with as many code structures as possible, but in some cases this issue may pop up. 

Almost certainly the file that got messed up is the header.liquid section file. In order to fix this follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit, and then click Actions > Edit code.

  3. Under the Sections header, click into the header.liquid file

  4. Click Older versions next to the .liquid file name

  5. Click the drop-down menu to select an older version. Clicking a datestamp will roll the code back to that saved version.

Follow this link for a more comprehensive guide: 

https://shopify.dev/tutorials/customize-theme-troubleshooting-roll-back-to-older-version-of-theme

 

If your issue is none of the above, drop us a line an we will get back to you ASAP

Contact Us