-
-
Save panzerdp/d5aeee8b4091497ba975970a6cc98475 to your computer and use it in GitHub Desktop.
ISBNExpress Shopify app: display the book details horizontally with scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1. What it does
The above liquid code displays the book details using metafields in a horizontal layout.
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.
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: