Skip to content

Instantly share code, notes, and snippets.

@panzerdp

panzerdp/book-details-horizontal.liquid Secret

Last active February 19, 2024 12:43
Show Gist options
  • Save panzerdp/d5aeee8b4091497ba975970a6cc98475 to your computer and use it in GitHub Desktop.
Save panzerdp/d5aeee8b4091497ba975970a6cc98475 to your computer and use it in GitHub Desktop.
Download ZIP
ISBNExpress Shopify app: display the book details horizontally with scroll
Raw
book-details-horizontal.liquid
<div class="isbnexpress-book-details-horizontal">
{% assign pages = product.metafields["app-ibp-book"].pages.value %}
{% if pages %}
<div class="isbnexpress-detail">
<div>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>
<b>
{{ pages }}
</b>
</div>
{% endif %}
{% assign language = product.metafields["app-ibp-book"].language %}
{% if language %}
<div class="isbnexpress-detail">
<div>Language</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="M32 0a32 32 0 1 0 0 64 32 32 0 0 0 0-64zm-4.2 6.4.2-.2c.4-.5 1-1 1-2s-.2-1.5-.5-2a30.1 30.1 0 0 1 7.8.1c.3.3.6.7 1.2 1 .6.2 1.3.4 2.1.2l.7-.3 1.8.6c.2.6.6 1.3 1.6 1.4.6 0 1 0 1.4-.2a30 30 0 0 1 16.4 21.8 2.2 2.2 0 0 0-.1 1l-.4.2a3 3 0 0 0-1.5 1.7l-.3.4-.4.2c-.5.1-1 .3-1.5 1-.4.6-.4 1.2-.4 1.7v.1l-.2.1c0-.3 0-.7-.2-1.2-.4-.5-1-.6-1.2-.6-.5 0-.9.3-1.1.5l-.1-1.3.1-1v-.2l.5-.7c.2-.4.6-.8.7-1.5a5 5 0 0 0 .1-1.8v-1.1c0-.6 0-1.2-.2-2l-.1-.3c-.2-.8-.3-1.5-.9-2.3a4.3 4.3 0 0 0-2.3-2l-1-.1h-.2c-.6-.2-1 0-1.4 0h-.6c-.2 0-.2-.1-.4-.4L48 17l-.3-.4-.8-.9c-.4-.3-.7-.5-1.3-.7-1-.4-2-.1-2.8.2-.6.2-1 .5-1.4.8l-.5.4-.4.2a4 4 0 0 0-1 .7L38 18l-.4-.1c-.2-.1-.5-.3-.9-.3h-.4c-.4 0-.7.2-1 .3l-.3.1a4 4 0 0 1-1.1 0c-.6 0-1.2 0-1.8.2-.5.1-.8.4-1 .5l-.5.2-.4-.2L29 18l-1-.2h-.3l-1.3-.1-.7-.1h-.4a7.8 7.8 0 0 0-2.1-1.1 4.7 4.7 0 0 0-.3-1.4 2.8 2.8 0 0 1 .5-1h.2l.6-.6c.7-.7 1-1.4 1-2.4.1-.8-.4-1.4-.7-1.8l-.2-.3c0-.2 0-.2.5-.5l.7-.5c.2-.3.5-.4.8-.6.4-.2 1-.5 1.4-1zM4.4 43.8a29.8 29.8 0 0 1-2.2-8.5c.2-.5.5-1 1-1.4.2-.4.5-.6.9-.8.4-.3.9-.6 1.4-1.2.5-.7.7-1.4.8-2 .2-.6.3-1 .6-1.2.5-.3.8-.3 1.5-.4h.8l.3-.1a7 7 0 0 1 3.2 0c.8.2 1.2.6 1.8 1l1.3 1c.5.1.8.4 1.2.7a6 6 0 0 0 2.9 1.3c.7.1 1.4-.1 1.8-.3l.7-.2h.1c.7.4.8.7.8 1h-.5c-.7.2-2 .4-2.1 1.7 0 .7.1 1.1.3 1.3.6.6 1.5.6 2.6.3l1.4-.2h.3a8.3 8.3 0 0 0 1.4.4h-.3c-.5.1-1 .2-1.5.5l-1 .5c-.6.3-1 .5-1.8.7h-1l-.8-.1a2 2 0 0 0-1.8.8c-.9 1.3-.3 2.7 0 3.3.3 1 1.1 2 3.1 2 1 0 2-.3 3.4-.7 1-.4 1.5-1 2-1.5.3-.4.6-.7 1-.9l.6-.2c1-.5 1.8-.9 2.6-.5.2.1.3.3.5.8.3.6.6 1.4 1.5 1.9.8.4 1.8.2 2.5 0 .5 0 .8-.2 1.1 0 .3.1.4.3.6.8l.8 1.3.4.4c.7.8 1.4 1.6 2.8 1.9h.6c.7 0 1.3-.2 1.7-.4.4-.2.7-.4 1-.3 1 .3 1.2.6 1.3 1 0 .3-.3.6-1.6 1.2l-.6.3c-.6.3-1.2.4-2 .4a18.8 18.8 0 0 0-3 .6l-2 .3c-.6 0-1-.2-1.5-.5-.4-.3-.6-.7-.8-1.1l-.7-1.1-.8-1.4c-.5-1-1.1-2.4-2.6-2.4l-.7.1c-1.2.4-1.5 1.3-1.8 2l-.4.7c-.4.6-.6 1.1-.7 1.6-.3.9-.4 1-.6 1-.4 0-.6 0-1.1-.5-.2 0-.4-.2-.5-.3l-.9-.8c-.2-.4-.6-.8-1.1-1.2l-1.6-.8-1.1-.5a2 2 0 0 1-.4-.5c-.3-.4-.8-1-1.8-1-.8 0-1.8.2-2.6 1.4l-.6 1.7c-.3 1-.7 2.5-1.4 2.5s-2.8-1.8-3.8-2.7l-1.7-1.4-.3-.3c-.8-.5-1.6-1-2.6-1h-.3zM32 62A30 30 0 0 1 5.5 46l.6.5.4.2L8 48c2.1 1.8 3.7 3.1 5 3.2 2.2.2 3-2.3 3.4-3.9L17 46c.2-.4.5-.5.7-.5l.3.4.9.8c.5.4 1 .6 1.5.7l1.1.6.8.8c.3.4.6.8 1.2 1.2l.5.3c.6.5 1.4 1 2.6.9 1.5-.2 1.9-1.5 2.2-2.3.1-.4.2-.8.5-1.1l.5-1.2c.3-.6.4-.7.6-.8h.1c.2 0 .6.9.8 1.3l1 1.7.5.8a5 5 0 0 0 1.3 1.7c.9.7 1.8 1 2.8 1 .8 0 1.7-.2 2.5-.4l1.8-.4h1a6.5 6.5 0 0 0 3.2-1c1.3-.6 3.1-1.5 2.6-3.5-.4-1.7-1.8-2.1-2.6-2.4l-.8-.1c-.7 0-1.2.2-1.7.5-.4.2-.7.3-1 .2-.7-.1-1-.6-1.7-1.2a33 33 0 0 0-.4-.5l-.5-.8c-.3-.5-.6-1.2-1.4-1.7-.8-.5-1.8-.3-2.6 0-.5 0-.8.2-1 0-.3-.1-.4-.3-.6-.8-.3-.6-.6-1.4-1.5-1.9-.6-.2-1-.3-1.6-.3-1 0-1.9.3-2.8.8l-.4.2c-.9.4-1.4 1-1.8 1.4-.4.4-.7.7-1.2.9-1.1.4-2 .6-2.7.6-1 0-1.2-.4-1.3-.7-.4-.8-.3-1.1 0-1.4h.5c.5.1 1.2.2 1.8 0 1-.2 1.6-.5 2.2-.9l1-.4 1-.3c.7-.1 2.3-.4 2.2-2-.1-1.5-1.5-1.9-2.3-2L26 34a3 3 0 0 0-1-.2c.2-.2.3-.5.3-.8.1-1.2-.5-2.2-1.8-3-.4-.2-.7-.3-1.1-.3-.5 0-1 .2-1.4.4a2 2 0 0 1-.9.2c-.8-.2-1.3-.5-2-1l-1.3-1-1-.7c-.7-.5-1.4-1-2.5-1.3a9 9 0 0 0-4 0H8.1c-.7.1-1.5.2-2.4.8-1 .7-1.2 1.6-1.4 2.3a3 3 0 0 1-.5 1.2c-.3.4-.6.6-1 .8l-.9.8V32A30 30 0 0 1 26.3 2.6l.3.4c.4.5.5.7.4 1 0 .3-.1.4-.5.9l-.2.2c-.3.3-.5.5-1 .7l-1 .8-.5.3c-.5.3-1.1.8-1.4 1.7-.2 1 .3 1.7.7 2 0 .2.3.4.3.5 0 .5-.2.7-.6 1.1 0 .1 0 .2-.2.2a5 5 0 0 0-.4.3l-.1.1s-.6.6-1 1.6c-.1.7-.2 1 0 1.6l.2.9-.1 1.2.8.2 1.3.5 1 .6.2.2c.4.2.8.2 1.2.1h.6l1.2.2h.3l.7.1c.2 0 .3.2.5.4.4.3 1 .7 1.7.7.8 0 1.2-.4 1.6-.6l.4-.3H34l1.7-.1.7-.3.2-.1h.1l.3.1c.3.1.6.3 1.2.3 1 0 2.7-1.4 2.7-1.4l.6-.4.7-.3.7-.5.8-.6c.7-.2 1-.3 1.5-.2l.6.5c.2 0 .3.2.4.4l.5.6.2.3c.2.3.5.6 1 .9a3 3 0 0 0 2 .2l.7-.1h.3l.6.2h.3l1 1c.3.6.4 1 .5 1.7l.1.4.1 1.6v.5l.1.7v1.2l-.4.7c-.3.3-.6.7-.7 1.3l-.1.2c-.2.6-.3 1.2-.2 2v1.3c0 1.1 0 1.8.5 2.3.2.2.5.4.8.4h.3l.2-.1.8-.6c.3.7.9 1 1.6 1 .9 0 2.5-.6 2.6-1.6v-1.4h.4c.4-.2.8-.3 1.3-.7.4-.4.5-.8.7-1.1 0-.2.1-.4.3-.5l.3-.2.1 2.2a30 30 0 0 1-30 30z"/><path d="M44.6 28.2c-1 .3-1.5 1.1-1.8 1.7-.1.4-.2.6-.5.9l-1.2.8c-.5.2-1 .5-1.6 1l-.7.6c-.7.5-1.8 1.3-1.5 2.8.2.9 1 1.5 2 1.5a7 7 0 0 0 2-.5l1-.3c1.7-.4 3-.8 4.2-2.1l.5-.5c1.1-1 2.8-2.7 1.6-4.6a3.4 3.4 0 0 0-4-1.3zm1 4.5-.5.4c-1 1-1.8 1.3-3.2 1.7l-1.2.3-1.4.3.7-.6.9-.7 1.2-.8c.5-.2 1-.5 1.6-1 .5-.5.7-1 1-1.5.2-.6.3-.7.5-.7l.5-.1c.5 0 1 .2 1.2.6.3.4 0 .9-1.3 2zM32.4 53l-.7.2c-1.4.5-1.4 2-1.3 2.7v.8l-.2.6c-.2.7-.4 1.7.5 2.6.4.4.9.6 1.5.6.8 0 1.8-.5 2.6-1.3a3.5 3.5 0 0 0 0-4.7c-.5-.6-1.3-1.4-2.4-1.4zm.9 4.8c-.4.5-.9.7-1.1.7H32l.2-.7.1-.9v-1.8c.2 0 .4 0 1 .7.5.7.5 1.5 0 2z"/></g></svg>
<b>
{% if language == 'de' %}
German
{% elsif language == 'en' %}
English
{% elsif language == 'fr' %}
French
{% elsif language == 'es' %}
Spanish
{% endif %}
</b>
</div>
{% endif %}
{% assign publisher = product.metafields["app-ibp-book"].publisher %}
{% if publisher %}
<div class="isbnexpress-detail">
<div>
Publisher
</div>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" version="1.0" viewBox="0 0 64 64"><g fill="#231F20"><path d="M59 0H5a4 4 0 0 0-4 4v20a6 6 0 0 0 3 5.2V60a4 4 0 0 0 4 4h48a4 4 0 0 0 4-4V29.2c1.8-1 3-3 3-5.2V4a4 4 0 0 0-4-4zm-8 2v22a4 4 0 0 1-8 0V2h8zM41 2v22a4 4 0 0 1-8 0V2h8zM31 2v22a4 4 0 0 1-8 0V2h8zM21 2v22a4 4 0 0 1-8 0V2h8zM3 4c0-1.1.9-2 2-2h6v22a4 4 0 0 1-8 0V4zm9 58V38h12v10h-1a1 1 0 1 0 0 2h1v12H12zm46-2a2 2 0 0 1-2 2H26V37c0-.5-.4-1-1-1H11a1 1 0 0 0-1 1v25H8a2 2 0 0 1-2-2V30a6 6 0 0 0 6-2.7 6 6 0 0 0 10 0 6 6 0 0 0 10 0 6 6 0 0 0 10 0 6 6 0 0 0 10 0 6 6 0 0 0 6 2.6V60zm-1-32a4 4 0 0 1-4-4V2h6a2 2 0 0 1 2 2v20a4 4 0 0 1-4 4z"/><path d="M53 36H29a1 1 0 0 0-1 1v20c0 .6.4 1 1 1h24c.6 0 1-.4 1-1V37c0-.6-.4-1-1-1zm-1 20H30V38h22v18z"/><path d="M48.3 42.7a1 1 0 0 0 1.4 0c.4-.4.4-1 0-1.4l-1-1a1 1 0 1 0-1.4 1.4l1 1zM48.3 47.7a1 1 0 0 0 1.4 0c.4-.4.4-1 0-1.4l-6-6a1 1 0 1 0-1.4 1.4l6 6z"/></g></svg>
<b>
{{ publisher }}
</b>
</div>
{% endif %}
{% assign publicationDate = product.metafields["app-ibp-book"].publication_date.value %}
{% if publicationDate %}
<div class="isbnexpress-detail">
<div>
Publication date
</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>
<b>
{{ publicationDate }}
</b>
</div>
{% endif %}
{% assign binding = product.metafields["app-ibp-book"].binding.value %}
{% if binding %}
<div class="isbnexpress-detail">
<div>
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>
<b>
{{ binding }}
</b>
</div>
{% endif %}
{% assign isbn = product.variants[0].barcode %}
{% if publisher %}
<div class="isbnexpress-detail">
<div>ISBN</div>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 32 32"><path d="M2 1.3c-.4 0-.8.3-.8.7v28a.8.8 0 0 0 1.6 0V2c0-.4-.4-.8-.8-.8zm3 0c-.4 0-.8.3-.8.7v28a.8.8 0 0 0 1.5 0V2c0-.4-.3-.8-.7-.8zm3 0c-.4 0-.8.3-.8.7v28a.8.8 0 0 0 1.5 0V2c0-.4-.3-.8-.7-.8zm22 0c-.4 0-.8.3-.8.7v28a.8.8 0 0 0 1.6 0V2c0-.4-.4-.8-.8-.8zm-6 0c-.4 0-.8.3-.8.7v28a.8.8 0 0 0 1.6 0V2c0-.4-.4-.8-.8-.8zm-7 0c-.4 0-.8.3-.8.7v28a.8.8 0 0 0 1.6 0V2c0-.4-.4-.8-.8-.8zm-3 0c-.4 0-.8.3-.8.7v28a.8.8 0 0 0 1.6 0V2c0-.4-.4-.8-.8-.8z"/></svg>
<b>
{{ isbn }}
</b>
</div>
{% endif %}
{% assign dimValue = product.metafields["app-ibp-book"].dimensions.value %}
{% if dimValue %}
<div class="isbnexpress-detail">
<div>Dimensions</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="M62.8 18 46 1.2a4 4 0 0 0-5.6 0L1.2 40.4a4 4 0 0 0 0 5.6L18 62.8a4 4 0 0 0 5.6 0l39.2-39.2a4 4 0 0 0 0-5.6zm-1.4 4.2L22.2 61.4a2 2 0 0 1-2.8 0L2.6 44.6a2 2 0 0 1 0-2.8l2-2 2.9 2.7a1 1 0 1 0 1.4-1.4L6 38.3l2.8-2.8 5.6 5.6a1 1 0 1 0 1.4-1.4l-5.6-5.6 2.8-2.8 2.8 2.8a1 1 0 0 0 1.4-1.4L14.5 30l2.8-2.8 2.8 2.8a1 1 0 1 0 1.4-1.4l-2.8-2.8 2.8-2.8 5.6 5.6a1 1 0 1 0 1.4-1.4l-5.6-5.6 2.8-2.8 2.8 2.8a1 1 0 1 0 1.4-1.4l-2.8-2.8 2.8-2.8 2.8 2.8a1 1 0 1 0 1.4-1.4L31.3 13l2.8-2.8 5.6 5.6a1 1 0 1 0 1.4-1.4l-5.6-5.6L38.3 6l2.8 2.8a1 1 0 1 0 1.4-1.4l-2.8-2.8 2.1-2.1a2 2 0 0 1 2.8 0l16.8 16.8c.8.8.8 2 0 2.8z"/><path d="M51 17a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></g></svg>
<b>
{{ dimValue[0].value }} x {{ dimValue[1].value }} x {{ dimValue[2].value }} {{ dimValue[0].unit }}
</b>
</div>
{% endif %}
{% assign authors = product.metafields["app-ibp-book"].authors %}
{% if authors %}
<div class="isbnexpress-detail">
<div>Author(s)</div>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="-0.5 0 25 25"><path stroke="#0F0F0F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M12 13.09a4.51 4.51 0 1 0 0-9.02 4.51 4.51 0 0 0 0 9.02ZM8.98 11.91l-.02.01"/><path stroke="#0F0F0F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M16.97 12.82a9.5 9.5 0 0 1 4.53 7.58.51.51 0 0 1-.51.53H3.01a.51.51 0 0 1-.51-.53 9.5 9.5 0 0 1 4.49-7.55"/></svg>
<b>
{{ authors | metafield_text }}
</b>
</div>
{% endif %}
</div>
<style>
.isbnexpress-book-details-horizontal {
display: flex;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.isbnexpress-book-details-horizontal:empty {
display: none;
}
.isbnexpress-book-details-horizontal .isbnexpress-detail {
text-align: center;
flex: 0 0 10rem;
font-size: 1.25rem;
line-height: 1.35rem;
display: flex;
align-items: center;
flex-flow: column;
padding: 0.5rem 0;
}
.isbnexpress-book-details-horizontal svg {
display: block;
width: 2rem;
height: 2rem;
margin: 1rem 0 0.75rem 0;
}
</style>
@panzerdp
Copy link
Author

panzerdp commented Feb 19, 2024 •
edited
Loading

1. What it does

The above liquid code displays the book details using metafields in a horizontal layout.

Screenshot 2024-02-19 at 11 28 14

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.

add-shopify-liquid

3. Customization: reordering or deleting book details

You can move (for the sake of reordering) or delete book details: just make sure to move or delete the entire unit corresponding to the book detail.

The unit which corresponds to a book detail starts with {% assign ... %} and ends with {% endif %}.

Also, the picture below shows the units that can be deleted or moved:

Screenshot 2024-02-19 at 11 32 41

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment