How to add "add to cart" button on my collection page - Prestige theme

AdamAnas
Excursionist
23 1 6

I need to add "add to cart" button on my collection page - Prestige theme, Collection.template.liquid Code below

{%- if section.settings.show_layout_switch -%}
  {%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%}
  {%- assign mobile_items_per_row  = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}

  {%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%}
    {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%}
  {%- endif -%}
{%- else -%}
  {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%}
  {%- assign mobile_items_per_row  = section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- endif -%}

{%- if desktop_items_per_row == 4 -%}
  {%- assign tablet_items_per_row = 3 -%}
{%- else -%}
  {%- assign tablet_items_per_row = 2 -%}
{%- endif -%}

{%- capture collection_inner -%}
  {%- comment -%}This is the common part to both template{%- endcomment -%}

  {%- if collection.products_count > 0 -%}
    {%- paginate collection.products by section.settings.grid_items_per_page -%}
      <div class="ProductListWrapper">
        <div class="ProductList ProductList--grid {% if paginate.pages > 1 %}ProductList--removeMargin{% endif %} Grid" data-mobile-count="{{ mobile_items_per_row }}" data-desktop-count="{{ desktop_items_per_row }}">
          {%- for product in collection.products -%}
            <div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}">
              {%- include 'product-item', show_product_info: true, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
            </div>
          {%- endfor -%}
        </div>
      </div>
<form action="/cart/add" method="post">
{% if collection.products_count > 0 -%}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select>
{% endif %}
<div><button type="submit" name="add">Add to cart</button></div>  
</form>


      {%- include 'pagination' -%}
    {%- endpaginate -%}
  {%- else -%}
    <div class="EmptyState">
      <div class="Container">
        <h1 class="EmptyState__Title Heading u-h5">{{ 'collection.general.no_products' | t }}</h1>
        <button class="EmptyState__Action Button Button--primary" data-action="reset-tags">{{ 'collection.general.reset' | t }}</button>
      </div>
    </div>
  {%- endif -%}
{%- endcapture -%}

{%- if template == 'collection.ajax' -%}
  {%- comment -%}
  --------------------------------------------------------------------------------------------------------------------
  CONTENT FOR AJAX ALTERNATE TEMPLATE
  --------------------------------------------------------------------------------------------------------------------
  {%- endcomment -%}

  {%- layout none -%}
  {{- collection_inner -}}

{%- else -%}
  {%- comment -%}
  --------------------------------------------------------------------------------------------------------------------
  CONTENT FOR NORMAL TEMPLATE
  --------------------------------------------------------------------------------------------------------------------
  {%- endcomment -%}

  {%- assign active_tags = '' -%}

  {%- for tag in current_tags -%}
    {%- assign tag_as_handle = tag | replace: '&#39;', '' | replace: '&#34;', '' | handle -%}
    {%- assign active_tags = active_tags | append: tag_as_handle -%}

    {%- unless forloop.last -%}
      {%- assign active_tags = active_tags | append: '+' -%}
    {%- endunless -%}
  {%- endfor -%}

  {%- capture section_settings -%}
  {
    "collectionUrl": {{ collection.url | default: '/collections/all' | json }},
    "currentTags": {% if active_tags != blank %}{{ active_tags | split: '+' | json }}{% else %}[]{% endif %},
    "sortBy": {{ collection.sort_by | default: collection.default_sort_by | json }},
    "filterPosition": {{ section.settings.filter_position | json }}
  }
  {%- endcapture -%}

  <section data-section-id="{{ section.id }}" data-section-type="collection" data-section-settings='{{ section_settings }}'>
    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    COLLECTION INFO
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- if section.settings.show_collection_info and collection.all_products_count > 0 -%}
      {%- if section.settings.show_collection_image and collection.image and collection.template_suffix != 'no-image' -%}
        <div class="FlexboxIeFix">
        <header class="PageHeader PageHeader--withBackground {% if section.settings.collection_image_size != 'normal' %}PageHeader--{{ section.settings.collection_image_size }}{% endif %}" style="background: url({{ collection.image | img_url: '1x1', format: 'jpg' }})">
          <div class="PageHeader__ImageWrapper Image--lazyLoad Image--fadeIn Image--contrast"
               data-optimumx="1.2"
               data-bgset="{{ collection.image | img_url: '600x' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">
          </div>

          <noscript>
            <div class="PageHeader__ImageWrapper Image--contrast" style="background-image: url({{ collection.image | img_url: '800x' }})"></div>
          </noscript>

          <div class="Container">
            <div class="SectionHeader SectionHeader--center">
              <h1 class="SectionHeader__Heading Heading u-h1">{{ collection.title }}</h1>

              {%- if collection.description != blank -%}
                <div class="SectionHeader__Description Rte">
                  {{- collection.description -}}
                </div>
              {%- endif -%}
            </div>
          </div>
        </header>
        </div>
      {%- else -%}
        <header class="PageHeader">
          <div class="Container">
            <div class="SectionHeader SectionHeader--center">
              <h1 class="SectionHeader__Heading Heading u-h1">{{ collection.title }}</h1>

              {%- if collection.description != blank -%}
                <div class="SectionHeader__Description Rte">
                  {{- collection.description -}}
                </div>
              {%- endif -%}
            </div>
          </div>
        </header>
      {%- endif -%}
    {%- endif -%}

    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    COLLECTION TOOLBAR
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- if collection.all_products_count > 0 -%}
      {%- comment -%}
      In order to provide more predictable results (for instance not showing filters by tag even if the option is checked in settings,
      but that there are no tags for the given collection to show), we are doing some more logic here. Basically, we try to check if there
      are tags to show by stripping internal tags (those that start by "__")
      {%- endcomment -%}

      {%- assign has_visible_tags = false -%}

      {%- case section.settings.filter_mode -%}
        {%- when 'tag' -%}
          {%- for tag in collection.all_tags -%}
            {%- unless tag contains '__' -%}
              {%- assign has_visible_tags = true -%}
              {%- break -%}
            {%- endunless -%}
          {%- endfor -%}

        {%- when 'group' -%}
          {%- for tag in collection.all_tags -%}
            {%- assign tag_parts = tag | split: '_' -%}

            {%- if tag_parts.size == 2 -%}
              {%- assign has_visible_tags = true -%}
            {%- endif -%}
          {%- endfor -%}
      {%- endcase -%}

      {%- assign show_filters = false -%}
      {%- assign quick_links = linklists[section.settings.filter_menu] -%}

      {%- if quick_links != blank or has_visible_tags -%}
        {%- assign show_filters = true -%}
      {%- endif -%}

      {%- capture collection_toolbar -%}
        {%- if show_filters or section.settings.show_sort_by or section.settings.show_layout_switch -%}
          <div class="CollectionToolbar CollectionToolbar--{{ section.settings.toolbar_position }} {% unless section.settings.show_layout_switch and show_filters == false and section.settings.show_sort_by == false %}CollectionToolbar--reverse{% endunless %}">
            {%- if show_filters or section.settings.show_sort_by -%}
              <div class="CollectionToolbar__Group">
                {%- if show_filters -%}
                  <button class="CollectionToolbar__Item CollectionToolbar__Item--filter Heading {% unless current_tags %}Text--subdued{% endunless %} u-h6 {% if section.settings.filter_position != 'drawer' %}hidden-lap-and-up{% endif %}"
                          data-action="open-drawer"
                          data-drawer-id="collection-filter-drawer"
                          aria-label="{{ 'collection.filter.show_filter' | t }}">
                    {{ 'collection.filter.title' | t }} {% if current_tags %}<span class="Text--subdued">({{ current_tags.size }})</span>{% endif %}
                  </button>
                {%- endif -%}

                {%- if section.settings.show_sort_by -%}
                  <button class="CollectionToolbar__Item CollectionToolbar__Item--sort Heading Text--subdued u-h6"
                          aria-label="{{ 'collection.sorting.show_sort' | t }}"
                          aria-haspopup="true"
                          aria-expanded="false"
                          aria-controls="collection-sort-popover">
                    {{ 'collection.sorting.title' | t }} {% include 'icon' with 'select-arrow' %}
                  </button>
                {%- endif -%}
              </div>
            {%- endif -%}

            {%- if section.settings.show_layout_switch -%}
              <div class="CollectionToolbar__Item CollectionToolbar__Item--layout">
                <div class="CollectionToolbar__LayoutSwitch hidden-tablet-and-up">
                  <button aria-label="{{ 'collection.layout.show_one_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 1 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="1">{% include 'icon' with 'wall-1' %}</button>
                  <button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="2">{% include 'icon' with 'wall-2' %}</button>
                </div>

                <div class="CollectionToolbar__LayoutSwitch hidden-phone">
                  <button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="2">{% include 'icon' with 'wall-2' %}</button>
                  <button aria-label="{{ 'collection.layout.show_four_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row >= 3 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="{{ section.settings.grid_desktop_items_per_row }}">{% include 'icon' with 'wall-4' %}</button>
                </div>
              </div>
            {%- endif -%}
          </div>
        {%- endif -%}
      {%- endcapture -%}

      {%- comment -%}
      --------------------------------------------------------------------------------------------------------------------
      FILTERS AND SORT BY POPOVER
      --------------------------------------------------------------------------------------------------------------------
      {%- endcomment -%}

      {%- if show_filters -%}
        {%- comment -%}
        Implementation note: the filters can be displayed in two different ways: in a sidebar menu, always visible, or in a drawer. Due to that, we are
        setting the general code here, and then we will output it twice.
        {%- endcomment -%}

        {%- assign quick_links = linklists[section.settings.filter_menu] -%}

        {%- capture filters_content -%}
          {%- if quick_links != empty -%}
            <div class="Collapsible Collapsible--padded Collapsible--autoExpand">
              <button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
                {{- quick_links.title | escape -}} <span class="Collapsible__Plus"></span>
              </button>

              <div class="Collapsible__Inner">
                <div class="Collapsible__Content">
                  <ul class="Linklist">
                    {%- for link in quick_links.links -%}
                      <li class="Linklist__Item {% if link.active %}is-selected{% endif %}">
                        <a href="{{ link.url }}" class="Link Link--primary Text--subdued {% if link.active %}is-active{% endif %}">{{ link.title | escape }}</a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
              </div>
            </div>
          {%- endif -%}

          {%- if has_visible_tags -%}
            {%- if section.settings.filter_mode == 'tag' -%}
              <div class="Collapsible Collapsible--padded Collapsible--autoExpand">
                <button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
                  {{- 'collection.filter.all' | t -}} <span class="Collapsible__Plus"></span>
                </button>

                <div class="Collapsible__Inner">
                  <div class="Collapsible__Content">
                    <ul class="Linklist">
                      {%- for tag in collection.all_tags -%}
                        {%- if tag contains '__' -%}
                          {%- continue -%}
                        {%- endif -%}

                        <li class="Linklist__Item">
                          <button type="button" class="Link Link--primary Text--subdued {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
                            {{- tag -}}
                          </button>
                        </li>
                      {%- endfor -%}
                    </ul>
                  </div>
                </div>
              </div>
            {%- else -%}
              {%- assign groups = '' -%}

              {%- for tag in collection.all_tags -%}
                {%- assign tag_parts = tag | split: '_' -%}

                {%- if tag_parts.size != 2 -%}
                  {%- continue -%}
                {%- endif -%}

                {%- assign groups = groups | append: tag_parts.first | append: ',' -%}
              {% endfor %}

              {%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
              {%- assign groups = groups | split: ',' | compact | uniq -%}

              {%- for group in groups -%}
                {%- assign group_downcase = group | downcase -%}

                {%- if color_label contains group_downcase and section.settings.show_filter_color_swatch -%}
                  {%- assign show_color_swatch = true -%}
                {%- else -%}
                  {%- assign show_color_swatch = false -%}
                {%- endif -%}

                <div class="Collapsible Collapsible--padded Collapsible--autoExpand">
                  <button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
                    {{- group | escape -}} <span class="Collapsible__Plus"></span>
                  </button>

                  <div class="Collapsible__Inner">
                    <div class="Collapsible__Content">
                      <ul class="{% if show_color_swatch %}ColorSwatchList HorizontalList HorizontalList--spacingTight{% else %}Linklist{% endif %}">
                        {%- for tag in collection.all_tags -%}
                          {%- assign tag_parts = tag | split: '_' -%}

                          {%- if tag_parts.first != group -%}
                            {%- continue -%}
                          {%- endif -%}

                          {%- if show_color_swatch -%}
                            <li class="HorizontalList__Item">
                              <button type="button" class="ColorSwatch {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag" data-tooltip="{{ tag_parts.last | escape }}" style="background-color: {{ tag_parts.last | split: ' ' | last | handle }}; background-image: url({{ tag_parts.last | handle | append: '.png' | asset_url }})">
                                <span class="u-visually-hidden">{{ tag_parts.last }}</span>
                              </button>
                            </li>
                          {%- else -%}
                            <li class="Linklist__Item {% if current_tags contains tag %}is-selected{% endif %}">
                              <button type="button" class="Text--subdued Link Link--primary {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
                                {{- tag_parts.last -}}
                              </button>
                            </li>
                          {%- endif -%}
                        {%- endfor -%}
                      </ul>
                    </div>
                  </div>
                </div>
              {%- endfor -%}
            {%- endif -%}
          {%- endif -%}
        {%- endcapture -%}

        <div id="collection-filter-drawer" class="CollectionFilters Drawer Drawer--secondary Drawer--fromRight" aria-hidden="true">
          <header class="Drawer__Header Drawer__Header--bordered Drawer__Header--center Drawer__Container">
            <span class="Drawer__Title Heading u-h4">{{ 'collection.filter.all' | t }}</span>

            <button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="collection-filter-drawer" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
              {%- include 'icon' with 'close' -%}
            </button>
          </header>

          <div class="Drawer__Content">
            <div class="Drawer__Main" data-scrollable>
              {{ filters_content }}
            </div>

            <div class="Drawer__Footer Drawer__Footer--padded" data-drawer-animated-bottom>
              <div class="ButtonGroup">
                <button type="button" class="ButtonGroup__Item Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
                <button type="button" class="ButtonGroup__Item ButtonGroup__Item--expand Button Button--primary" data-action="apply-tags">{{ 'collection.filter.apply' | t }}</button>
              </div>
            </div>
          </div>
        </div>
      {%- endif -%}

      {%- if section.settings.show_sort_by -%}
        <div id="collection-sort-popover" class="Popover" aria-hidden="true">
          {%- assign current_sort_by = collection.sort_by | default: collection.default_sort_by -%}

          <header class="Popover__Header">
            <button class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% include 'icon' with 'close' %}</button>
            <span class="Popover__Title Heading u-h4">{{ 'collection.sorting.title' | t }}</span>
          </header>

          <div class="Popover__Content">
            <div class="Popover__ValueList" data-scrollable>
              {%- assign sort_by_list = 'manual,price-ascending,price-descending,title-ascending,title-descending,created-ascending,created-descending,best-selling' | split: ',' -%}

              {%- for sort_by in sort_by_list -%}
                <button class="Popover__Value {% if current_sort_by == sort_by %}is-selected{% endif %} Heading Link Link--primary u-h6" data-value="{{ sort_by }}" data-action="select-value">
                  {{- 'collection.sorting.' | append: sort_by | replace: '-', '_' | t -}}
                </button>
              {%- endfor -%}
            </div>
          </div>
        </div>
      {%- endif -%}

      {%- comment -%}
      --------------------------------------------------------------------------------------------------------------------
      COLLECTION PRODUCTS
      --------------------------------------------------------------------------------------------------------------------
      {%- endcomment -%}

      <div class="CollectionMain">
        {%- if section.settings.toolbar_position == 'top' -%}
          {{- collection_toolbar -}}
        {%- endif -%}

        <div class="CollectionInner">
          {%- if show_filters and section.settings.filter_position == 'sidebar' -%}
            <div class="CollectionInner__Sidebar {% if collection_toolbar != blank and section.settings.toolbar_position == 'top' %}CollectionInner__Sidebar--withTopToolbar{% endif %} hidden-pocket">
              <div class="CollectionFilters">
                {{ filters_content }}

                <button type="button" class="Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
              </div>
            </div>
          {%- endif -%}

          <div class="CollectionInner__Products">
            {{ collection_inner }}
          </div>
        </div>

        {%- if section.settings.toolbar_position == 'bottom' -%}
          {{- collection_toolbar -}}
        {%- endif -%}
      </div>
    {%- else -%}
      <div class="EmptyState">
        <div class="Container">
          <h3 class="EmptyState__Title Heading u-h5">{{ 'collection.general.empty' | t: collection_title: collection.title }}</h3>
          <a href="{{ shop.url }}" class="EmptyState__Action Button Button--primary">{{ 'collection.general.empty_button' | t }}</a>
        </div>
      </div>
    {%- endif -%}
  </section>
{%- endif -%}

{%- capture hack -%}
{%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}
{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}
{%- endcapture -%}

{% schema %}
{
  "name": "Collection page",
  "class": "shopify-section--bordered",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_collection_info",
      "label": "Show collection info",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "label": "Show collection image",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_color_swatch",
      "label": "Show color swatch",
      "info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch).",
      "default": false
    },
    {
      "type": "select",
      "id": "collection_image_size",
      "label": "Collection image size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "normal"
    },
    {
      "type": "header",
      "content": "Toolbar"
    },
    {
      "type": "checkbox",
      "id": "show_sort_by",
      "label": "Show sort by",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_layout_switch",
      "label": "Show layout switch"
    },
    {
      "type": "select",
      "id": "toolbar_position",
      "label": "Position",
      "options": [
        {
          "value": "top",
          "label": "Top"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        }
      ],
      "default": "top"
    },
    {
      "type": "header",
      "content": "Filters"
    },
    {
      "type": "select",
      "id": "filter_position",
      "label": "Desktop position",
      "options": [
        {
          "value": "sidebar",
          "label": "Sidebar"
        },
        {
          "value": "drawer",
          "label": "Drawer"
        }
      ],
      "default": "sidebar"
    },
    {
      "type": "select",
      "id": "filter_mode",
      "label": "Mode",
      "info": "Filters by group requires specific tag formatting. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/supply#product-tips-tips-specific)",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "tag",
          "label": "By tag"
        },
        {
          "value": "group",
          "label": "By group"
        }
      ],
      "default": "tag"
    },
    {
      "type": "checkbox",
      "id": "show_filter_color_swatch",
      "label": "Show filter color swatch",
      "info": "This is only used if filters by group is enabled.",
      "default": true
    },
    {
      "type": "link_list",
      "id": "filter_menu",
      "label": "Quick links",
      "info": "This menu won't show dropdown items."
    },
    {
      "type": "header",
      "content": "Grid"
    },
    {
      "type": "range",
      "id": "grid_items_per_page",
      "label": "Products per page",
      "min": 4,
      "max": 48,
      "step": 4,
      "default": 16
    },
    {
      "type": "select",
      "id": "grid_mobile_items_per_row",
      "label": "Products per row (mobile)",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ],
      "default": "2"
    },
    {
      "type": "range",
      "min": 2,
      "max": 4,
      "id": "grid_desktop_items_per_row",
      "label": "Products per row (desktop)",
      "default": 4
    }
  ]
}
{% endschema %}
0 Likes
Dirk
Shopify Staff
Shopify Staff
729 80 165

