ISBNExpress Shopify app: display 3 book details horizontally

book-details-icons.liquid

{% assign publicationYear = product.metafields["app-ibp-book"].publication_year.value %} 
{% assign pages = product.metafields["app-ibp-book"].pages.value %}
{% assign binding = product.metafields["app-ibp-book"].binding.value %} 

{% if publicationYear or pages or binding %}
  <div class="isbnexpress-book-details">
    {% if publicationYear %}
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" viewBox="0 0 64 64"><g fill="#231F20"><path d="M11 54h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM23 54h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM35 54h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM11 43h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM23 43h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM35 43h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM47 43h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM11 32h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM23 32h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM35 32h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3zM47 32h6a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1zm1-5h4v3h-4v-3z"/><path d="M60 4h-7V3a3 3 0 1 0-6 0v1H17V3a3 3 0 1 0-6 0v1H4C1.789 4 0 5.789 0 8v52c0 2.211 1.789 4 4 4h56c2.211 0 4-1.789 4-4V8c0-2.211-1.789-4-4-4zM49 3a1 1 0 1 1 2 0v7a1 1 0 1 1-2 0V3zM13 3a1 1 0 1 1 2 0v7a1 1 0 1 1-2 0V3zm49 57a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V17h60v43zm0-45H2V8a2 2 0 0 1 2-2h7v4a3 3 0 1 0 6 0V6h30v4a3 3 0 1 0 6 0V6h7a2 2 0 0 1 2 2v7z"/></g></svg>
        <div>
          Year: {{ publicationYear }}
        </div>
      </div>
    {% endif %}
    {% if pages %}
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M19.5 2a.5.5 0 0 0-.5.5v4c0 .815.656 1.5 1.47 1.5h4.03c.67 0 .654-1 0-1h-4.03c-.26 0-.47-.207-.47-.5v-4a.488.488 0 0 0-.5-.5zM8.47 0C7.657 0 7 .685 7 1.5v23c0 .815.656 1.5 1.47 1.5h17.06c.814 0 1.47-.685 1.47-1.5v-18a.504.504 0 0 0-.146-.354l-6-6A.502.502 0 0 0 20.5 0zm0 1h11.823L26 6.707V24.5c0 .293-.21.5-.47.5H8.47c-.26 0-.47-.207-.47-.5v-23c0-.293.21-.5.47-.5zm-4 3C3.657 4 3 4.685 3 5.5v23c0 .815.656 1.5 1.47 1.5h17.06c.814 0 1.47-.685 1.47-1.5v-1c.01-.676-1.01-.676-1 0v1c0 .293-.21.5-.47.5H4.47c-.26 0-.47-.207-.47-.5v-23c0-.293.21-.5.47-.5h1.06c.675.01.675-1.01 0-1z"/></svg>
        <div>
          Pages: {{ pages }}
        </div>
      </div>
    {% endif %}
    {% if binding %}
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512.003 512.003"><path d="M483.984 399.974a9.66 9.66 0 0 0-9.661 9.661v53.935c0 16.052-13.06 29.111-29.113 29.111h-8.079c6.119-8.11 9.754-18.193 9.754-29.111V48.433c0-10.918-3.635-21.001-9.754-29.111h8.079c16.052 0 29.113 13.059 29.113 29.111v328.996c-.001 5.335 4.324 9.661 9.66 9.661a9.66 9.66 0 0 0 9.661-9.661V48.433C493.644 21.728 471.917 0 445.209 0H185.927a9.66 9.66 0 0 0-9.661 9.661 9.66 9.66 0 0 0 9.661 9.661h212.525c16.052 0 29.111 13.059 29.111 29.111v415.134c0 16.052-13.059 29.111-29.111 29.111H106.964c-16.052 0-29.111-13.059-29.111-29.111v-24.164h15.855c15.98 0 28.981-13.001 28.981-28.981 0-15.98-13.001-28.983-28.981-28.983H77.853v-19.246h15.855c15.98 0 28.981-13.001 28.981-28.983 0-15.982-13.001-28.981-28.981-28.981H77.853v-19.247h15.855c15.98 0 28.981-13.001 28.981-28.983s-13.001-28.981-28.981-28.981H77.853v-19.246h15.855c15.98 0 28.981-13.001 28.981-28.983 0-15.982-13.001-28.981-28.981-28.981H77.853v-19.247h15.855c15.98 0 28.981-13.001 28.981-28.981s-13.001-28.983-28.981-28.983H77.853V48.433c0-16.051 13.059-29.111 29.111-29.111h46.76a9.66 9.66 0 0 0 9.661-9.661A9.66 9.66 0 0 0 153.724 0h-46.76C80.259 0 58.531 21.727 58.531 48.433v24.166H47.339c-15.98 0-28.981 13.001-28.981 28.983 0 15.98 13.001 28.981 28.981 28.981h11.192v19.247H47.339c-15.98 0-28.981 13.001-28.981 28.983 0 15.98 13.001 28.981 28.981 28.981h11.192v19.247H47.339c-15.98 0-28.981 13.001-28.981 28.981 0 15.98 13.001 28.983 28.981 28.983h11.192v19.247H47.339c-15.98 0-28.981 13.001-28.981 28.981s13.001 28.983 28.981 28.983h11.192v19.246H47.339c-15.98 0-28.981 13.001-28.981 28.983 0 15.982 13.001 28.981 28.981 28.981h11.192v24.164c0 26.707 21.727 48.433 48.433 48.433H445.21c26.706 0 48.434-21.727 48.434-48.433v-53.935a9.658 9.658 0 0 0-9.66-9.661zM47.339 111.24c-5.326 0-9.66-4.333-9.66-9.66s4.333-9.661 9.66-9.661h46.37c5.326 0 9.66 4.333 9.66 9.661 0 5.326-4.333 9.66-9.66 9.66h-46.37zm0 77.211c-5.326 0-9.66-4.333-9.66-9.661 0-5.326 4.333-9.66 9.66-9.66h46.37c5.326 0 9.66 4.333 9.66 9.661 0 5.326-4.333 9.66-9.66 9.66h-46.37zm0 77.211c-5.326-.001-9.66-4.335-9.66-9.661s4.333-9.66 9.66-9.66h46.37c5.326 0 9.66 4.333 9.66 9.66s-4.333 9.661-9.66 9.661h-46.37zm0 77.21c-5.326 0-9.66-4.334-9.66-9.661s4.333-9.66 9.66-9.66h46.37c5.326 0 9.66 4.333 9.66 9.66s-4.333 9.661-9.66 9.661h-46.37zm0 77.209c-5.326 0-9.66-4.335-9.66-9.66 0-5.326 4.333-9.661 9.66-9.661h46.37c5.326 0 9.66 4.333 9.66 9.661 0 5.326-4.333 9.66-9.66 9.66h-46.37z"/><path d="M341.014 146.558H234.107c-5.337 0-9.661 4.326-9.661 9.661s4.324 9.661 9.661 9.661h106.907c5.337 0 9.661-4.326 9.661-9.661s-4.325-9.661-9.661-9.661zM201.904 146.558h-21.251a9.66 9.66 0 0 0-9.661 9.661 9.66 9.66 0 0 0 9.661 9.661h21.251a9.66 9.66 0 0 0 9.661-9.661 9.66 9.66 0 0 0-9.661-9.661zM341.014 204.52h-33.485c-5.337 0-9.661 4.326-9.661 9.661s4.324 9.661 9.661 9.661h33.485c5.337 0 9.661-4.326 9.661-9.661s-4.325-9.661-9.661-9.661zM275.326 204.52h-94.674c-5.337 0-9.661 4.326-9.661 9.661s4.324 9.661 9.661 9.661h94.674c5.337 0 9.661-4.326 9.661-9.661s-4.324-9.661-9.661-9.661z"/></svg>
        <div>
          Binding: {{ binding }}
        </div>
      </div>
    {% endif %}
  </div>
  <style>
    .isbnexpress-book-details {
      display: flex;
      justify-content: space-around;
    }
    .isbnexpress-book-details > div {
      text-align: center;
    }
    .isbnexpress-book-details svg {
      width: 3rem;
    }
  </style>
{% endif %}

1. What is does

Display the book publication year, number of pages and binding with icons.

2. How to add the code to theme's product page

Go to Shopify Admin > Online Store -> Customise -> Select any product -> Click Add block -> Select Custom liquid.