Welcome back to WebSensePro for another exciting tutorial. Today, I’m going to walk you through the process of adding breadcrumbs to your Shopify store without relying on any third-party apps. Yes, you heard it right! You can achieve this seamlessly by simply following the steps outlined in this tutorial.
Step 1: Accessing Your Shopify Store Backend
First things first, let’s head over to the backend of your Shopify store. Close any unnecessary tabs and navigate to “Online Store.”
Step 2: Installing the Prestige Theme
If you haven’t already installed the Prestige theme, now’s the time to do it. I recommend using the latest version, which at the time of this tutorial is 10.7.0. Click on the “Add” button and let the theme install.
Step 3: Editing Your Theme Code
Once the Prestige theme is installed, click on the “Publish” button and then select “Edit Code” from the dropdown menu.
Step 4: Adding the Breadcrumb Section
In the code editor, navigate to the “Sections” folder and create a new file named “breadcrumb.liquid.” Replace any existing code in this file with the code provided in the description.
Step 5: Integrating Breadcrumbs into Your Theme
Next, locate the “theme.liquid” file and search for “header-group.” Below this section, insert the code snippet to include the breadcrumb section.
{%- sections ‘custom-breadcrumb’ -%}
Step 6: Customizing Your Breadcrumbs
Save your changes and head over to the “Customize Theme” section. Here, you’ll find the newly added breadcrumb navigation. Customize it according to your preferences, such as enabling/disabling icons, changing colors, or specifying on which pages the breadcrumbs should appear.
Step 7: Final Touches and Testing
After customizing your breadcrumbs, don’t forget to save your settings. Now, navigate to your product page to ensure that the breadcrumbs are displaying correctly.
Conclusion
And there you have it! By following these simple steps, you’ve successfully added stylish breadcrumbs to your Shopify store without the need for any external apps. Feel free to subscribe to our channel for more helpful tutorials and updates.
Create a new section name custom-breadcrumb.liquid file and insert the following code into it.
{% schema %}
{
"name": "Custom Breadcrumb",
"settings": [
{
"type": "header",
"content": "Subscribe to our [channel](https://www.youtube.com/@websensepro?sub_confirmation=1)"
},
{
"type": "checkbox",
"id": "breadcrumbs_home_icon_bool",
"label": "Use the home icon next to the Home link in the breadcrumb",
"default": true
},
{
"type": "select",
"id": "breadcrumb_delimeter",
"label": "Breadcrumb Delimeter Icon",
"options": [
{ "value": "angle_right", "label": "Angle Right" },
{ "value": "slash", "label": "Slash" },
{ "value": "arrow_right", "label": "Arrow Right" },
{ "value": "squiggle_arrow", "label": "Squiggle Arrow" },
{ "value": "right_long", "label": "Right Long" },
{ "value": "double_right", "label": "Double Right" },
{ "value": "diamond_arrow_head", "label": "Diamond Arrow Head" },
{ "value": "heavy_angle_right", "label": "Heavy Angle Right" }
],
"default": "angle_right"
},
{
"type": "range",
"id": "desktop_font",
"label": "Desktop Font size",
"min": 10,
"max": 20,
"unit": "px",
"default": 15
},
{
"type": "range",
"id": "mobile_font",
"label": "Mobile Font size",
"min": 3,
"max": 14,
"unit": "px",
"default": 7
},
{
"type": "color",
"id": "breadcrumb_bg_color",
"label": "Background Color",
"default": "#fff"
},
{
"type": "color",
"id": "breadcrumb_text_color",
"label": "Breadcrumb Color",
"default": "#465076"
},
{
"type": "checkbox",
"id": "breadcrumb_accent_color_bool",
"label": "Enable visited page color link in breadcrumb",
"default": false
},
{
"type": "color",
"id": "breadcrumb_accent_color",
"label": "Visited Page Link Color",
"default": "#4770db"
},
{
"type": "checkbox",
"id": "enable_product_page",
"label": "Enable in Product Page"
},
{
"type": "checkbox",
"id": "enable_collection_page",
"label": "Enable in Collection Page"
},
{
"type": "checkbox",
"id": "enable_complete_site",
"label": "Enable on Complete Website",
"default": true
}
],
"presets": [
{
"name": "Custom Breadcrumb"
}
]
}
{% endschema %}
<div class="breadcrumbs1">
<nav class="breadcrumb1 breadcrumb1--floating" aria-label="Breadcrumb1">
<ol class="breadcrumb1__list unstyled-list">
{%- if section.settings.breadcrumbs_home_icon_bool -%}
<div class="home-icon-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-house-door-fill"
viewBox="0 0 16 16"
>
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
</svg>
</div>
{%- endif -%}
<li class="breadcrumb1__list-item breadcrumb1-delimeter">
<a href="{{ routes.root_url }}" class="smallcaps" style="color: {{ section.settings.breadcrumb_text_color }} !important;">
{{ 'general.breadcrumb.home' | t }}
</a>
</li>
{%- if template contains 'collection' -%}
<li class="breadcrumb1__list-item breadcrumb1-delimeter">
<a href="{{ collection.url }}" style="color: {{ section.settings.breadcrumb_text_color }};">
{{ collection.title }}
</a>
</li>
{%- endif -%}
{%- if template contains 'product' -%}
{%- assign current_collection = collection | default: product.collections.first -%}
{%- if current_collection -%}
<li class="breadcrumb1__list-item breadcrumb1-delimeter">
<a href="{{ current_collection.url }}" style="color: {{ section.settings.breadcrumb_text_color }};">
{{ current_collection.title }}
</a>
</li>
{%- endif -%}
{% comment %}
{%- liquid
assign url_parts = request.path | split: '/'
assign collection_handle = null
for part in url_parts
if part == 'collections' and forloop.index < url_parts.size
assign collection_index = forloop.index
assign collection_handle = url_parts[collection_index]
break
endif
endfor
if collection_handle
assign current_collection = collections[collection_handle]
else
assign current_collection = collection | default: product.collections.first
endif
-%}
<li class="breadcrumb__list-item breadcrumb-delimeter">
<a href="{{ current_collection.url }}" style="color: {{ section.settings.breadcrumb_text_color }};">
{{ current_collection.title }}
</a>
</li>
{% endcomment %}
{%- endif -%}
</ol>
</nav>
</div>
<style>
/* Conditional display logic */
{% if section.settings.enable_complete_site %}
.breadcrumbs1 { display: block; }
{% elsif template == 'product' and section.settings.enable_product_page %}
.breadcrumbs1 { display: block; }
{% elsif template.name == 'collection' and section.settings.enable_collection_page %}
.breadcrumbs1 { display: block; }
{% else %}
.breadcrumbs1 { display: none; }
{% endif %}
:root {
--svg_fill: {{ section.settings.breadcrumb_text_color }};
}
.home-icon-container {
display: inline-block;
margin-right: 4px;
vertical-align: sub;
}
.breadcrumbs1 {
padding: 1rem 5rem;
color: {{ section.settings.breadcrumb_text_color }};
background-color: {{ section.settings.breadcrumb_bg_color }};
}
.breadcrumb1__list-item {
display: inline-block;
}
.breadcrumb1__list-item a {
text-decoration: none;
color: inherit;
font-size: {{ section.settings.desktop_font }}px;
}
.breadcrumb1--floating{
position: relative !important;
}
{% if section.settings.breadcrumb_accent_color_bool %}
.breadcrumbs1 a:last-of-type {
color: {{ section.settings.breadcrumb_accent_color }} !important;
}
{% endif %}
.breadcrumb1-delimeter:not(:last-child)::after {
display: inline-block;
margin-left: 0.75rem;
margin-right: 0.50rem;
speak: none;
{% case section.settings.breadcrumb_delimeter %}
{% when "angle_right" %}
content: "›"; font-size: 18px;
{% when "slash" %}
content: "/"; font-size: 16px;
{% when "arrow_right" %}
content: "➤"; font-size: 15px;
{% when "squiggle_arrow" %}
content: "\27FF"; font-size: 25px;
{% when "right_long" %}
content: "\279E"; font-size: 18px; transform: translateY(5%);
{% when "double_right" %}
content: "\00BB"; font-size: 20px;
{% when "diamond_arrow_head" %}
content: "⤞"; font-size: 25px; transform: translateY(5%);
{% when "heavy_angle_right" %}
content: "\276F"; font-size: 18px; transform: translateY(5%);
{% endcase %}
}
.breadcrumbs1 [aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}
.breadcrumb1__list-item+.breadcrumb1__list-item:before {
content: "" !important;}
@media (max-width: 768px){
.breadcrumbs1 {
padding: 1rem 1rem !important;
}
.breadcrumb1__list-item a {
text-decoration: none;
color: inherit;
font-size: {{ section.settings.mobile_font }}px;
}
.breadcrumb1-delimeter:not(:last-child)::after {
position: relative;
top: 2px;
}
</style>Replace the following code in product-card.liquid file
<a href="{{ product.url }}" class="product-card__media" draggable="false" data-instant> <a href="{{ product.url | within: collection }}" class="product-card__media" draggable="false" data-instant>