Hey, @AdamAnas 

 

I was able to find a step-by-step guide here on how you can add the cart buttons to your collection page. The guide isn't made specifically for the 'Prestige' theme so there may be slight differences but it is a useful guide on adding it for most themes.

If there is anything else I can help you with, please let me know.

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
JNHealth
Tourist
4 0 2

If you see Page 10 of the link provided above you'll see that we added the button to the collections page however there are a few caveats. 

1. In the ajaxifying process for Debut theme there is a change to the cartCountSelector. That change isn't necessary but you do need to add .Header__CartCount to cartCountSelector list that is there. This will ensure that the Cart(0) in the header updates.

2. There is still a problem with getting the Cart Drawer to automatically update without refreshing the page. If someone was to click on Cart(2) in the header the cart drawer will open and say there is nothing in the cart. If the person clicks the link to View Cart that appears under the button after they use the add to cart button they are taken to the cart page and the items are there. If the page is refreshed the cart drawer will show correctly from the header cart link. So I'm still trying to figure this out.

3. If you use the Continue Shopping link in the ajaxifying file then you may want to set the href to # to stay on the page instead of going to the products page.

Other than getting the cart drawer to update it seems to be working fairly well. But I can see how having the header say there are items in the cart and then the cart drawer saying there is nothing in the cart will be a frustration point for shoppers. So that's next to figure out, if I can.

