# 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="https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2FI3VrUtTnAGJ1dJ3htJdU%2Fimage.png?alt=media&#x26;token=b45aa8c7-4c4b-4540-b45e-df5c60b865b9" 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)

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2Fy2vBRMLxmfcyTEj6mTOe%2Fimage.png?alt=media\&token=110c3b7f-ed1b-44a2-9b38-1c83639491d3)

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

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2FhpJXk6KfG4yLrr7Y3AkN%2Fimage.png?alt=media\&token=7fca7abc-9698-495b-8a51-968ce760adc8)

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.

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2Fm8TCEhZk9JAOtOISHIXE%2Fimage.png?alt=media\&token=5b3d5f89-5153-4621-b655-2e9947ceac79)

* **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.

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2FcxkIX26Hb6hrk6snxwvV%2Fimage.png?alt=media\&token=b80ccbf5-1429-4750-8988-32a7ff2ce15a)

* **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.

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2FK24g9NikA9p6WkUvlUQL%2Fimage.png?alt=media\&token=5fb1316c-f763-4f0f-97e9-d2f2bf47bd5b)

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2FMYqrX2I6O65yIYw0mJT1%2Fimage.png?alt=media\&token=1ddb0495-4199-4184-88f1-34b0fd62023a)

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

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2Fh2EiOpaljdwEOrCjr9C4%2Fimage.png?alt=media\&token=f28fc506-8df3-4947-b8f1-6554f072a7ad)

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

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2FocOL9EilfHafGmm6Dxlt%2Fimage.png?alt=media\&token=ab34b89e-6ce9-4961-bb6a-5bc1f4cadc21)

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

![](https://1399404057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfg147QDnhr9Y9tuzTx%2Fuploads%2FbPne9IYqa8t4O9XVBWwV%2Fimage.png?alt=media\&token=ab5fb604-5e98-4271-a15b-645ce749fca2)

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>**