> For the complete documentation index, see [llms.txt](https://webrexstudio.gitbook.io/seo-json/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webrexstudio.gitbook.io/seo-json/design-breadcrumb/how-to-create-breadcrumb-for-your-store-pages.md).

# How to create Breadcrumb for your store pages?

ex-ProductHere are the simple steps that you need to follow: :thumbsup:

* Upgrade your Free app to a **Premium app (Schema PRO).** 
* Login to your Webrex SEO app. You will be directed to the Home Page. There is a section of Effortless Breadcrumb design Click on Go to Breadcrumb.
* Now Click on Design Breadcrumb.\
   

  <figure><img src="/files/YPDO65QOlcqSviSLm0j8" alt=""><figcaption></figcaption></figure>
* Once done, this will direct you to the editor on your Shopify admin. You need to select the page from the drop-down option given at the top (ex. Product)

![](/files/xY4QmPYYhCiHrnBTkemL)

* Now you can add **a section and search for breadcrumbs**.&#x20;

![](/files/6YLfHsUawiYH5ujcG9yn)

Now, In order to configure the design settings, you need to click on **Breadcrumb** on the left panel **under the app section** that you added before.\
\
And put the value for the input field asked :thumbsup:<br>

* **First Item text:** Put the text that you want your breadcrumb to start from.

![](/files/4ME5AobkYtEvcYNUNZdd)

* **Container Class:** This means the page- width. That means from where the content is written.
* **Separate Symbol:** This is used to differentiate between the categories that you have created for your breadcrumb.

![](/files/d7oWyP18oH0QTc0hXd4z)

* **Align:** You can use this for the alignment of the breadcrumb on your storefront like if you want the breadcrumb on the Left, Centre, or Right.
* **Padding ( Top, Right, Bottom, Left ):** This option is used to set space between the breadcrumb created.
* **Space Between:** This is used to create spaces between the categories created on the breadcrumb and the separator.

![](/files/ThwxDvPBtinUbAwtixWt)

![](/files/XgRkcPz5KqqRqGTeVkQd)

* **Main Colour:** You can change the color of the text.

![](/files/pwLOlwuFHlqdhaC1bIf4)

* **Separator color:** You can change the color of the separator you have chosen.

![](/files/rB6srptlMR2uHMuBnCQF)

* **Link hover Colour:**  This is used to apply color on the link hover.

![](/files/l9rL43B4wvj1JDnNxyph)

Once done hit **" SAVE"** present at the top right corner of your Shopify admin.\
\
If you  have any questions please do reach out at **<support@webrexstudio.com>**