0 Likes
Ninthony
Shopify Partner
1626 224 611

In the most recent version of Prestige theme there is a way to update the cart drawer via custom JS. If you go to the custom.js file in your assets folder you should see some directions on how you can hook into their javascript and update the cart drawer, if you know a little js it should make sense to you. I have implemented it on a client's store before when they needed an add to cart button added to their collections, so I know it's possible but it was a little while ago. If you need some help let me know.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
pennywongy
New Member
1 0 0

Hey,Dirk

 

I want to know some details about how add the''add the cart''button in prestige theme.

waiting for your reply,thank you

0 Likes
conv3rsion
New Member
2 0 1

Hello! I am doing exactly that, can you share some directions in how to accomplish that?

thank you!

0 Likes
unofficial2321
Excursionist
16 0 3

@Ninthony  i have added the button in collection page but it's directing to cart page not the cart drawer... can i know how it can be done

0 Likes
Anonymous
Not applicable
1616 0 0

@Ninthony Have you got any solution for the same?

 

0 Likes
Guleria
Shopify Partner
1254 263 344

Hello,

Add this code in product-item.liquid  under Snippets 

 

<button  type="submit" name="add" aria-label="Add to cart" class="ad_to_cart_coll Button Button--primary" id="ad_to_cart" aria-haspopup="dialog" data-add-to-cart="{{ product.variants.first.id }}" data-var_id="{{ product.variants.first.id }}">
          Add to cart</button>
Copy

 

Note: Make it conditional a/to your need.

Next in custom.js under Assets, add this code

 

$('.ad_to_cart_coll').click(function(){    
  var ID = $(this).attr("data-var_id");
  addItemToCart( ID, 1);    // paste your id product number
  $('.cart_dr').trigger( "click" );
});
function addItemToCart(variant_id, qty) {
  data = {
    "id": variant_id,
    "quantity": qty
  }
  jQuery.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: data,
    dataType: 'json',
    success: function() { 
      document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
        bubbles: true  //this code is for prestige theme, is to refresh the cart
      }));
    }   
    
  }); 
 
}
Copy

 

 
Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
gaurav712
New Member
2 0 0

@Guleria Hello, I have added the code as suggested. The "Add to cart" button is now visible but the button seems to not working on click. Can you please help?

0 Likes