Hi!
Debut theme - https://www.luxurybrandjewellery.com.au/
I’ve just added breadcrumb navigation using the following guide.
however I want to centre it under the collection title and in the centre of the product on product pages.
screenshots attached and current theme.liquid code
can you please help with how I can centre it?
{%- comment -%}
This file has been modified by the Yoast SEO for Shopify app.
You can learn more about this (and learn how to cleanly revert these changes) at https://yoa.st/removing-theme-changes.
{%- endcomment -%}
{%- liquid
assign disabled_by_yoast_seo = true
if content_for_header contains 'yoast-active-script'
assign disabled_by_yoast_seo = false
endif
-%}
<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>{% render 'yoast-seo' %}
{% comment -%}Auto-disabled. Yoast plugin is taking care of Meta Tags output.{%- endcomment -%}
{%- assign yoast_seo_settings = shop.metafields.yoast_seo.settings.value | default: shop.metafields.yoast_seo.settings -%}
{%- if disabled_by_yoast_seo or yoast_seo_settings.integrations.webmasterVerification.google == blank or yoast_seo_settings.integrations.webmasterVerification.google == null -%}
<meta name="google-site-verification" content="HAZte4-9DB5Oq1IX9i4Y8XXmlwFScFStmwJixsgdnXo" />
{%- comment -%} End Yoast auto-disable. {%- endcomment -%}
{%- endif -%}
<meta charset="utf-8">
{%- capture seo_title -%}
{%- if request.page_type == 'search' and search.performed == true -%}
{{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
{%- else -%}
{{ page_title }}
{%- endif -%}
{%- if current_tags -%}
{%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}
{%- comment -%}Auto-disabled. Yoast plugin is taking care of SEO output.{%- endcomment -%}
{%- if disabled_by_yoast_seo -%}
<title>{{ seo_title | strip }}</title>
{%- comment -%} End Yoast auto-disable. {%- endcomment -%}
{%- endif -%}
{%- if page_description -%}
{%- comment -%}Auto-disabled. Yoast plugin is taking care of Meta Tags output.{%- endcomment -%}
{%- if disabled_by_yoast_seo -%}
<meta name="description" content="{{ page_description | escape }}">
{%- comment -%} End Yoast auto-disable. {%- endcomment -%}
{%- endif -%}
{%- endif -%}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_button }}">
{%- comment -%}Auto-disabled. Yoast plugin is taking care of Meta Tags output.{%- endcomment -%}
{%- if disabled_by_yoast_seo -%}
<link rel="canonical" href="{{ canonical_url }}">
{%- comment -%} End Yoast auto-disable. {%- endcomment -%}
{%- endif -%}
{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}
{% include 'social-meta-tags' %}
{{ 'ubs.css' | asset_url | stylesheet_tag }}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
{{ 'customize-style.css' | asset_url | stylesheet_tag }}
<script>
var theme = {
breakpoints: {
medium: 750,
large: 990,
widescreen: 1400
},
strings: {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
regularPrice: {{ 'products.product.regular_price' | t | json }},
salePrice: {{
'products.product.sale_price' | t | json }},
sale: {{ 'products.product.on_sale' | t | json }},
showMore: {{ 'general.filters.show_more' | t | json }},
showLess: {{ 'general.filters.show_less' | t | json }},
addressError: {{ 'sections.map.address_error' | t | json }},
addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
authError: {{ 'sections.map.auth_error_html' | t | json }},
newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
external: {{ 'general.accessibility.link_messages.external' | t | json }},
newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
update: {{ 'cart.label.update' | t | json }},
quantity: {{ 'cart.label.quantity' | t | json }},
discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
regularTotal: {{ 'cart.label.regular_total' | t | json }},
priceColumn: {{ 'cart.label.price_column' | t | json }},
quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
cartError: {{ 'cart.general.cart_error' | t | json }},
removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }}
},
moneyFormat: {{ shop.money_format | json }},
moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }}
}
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
{%- if request.page_type contains 'customers/' -%}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{%- endif -%}
<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render 'tiny-script-control' %}{%- endif -%}
{% render 'pagefly-header' %}
</head>
{% include 'globo.formbuilder.scripts' %}
<body class="template-{{ request.page_type | handle }}">
<a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>
<div id="SearchDrawer" class="search-bar drawer drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}">
<div class="search-bar__table">
<div class="search-bar__table-cell search-bar__form-wrapper">
<form class="search search-bar__form" action="{{ routes.search_url }}" method="get" role="search">
<input class="search__input search-bar__input" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
<button class="search-bar__submit search__submit btn--link" type="submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
</div>
<div class="search-bar__table-cell text-right">
<button type="button" class="btn--link search-bar__close js-drawer-close">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
</button>
</div>
</div>
</div>
{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}
{% section 'announcement' %}
{% section 'header' %}
<div class="page-container" id="PageContainer">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<div id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'sections.slideshow.navigation_instructions' | t -}}
</div>
</div>
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
</ul>
{% render 'banana-stand-footer' %}
{% include 'tb-turbo' %}
{{ 'customiser-turbo.css' | asset_url | stylesheet_tag }}
{{'tiny-img-link-preloader.js' | asset_url | script_tag }}
<!-- **BEGIN** Hextom QAB Integration // Main Include - DO NOT MODIFY -->
{% render 'hextom_qab_main', product: product, customer: customer %}
<!-- **END** Hextom QAB Integration // Main Include - DO NOT MODIFY -->
<script>
{% comment %}
$('.site-nav__childlist-item > ul').each(function(){
if($(this).find('li').length > 20){
$(this).css('column-count','2');
$(this).parent().find('.site-nav__child-link--parent').css({'display':'block', 'text-align':'center'});
}
});
</script>
{% endcomment %}
</body>
</html>
thanks in advance!
