Shopify themes, liquid, logos, and UX
Hey Guys,
I trying to move the description section above Add To Cart button, Currently its open like a tab. Unfortunately the function (Photo) does not exist at my theme (Pipeline).
Can i do it from theme code ?
That my
Snippet\product.liquid file.
{%- case section.settings.image_width -%}
{%- when 'full' -%}
{%- assign product_image_width = 'one-whole' -%}
{%- assign product_description_width = 'one-whole' -%}
{%- when 'narrow' -%}
{%- assign product_image_width = 'medium-up--three-eighths' -%}
{%- assign product_description_width = 'medium-up--five-eighths' -%}
{%- when 'half' -%}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- else -%}
{%- assign product_image_width = 'medium-up--five-eighths' -%}
{%- assign product_description_width = 'medium-up--three-eighths' -%}
{%- endcase -%}
<div class="product-page">
<div class="wrapper product__align-{{ section.settings.align }}">
{% if section.settings.product_breadcrumbs %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
<a href="{{ routes.root_url }}" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>
{% if collection.handle %}
<span aria-hidden="true">›</span>
{% capture url %}{{ routes.collections_url }}/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
</nav>
{% endif %}
<div class="grid product-single">
<div class="grid__item product__media__wrapper {{ product_image_width }}">
{% if product.media.size > 0 %}
{% if product.media.size > 1 %}
<div data-product-slideshow
class="product__slides flickity-lock-height"
style="--default-ratio: {{ 1 | divided_by: product.media[0].aspect_ratio | times: 100 | at_most: 100 }}%">
{% else %}
<div class="product__slides">
{% endif %}
{% for media in product.media %}
{% render 'media', media: media, section: section %}
{% endfor %}
</div>
{% else %}
<div class="product__image__placeholder"></div>
{% endif %}
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{% if first_3d_model %}
<button
class="btn--outline btn--ar uppercase"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title }}"
data-shopify-xr-hidden>
{% render 'icon-media-model' %}
<span>{{ 'products.product.view_in_space' | t }}</span>
</button>
{% endif %}
<noscript>
{% for image in product.media %}
<img src="{{ image.preview_image | img_url: '900x' }}" alt="{{ image.alt | default: product.title }}">
{% endfor %}
</noscript>
{% if product.media.size > 1 %}
<div data-product-thumbs class="media__thumb__wrapper">
{% for media in product.media %}
<div class="media__thumb"
data-slideshow-thumbnail
data-media-select="{{ media.id }}">
<img alt="{{ media.alt | escape }}" src="{{ media.preview_image.src | img_url: '200x200', crop: 'center' }}">
{%- if media.media_type == 'model' -%}
{% render 'icon-media-model' %}
{%- elsif media.media_type contains 'video' -%}
{% render 'icon-media-video' %}
{%- endif -%}
</div>
{% endfor %}
</div>
{%- endif -%}
</div>
<div class="grid__item {{ product_description_width }}">
<div class="product__details">
{% render 'product-form', product: product, section: section %}
</div>
{% if product.description != blank or section.blocks.size > 0 %}
<div class="product-description rte rte--column">
{%- if section.settings.style == 'none' -%}
{{ product.description }}
{% else %}
<div class="tabs-wrapper">
{% render 'product-tabs', section: section, product: product %}
</div>
{%- endif -%}
</div>
{%- endif -%}
{% if section.settings.social_enable %}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media.preview_image %}
{% endif %}
</div>
</div>
</div>
</div>
{% render 'product-info', product: product %}
<script data-product-add-popdown-template type="text/x-template">
<div class="product__popdown__outer">
<div class="product__popdown__textbar">
<span class="product__popdown__title product__popdown__title--bold">
{% raw %}{{ it.product_title | safe }} {% endraw %}
</span>
<span class="product__popdown__title">
{% raw %}
{{@if(it.variant_title)}}
{{ it.variant_title | safe }}
{{/if}}
{% endraw %}
</span>
<span class="product__popdown__title product__popdown__title--bold">
{{ 'products.cart_drawer.item_added' | t }}
</span>
</div>
<div class="wrapper">
<div class="product__popdown__inner">
<div class="product__popdown__close">
<div class="popdown__close__inner" data-close-popdown>
{% render 'icon-close-small' %}
</div>
</div>
{% capture product_image %}{% raw %}{{ it.product_image }}{% endraw %}{% endcapture %}
<div class="product__popdown__image">
<img alt="{% raw %}{{ it.product_title | safe }}{% endraw %}" src="{{ product_image }}">
</div>
<div class="product__popdown__cart__wrapper">
<a href="{{ routes.cart_url }}" class="product__popdown__cart text-link uppercase" data-drawer-toggle="drawer-cart">{{ "products.cart_drawer.view_cart" | t }}</a>
</div>
</div>
</div>
</div>
</script>
{% if section.settings.zoom_enable %}
{% render 'zoom-pswp' %}
{% endif %}
<script data-product-json type="application/json">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
This is my Sections\product.liquid file:
<div class="product-section"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-video-looping="{{ section.settings.enable_video_looping }}"
data-product-align="{{ section.settings.align }}"
data-enable-history-state="true">
{% render 'product', product: product, section: section, collection: collection %}
</div>
{% schema %}
{
"name": "Product page",
"settings": [
{
"type": "header",
"content": "Product tabs"
},
{
"type": "select",
"id": "style",
"label": "Tab style",
"default": "tabs",
"options": [
{ "value": "none", "label": "None" },
{ "value": "tabs", "label": "Tabs" },
{ "value": "accordions", "label": "Accordions" }
],
"info": "Add tab content blocks above. Lean more about [product tabs](https://groupthought.com/link/pipeline/docs/tabs)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "image_width",
"label": "Image width",
"default": "wide",
"options": [
{ "value": "full", "label": "Full width image"},
{ "value": "wide", "label": "Wide image"},
{ "value": "half", "label": "Balanced"},
{ "value": "narrow", "label": "Narrow image"}
]
},
{
"type": "select",
"id": "align",
"label": "Text alignment",
"default": "left",
"options": [
{ "value": "center", "label": "Center"},
{ "value": "left", "label": "Left"}
]
},
{
"type": "select",
"id": "variant_form",
"label": "Variant option style",
"options": [
{ "value": "button", "label": "Buttons"},
{ "value": "dropdown", "label": "Dropdown"}
]
},
{
"type": "checkbox",
"id": "product_breadcrumbs",
"label": "Show breadcrumbs",
"default": true
},
{
"type": "checkbox",
"id": "show_quantity",
"label": "Show quantity selection",
"default": true
},
{
"type": "checkbox",
"id": "show_remaining",
"label": "Show inventory countdown",
"default": true,
"info": "Count down the last 10 items in stock."
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn More](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "product_show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "social_enable",
"label": "Enable social buttons",
"default": false
},
{
"type": "header",
"content": "Media",
"info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": true
},
{
"type": "checkbox",
"id": "zoom_enable",
"label": "Enable image zoom",
"default": true
},
{
"type": "header",
"content": "Subscriptions",
"info": "Learn more about [subscriptions](https://help.shopify.com/en/manual/products/subscriptions)"
},
{
"type": "checkbox",
"id": "subscriptions_enable_selectors",
"label": "Enable subscription selectors",
"info": "Shown on products with subscription options",
"default": true
},
{
"type": "header",
"content": "Optional sizing popup"
},
{
"id": "info_page",
"type": "page",
"label": "Select page",
"info": "This popup will show on every product."
}
],
"blocks": [
{
"type": "tab_description",
"name": "Description H6",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Heading 6 titles will be converted to tab headings, tab content will be everything between the Heading 6 titles. [Product Tabs Documentation](https://groupthought.myshopify.com/link/pipeline/docs/tabs)."
}
]
},
{
"type": "tab_richtext",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Text tab",
"info": "Example: Warranty policy"
},
{
"type": "richtext",
"id": "raw_content",
"label": "Tab content",
"default": "<p>This tab content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
}
]
},
{
"type": "tab_html",
"name": "HTML",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "HTML tab",
"info": "Example: Sizing video"
},
{
"type": "html",
"id": "raw_content",
"label": "Tab content",
"default": "<p>This tab content type will accept HTML code for advanced styling. Use this to add video embeds, or other advanced HTML content.</p>"
}
]
},
{
"type": "tab_page",
"name": "Page",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Page tab",
"info": "Example: Size guide"
},
{
"type": "page",
"id": "raw_content",
"label": "Tab content"
}
]
}
]
}
{% endschema %}
I'll be glad to receive your help!
thanks.
its no function that template its can be done custom code
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024