Breadcrumb

Description

• Intelligent Navigation Tool: Automatically generates breadcrumbs for seamless user navigation and improved SEO
• Customizable: Manual adjust the path of the breadcrumb display from the Shopify Admin
• Adjustable Aesthetics: Change breadcrumb separator and color to fit your store's branding.
• No Impact on Speed: Designed to not affect your Shopify store's loading speed.
• Overall Benefit: Boosts user experience and enhances store's SEO performance.

Metafield Specifications

• Type: Colletion List
• Namespace: uxify
• Key: breadcrumb

Instructions

This asset works on all Online Store 2.0 themes.

How to Use Breadcrumb?

After you have purchased this asset:

Step 1: Activate the Metafields

1. Navigate to your Shopify admin dashboard.
2. Locate and click on "Settings" in the bottom left corner.
3. Within "Settings", choose "Custom Data".
4. Depending on your needs, do this for either "Products", "Collections", or both.
5. Click on "Add Definition".
6. For the name, enter "Breadcrumb".
7. In the 'Namespace and key' field, enter "uxify.breadcrumb".
8. Add a description (Note: This is for your reference only; any input is fine).
9. Click on "+ select type", then choose "Collection" followed by "List of Collections".
10. In the top-right corner, ensure the "Access ‘Storefronts’" box is selected.
11. Finally, click "Save".

Step 2: Integrate Breadcrumb into Your Theme Template

1. Go to "Online Store" then "Themes" from your Shopify admin dashboard.
2. Click "Customize".
3. In the theme editor, select the desired "Product" or "Collection" page template from the top.
4. On the left side, choose "Add Block" > "Apps" and then pick "Product Breadcrumb".
5. You have the option to drag the breadcrumb to position it as you prefer.
6. To modify its appearance, click on the breadcrumb section and make your changes from the right side.

Step 3: Establish Breadcrumb Paths

1. In the Shopify admin, navigate to the specific product or collection page you wish to modify breadcrumbs path.
2. Scroll to the bottom to find the "Metafields" section.
3. Click on the "Breadcrumb" text.
4. Click "Select Collections".
5. Pick the desired collections for the breadcrumb.
6. To determine the sequence in the breadcrumb, drag and rearrange the collections as needed.

Troubleshooting Tips:

• Breadcrumb isn't visible on my page?
  1. Ensure the Breadcrumb is linked to the right product/collection page template.
  2. Verify its visibility status in the theme editor.
  3. Check if the breadcrumb color contrasts with the background color.