{"id":1415,"date":"2023-05-21T20:17:58","date_gmt":"2023-05-21T19:17:58","guid":{"rendered":"https:\/\/greatsite.dev\/makegreatsite\/docs\/online-store\/adding-breadcrumbs-in-your-store\/"},"modified":"2023-05-21T20:20:27","modified_gmt":"2023-05-21T19:20:27","slug":"adding-breadcrumbs-in-your-store","status":"publish","type":"docs","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/online-store\/adding-breadcrumbs-in-your-store\/","title":{"rendered":"Adding breadcrumbs in Your Store"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Breadcrumbs is a type of secondary navigation that helps structure a large amount of content organized in a hierarchical manner. Breadcrumbs are presented as horizontally arranged text links separated by the \u201cgreater-than\u201d symbol (&gt;); the symbol indicates the level of that page relative to the page links beside it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can add breadcrumbs element to your product pages to set the navigation for category hierarchy. Here&#8217;s how it will look on a published site:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1074-5_189l0tl-1024x635.png\" alt=\"\" class=\"wp-image-1416\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1074-5_189l0tl-1024x635.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1074-5_189l0tl-300x186.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1074-5_189l0tl-768x476.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1074-5_189l0tl-1536x952.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1074-5_189l0tl.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Breadcrumbs element in the online store<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Open the\u00a0<strong>Store<\/strong>\u00a0tab in the navigation menu and click on the\u00a0<strong>Product page<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_u3gb3c-1024x576.png\" alt=\"\" class=\"wp-image-1418\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_u3gb3c-1024x576.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_u3gb3c-300x169.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_u3gb3c-768x432.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_u3gb3c-1536x864.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_u3gb3c.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. By default, the breadcrumbs element is added to the Product profile block. Hover over it to access its settings:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"420\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1075-6_yjh3ob-1024x420.png\" alt=\"\" class=\"wp-image-1419\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1075-6_yjh3ob-1024x420.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1075-6_yjh3ob-300x123.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1075-6_yjh3ob-768x315.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1075-6_yjh3ob-1536x630.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1075-6_yjh3ob.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. In the\u00a0<strong>General<\/strong>\u00a0tab you can choose whether to display the product name in the navigation or not:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"333\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_z9eng9-1024x333.png\" alt=\"\" class=\"wp-image-1420\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_z9eng9-1024x333.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_z9eng9-300x98.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_z9eng9-768x250.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_z9eng9-1536x499.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_z9eng9.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">4. You can add unlimited number of breadcrumbs elements to the Product page. For that, hover over the empty space on the page, click on the &#8220;plus&#8221; and choose\u00a0<strong>Breadcrumbs<\/strong>\u00a0in the pop-up menu:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1077-6_1lcl5w-1024x581.png\" alt=\"\" class=\"wp-image-1421\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1077-6_1lcl5w-1024x581.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1077-6_1lcl5w-300x170.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1077-6_1lcl5w-768x436.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1077-6_1lcl5w-1536x872.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1077-6_1lcl5w.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">5. Publish your site for the changes to appear live.<\/p>\n","protected":false},"featured_media":0,"parent":464,"menu_order":29,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-1415","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/comments?post=1415"}],"version-history":[{"count":1,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1415\/revisions"}],"predecessor-version":[{"id":1422,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1415\/revisions\/1422"}],"up":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/464"}],"next":[{"title":"Importing products into Your Store","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/online-store\/importing-products-into-your-store\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1423"}],"prev":[{"title":"Adding product ribbons","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/online-store\/adding-product-ribbons\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1402"}],"wp:attachment":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/media?parent=1415"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/doc_tag?post=1415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}