Product Category in Product Detail

Description

• adding product category navigation to Product Detail Page
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Click Gear icon on Store Page

Next, click Advanced > Page Header Code Injection

#1.2. Add this code to right box

<!-- 09.26c09v2 Product Category in Product Detail -->
<script>
window.PCPDConfig = {
  storePageUrl: "",
  sourceSelector: "a.product-list-category-link",
  insertBeforeSelector: ".product-nav",
  textClass: "",
  textSize: "",
  textColor: "",
  gapBetween: "20px",
  gapBelow: "10px"
};
</script>
<script src="https://code.beaverhero.com/productdetail/0926c09v2categorynavigationproductdetail.js"></script>

#2. Customize

#2.1. If you want to make Category Navigation align center, use this under main code

<style>
  .pcpd-list {
    justify-content: center;
}
  </style>