Solved

Can you change a button link in Shopify using code?

JKIRK
Excursionist
55 0 7

Hi,

 

I am trying to change the link of a button from a collection to a link, here is the code:

 

</div>

{%- if block.settings.button_text != blank -%}
<div class="Container">
<div class="SectionFooter">
<a href="{{ collection.url }}" class="Button Button--primary">{{ block.settings.button_text | escape }}</a>
</div>
</div>
{%- endif -%}
</div>

 

I have tried copying the code from another section but it didn't work.

Copied code:

{%- if section.settings.link_text != blank -%}
<a class="Link Button Button--primary Button--primary">{{ section.settings.link_text | escape }}</a>

 

Thanks

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@JKIRK 

Please try following code 

{%- if section.settings.layout_mode == 'carousel' -%}
  {%- capture flickity_options -%}
  {
    "prevNextButtons": true,
    "pageDots": false,
    "wrapAround": false,
    "contain": true,
    "cellAlign": "center",
    "watchCSS": true,
    "dragThreshold": 8,
    "groupCells": true,
    "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
  }
  {%- endcapture -%}
{%- endif -%}

{%- capture section_settings -%}
{
  "layout": {{ section.settings.layout_mode | json }}
}
{%- endcapture -%}

<section class="Section Section--spacingNormal" data-section-id="{{ section.id }}" data-section-type="featured-collections" data-settings='{{ section_settings }}'>
  <header class="SectionHeader SectionHeader--center">
    <div class="Container">
    {%- if section.settings.title != blank -%}
      <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.title | escape }}</h3>
    {%- endif -%}

    {%- if section.blocks.size > 1 -%}
      <div class="SectionHeader__TabList TabList" role="tablist">
        {%- for block in section.blocks -%}
          {%- assign collection = collections[block.settings.collection] -%}

          <button class="Heading u-h1 TabList__Item {% if forloop.first %}is-active{% endif %}" data-action="toggle-tab" aria-controls="block-{{ block.id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" role="tab">
            {%- if collection != empty -%}
              {{- block.settings.title | default: collection.title -}}
            {%- else -%}
              {{- 'home_page.onboarding.collection_title' | t -}}
            {%- endif -%}
          </button>
        {%- endfor -%}
      </div>
    {%- else -%}
      {%- assign collection = collections[section.blocks.first.settings.collection] -%}

      {%- if collection != empty -%}
        <h2 class="SectionHeader__Heading Heading u-h1">{{ section.blocks.first.settings.title | default: collection.title }}</h2>
      {%- else -%}
        <h2 class="SectionHeader__Heading Heading u-h1">{{ 'home_page.onboarding.collection_title' | t }}</h2>
      {%- endif -%}
    {%- endif -%}
    </div>
  </header>

  {%- for block in section.blocks -%}
    {%- assign collection = collections[block.settings.collection] -%}

    <div class="TabPanel" id="block-{{ block.id }}" aria-hidden="{% if forloop.first %}false{% else %}true{% endif %}" role="tabpanel" {{ block.shopify_attributes }}>
      <div class="ProductListWrapper">
        {%- if collection != empty -%}
          {%- assign item_count = block.settings.grid_items_count -%}

          {%- if collection.products_count < block.settings.grid_items_count -%}
            {%- assign item_count = collection.products_count -%}
          {%- endif -%}

          {%- if section.settings.layout_mode == 'grid' -%}
            <div class="ProductList ProductList--grid ProductList--removeMargin Grid" data-mobile-count="{{ section.settings.grid_mobile_items_per_row }}" data-desktop-count="{{ section.settings.grid_desktop_items_per_row }}">
              {%- for product in collection.products limit: block.settings.grid_items_count -%}
                <div class="Grid__Cell 1/{{ section.settings.grid_mobile_items_per_row }}--phone 1/2--tablet 1/{{ section.settings.grid_desktop_items_per_row }}--lap-and-up">
                  {%- render 'product-item', product: product, show_product_info: section.settings.show_product_info, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
                </div>
              {%- endfor -%}
            </div>
          {%- else -%}
            <div class="ProductList ProductList--carousel Carousel" data-flickity-config='{{ flickity_options }}'>
              {%- for product in collection.products limit: block.settings.grid_items_count -%}
                <div class="Carousel__Cell">
                  {%- render 'product-item', product: product, show_product_info: section.settings.show_product_info, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
                </div>
              {%- endfor -%}
            </div>
          {%- endif -%}
        {%- else -%}
          {%- comment -%}If collection is not set, we use placeholder content for all three layout mode{%- endcomment -%}

          {%- capture products_placeholder -%}
            {%- for i in (1..block.settings.grid_items_count) -%}
              <div class="{% if section.settings.layout_mode == 'grid' %}Grid__Cell 1/{{ section.settings.grid_mobile_items_per_row }}--phone 1/2--tablet-and-up 1/{{ section.settings.grid_desktop_items_per_row }}--lap-and-up{% else %}Carousel__Cell{% endif %}">
                <div class="ProductItem">
                  <div class="ProductItem__Wrapper">

                    <a href="#" class="ProductItem__ImageWrapper">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'ProductItem__Image PlaceholderSvg PlaceholderSvg--dark' }}
                    </a>

                    {%- if section.settings.show_product_info -%}
                      <div class="ProductItem__Info ProductItem__Info--{{ settings.product_info_alignment }}">
                        {%- if section.settings.show_vendor -%}
                          <p class="ProductItem__Vendor Heading">{{ 'home_page.onboarding.vendor_title' | t }}</p>
                        {%- endif -%}

                        <h2 class="ProductItem__Title Heading">{{ 'home_page.onboarding.product_title' | t }}</h2>

                        <div class="ProductItem__PriceList Heading">
                          <span class="ProductItem__Price Price Text--subdued">{{ 3000 | money_without_trailing_zeros }}</span>
                        </div>
                      </div>
                    {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endfor -%}
          {%- endcapture -%}

          {%- if section.settings.layout_mode == 'grid' -%}
            <div class="ProductList ProductList--grid ProductList--removeMargin Grid" data-mobile-count="{{ section.settings.grid_mobile_items_per_row }}" data-desktop-count="{{ section.settings.grid_desktop_items_per_row }}">
              {{ products_placeholder }}
            </div>
          {%- else -%}
            <div class="ProductList ProductList--carousel Carousel" data-flickity-config='{{ flickity_options }}'>
              {{ products_placeholder }}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>

      {%- if block.settings.button_text != blank -%}
        <div class="Container">
          <div class="SectionFooter">
            <a href="{{ block.settings.button_link }}" class="Button Button--primary">{{ block.settings.button_text | escape }}</a>
          </div>
        </div>
      {%- endif -%}
    </div>
  {%- endfor -%}
</section>

{%- 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 -%}
{% if section.settings.layout_mode == 'grid' %}{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}{% endif %}
{%- endcapture -%}

{% schema %}
{
  "name": "Featured collections",
  "class": "shopify-section--bordered",
  "max_blocks": 2,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Sub-heading",
      "default": "Featured collection"
    },
    {
      "type": "select",
      "id": "layout_mode",
      "label": "Layout",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "carousel",
          "label": "Carousel"
        }
      ],
      "default": "grid"
    },
    {
      "type": "checkbox",
      "id": "show_product_info",
      "label": "Show product info",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "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": "header",
      "content": "Grid",
      "info": "Those settings apply only if the layout mode is set to grid."
    },
    {
      "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
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "info": "If none is set, collection title is used."
        },
        {
          "type": "range",
          "id": "grid_items_count",
          "min": 2,
          "max": 50,
          "step": 1,
          "label": "Products to show",
          "default": 8
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "View all products"
        },

		{
          "type": "url",
          "id": "button_link",
          "label": "Button link",
          "default": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Collection",
      "name": "Featured collections",
      "settings": {},
      "blocks": [
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 9 (9)

dmwwebartisan
Shopify Partner
12282 2546 3694

@JKIRK 

Please share your store URL &  share screenshot what do you want !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JKIRK
Excursionist
55 0 7

Hi @dmwwebartisan , thanks for the reply.

 

The website is https://us.apm.mc/

Screenshot 2021-11-23 at 2.19.50 PM.png

Code for the section:

Screenshot 2021-11-23 at 2.21.05 PM.png

 

I want this button to link to a URL instead of the collection.

 

Thanks

dmwwebartisan
Shopify Partner
12282 2546 3694

@JKIRK 

Please check following code

</div>

{%- if block.settings.button_text != blank -%}
<div class="Container">
<div class="SectionFooter">
<a href="please add your custom link" class="Button Button--primary">{{ block.settings.button_text | escape }}</a>
</div>
</div>
{%- endif -%}
</div>

 

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JKIRK
Excursionist
55 0 7

@dmwwebartisan  sorry the code is part of a section which is added to the homepage.

 

I want to edit the section so when I add it to the homepage I can link the button of the section to a URL.

 

The one on the right is what I want to have on the section.

 

Screenshot 2021-11-23 at 3.23.44 PM.pngScreenshot 2021-11-23 at 3.25.17 PM.png

Thanks

dmwwebartisan
Shopify Partner
12282 2546 3694

@JKIRK 

Please share your collection file code .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JKIRK
Excursionist
55 0 7

@dmwwebartisan here is the code:

 

{%- if section.settings.layout_mode == 'carousel' -%}
  {%- capture flickity_options -%}
  {
    "prevNextButtons": true,
    "pageDots": false,
    "wrapAround": false,
    "contain": true,
    "cellAlign": "center",
    "watchCSS": true,
    "dragThreshold": 8,
    "groupCells": true,
    "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
  }
  {%- endcapture -%}
{%- endif -%}

{%- capture section_settings -%}
{
  "layout": {{ section.settings.layout_mode | json }}
}
{%- endcapture -%}

<section class="Section Section--spacingNormal" data-section-id="{{ section.id }}" data-section-type="featured-collections" data-settings='{{ section_settings }}'>
  <header class="SectionHeader SectionHeader--center">
    <div class="Container">
    {%- if section.settings.title != blank -%}
      <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.title | escape }}</h3>
    {%- endif -%}

    {%- if section.blocks.size > 1 -%}
      <div class="SectionHeader__TabList TabList" role="tablist">
        {%- for block in section.blocks -%}
          {%- assign collection = collections[block.settings.collection] -%}

          <button class="Heading u-h1 TabList__Item {% if forloop.first %}is-active{% endif %}" data-action="toggle-tab" aria-controls="block-{{ block.id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" role="tab">
            {%- if collection != empty -%}
              {{- block.settings.title | default: collection.title -}}
            {%- else -%}
              {{- 'home_page.onboarding.collection_title' | t -}}
            {%- endif -%}
          </button>
        {%- endfor -%}
      </div>
    {%- else -%}
      {%- assign collection = collections[section.blocks.first.settings.collection] -%}

      {%- if collection != empty -%}
        <h2 class="SectionHeader__Heading Heading u-h1">{{ section.blocks.first.settings.title | default: collection.title }}</h2>
      {%- else -%}
        <h2 class="SectionHeader__Heading Heading u-h1">{{ 'home_page.onboarding.collection_title' | t }}</h2>
      {%- endif -%}
    {%- endif -%}
    </div>
  </header>

  {%- for block in section.blocks -%}
    {%- assign collection = collections[block.settings.collection] -%}

    <div class="TabPanel" id="block-{{ block.id }}" aria-hidden="{% if forloop.first %}false{% else %}true{% endif %}" role="tabpanel" {{ block.shopify_attributes }}>
      <div class="ProductListWrapper">
        {%- if collection != empty -%}
          {%- assign item_count = block.settings.grid_items_count -%}

          {%- if collection.products_count < block.settings.grid_items_count -%}
            {%- assign item_count = collection.products_count -%}
          {%- endif -%}

          {%- if section.settings.layout_mode == 'grid' -%}
            <div class="ProductList ProductList--grid ProductList--removeMargin Grid" data-mobile-count="{{ section.settings.grid_mobile_items_per_row }}" data-desktop-count="{{ section.settings.grid_desktop_items_per_row }}">
              {%- for product in collection.products limit: block.settings.grid_items_count -%}
                <div class="Grid__Cell 1/{{ section.settings.grid_mobile_items_per_row }}--phone 1/2--tablet 1/{{ section.settings.grid_desktop_items_per_row }}--lap-and-up">
                  {%- render 'product-item', product: product, show_product_info: section.settings.show_product_info, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
                </div>
              {%- endfor -%}
            </div>
          {%- else -%}
            <div class="ProductList ProductList--carousel Carousel" data-flickity-config='{{ flickity_options }}'>
              {%- for product in collection.products limit: block.settings.grid_items_count -%}
                <div class="Carousel__Cell">
                  {%- render 'product-item', product: product, show_product_info: section.settings.show_product_info, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
                </div>
              {%- endfor -%}
            </div>
          {%- endif -%}
        {%- else -%}
          {%- comment -%}If collection is not set, we use placeholder content for all three layout mode{%- endcomment -%}

          {%- capture products_placeholder -%}
            {%- for i in (1..block.settings.grid_items_count) -%}
              <div class="{% if section.settings.layout_mode == 'grid' %}Grid__Cell 1/{{ section.settings.grid_mobile_items_per_row }}--phone 1/2--tablet-and-up 1/{{ section.settings.grid_desktop_items_per_row }}--lap-and-up{% else %}Carousel__Cell{% endif %}">
                <div class="ProductItem">
                  <div class="ProductItem__Wrapper">

                    <a href="#" class="ProductItem__ImageWrapper">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'ProductItem__Image PlaceholderSvg PlaceholderSvg--dark' }}
                    </a>

                    {%- if section.settings.show_product_info -%}
                      <div class="ProductItem__Info ProductItem__Info--{{ settings.product_info_alignment }}">
                        {%- if section.settings.show_vendor -%}
                          <p class="ProductItem__Vendor Heading">{{ 'home_page.onboarding.vendor_title' | t }}</p>
                        {%- endif -%}

                        <h2 class="ProductItem__Title Heading">{{ 'home_page.onboarding.product_title' | t }}</h2>

                        <div class="ProductItem__PriceList Heading">
                          <span class="ProductItem__Price Price Text--subdued">{{ 3000 | money_without_trailing_zeros }}</span>
                        </div>
                      </div>
                    {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endfor -%}
          {%- endcapture -%}

          {%- if section.settings.layout_mode == 'grid' -%}
            <div class="ProductList ProductList--grid ProductList--removeMargin Grid" data-mobile-count="{{ section.settings.grid_mobile_items_per_row }}" data-desktop-count="{{ section.settings.grid_desktop_items_per_row }}">
              {{ products_placeholder }}
            </div>
          {%- else -%}
            <div class="ProductList ProductList--carousel Carousel" data-flickity-config='{{ flickity_options }}'>
              {{ products_placeholder }}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>

      {%- if block.settings.button_text != blank -%}
        <div class="Container">
          <div class="SectionFooter">
            <a href="{{ collection.url }}" class="Button Button--primary">{{ block.settings.button_text | escape }}</a>
          </div>
        </div>
      {%- endif -%}
    </div>
  {%- endfor -%}
</section>

{%- 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 -%}
{% if section.settings.layout_mode == 'grid' %}{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}{% endif %}
{%- endcapture -%}

{% schema %}
{
  "name": "Featured collections",
  "class": "shopify-section--bordered",
  "max_blocks": 2,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Sub-heading",
      "default": "Featured collection"
    },
    {
      "type": "select",
      "id": "layout_mode",
      "label": "Layout",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "carousel",
          "label": "Carousel"
        }
      ],
      "default": "grid"
    },
    {
      "type": "checkbox",
      "id": "show_product_info",
      "label": "Show product info",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "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": "header",
      "content": "Grid",
      "info": "Those settings apply only if the layout mode is set to grid."
    },
    {
      "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
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "info": "If none is set, collection title is used."
        },
        {
          "type": "range",
          "id": "grid_items_count",
          "min": 2,
          "max": 50,
          "step": 1,
          "label": "Products to show",
          "default": 8
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "View all products"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Collection",
      "name": "Featured collections",
      "settings": {},
      "blocks": [
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

 

dmwwebartisan
Shopify Partner
12282 2546 3694

@JKIRK 

 i will check code and send correct solution to you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@JKIRK 

Please try following code 

{%- if section.settings.layout_mode == 'carousel' -%}
  {%- capture flickity_options -%}
  {
    "prevNextButtons": true,
    "pageDots": false,
    "wrapAround": false,
    "contain": true,
    "cellAlign": "center",
    "watchCSS": true,
    "dragThreshold": 8,
    "groupCells": true,
    "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
  }
  {%- endcapture -%}
{%- endif -%}

{%- capture section_settings -%}
{
  "layout": {{ section.settings.layout_mode | json }}
}
{%- endcapture -%}

<section class="Section Section--spacingNormal" data-section-id="{{ section.id }}" data-section-type="featured-collections" data-settings='{{ section_settings }}'>
  <header class="SectionHeader SectionHeader--center">
    <div class="Container">
    {%- if section.settings.title != blank -%}
      <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.title | escape }}</h3>
    {%- endif -%}

    {%- if section.blocks.size > 1 -%}
      <div class="SectionHeader__TabList TabList" role="tablist">
        {%- for block in section.blocks -%}
          {%- assign collection = collections[block.settings.collection] -%}

          <button class="Heading u-h1 TabList__Item {% if forloop.first %}is-active{% endif %}" data-action="toggle-tab" aria-controls="block-{{ block.id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" role="tab">
            {%- if collection != empty -%}
              {{- block.settings.title | default: collection.title -}}
            {%- else -%}
              {{- 'home_page.onboarding.collection_title' | t -}}
            {%- endif -%}
          </button>
        {%- endfor -%}
      </div>
    {%- else -%}
      {%- assign collection = collections[section.blocks.first.settings.collection] -%}

      {%- if collection != empty -%}
        <h2 class="SectionHeader__Heading Heading u-h1">{{ section.blocks.first.settings.title | default: collection.title }}</h2>
      {%- else -%}
        <h2 class="SectionHeader__Heading Heading u-h1">{{ 'home_page.onboarding.collection_title' | t }}</h2>
      {%- endif -%}
    {%- endif -%}
    </div>
  </header>

  {%- for block in section.blocks -%}
    {%- assign collection = collections[block.settings.collection] -%}

    <div class="TabPanel" id="block-{{ block.id }}" aria-hidden="{% if forloop.first %}false{% else %}true{% endif %}" role="tabpanel" {{ block.shopify_attributes }}>
      <div class="ProductListWrapper">
        {%- if collection != empty -%}
          {%- assign item_count = block.settings.grid_items_count -%}

          {%- if collection.products_count < block.settings.grid_items_count -%}
            {%- assign item_count = collection.products_count -%}
          {%- endif -%}

          {%- if section.settings.layout_mode == 'grid' -%}
            <div class="ProductList ProductList--grid ProductList--removeMargin Grid" data-mobile-count="{{ section.settings.grid_mobile_items_per_row }}" data-desktop-count="{{ section.settings.grid_desktop_items_per_row }}">
              {%- for product in collection.products limit: block.settings.grid_items_count -%}
                <div class="Grid__Cell 1/{{ section.settings.grid_mobile_items_per_row }}--phone 1/2--tablet 1/{{ section.settings.grid_desktop_items_per_row }}--lap-and-up">
                  {%- render 'product-item', product: product, show_product_info: section.settings.show_product_info, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
                </div>
              {%- endfor -%}
            </div>
          {%- else -%}
            <div class="ProductList ProductList--carousel Carousel" data-flickity-config='{{ flickity_options }}'>
              {%- for product in collection.products limit: block.settings.grid_items_count -%}
                <div class="Carousel__Cell">
                  {%- render 'product-item', product: product, show_product_info: section.settings.show_product_info, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
                </div>
              {%- endfor -%}
            </div>
          {%- endif -%}
        {%- else -%}
          {%- comment -%}If collection is not set, we use placeholder content for all three layout mode{%- endcomment -%}

          {%- capture products_placeholder -%}
            {%- for i in (1..block.settings.grid_items_count) -%}
              <div class="{% if section.settings.layout_mode == 'grid' %}Grid__Cell 1/{{ section.settings.grid_mobile_items_per_row }}--phone 1/2--tablet-and-up 1/{{ section.settings.grid_desktop_items_per_row }}--lap-and-up{% else %}Carousel__Cell{% endif %}">
                <div class="ProductItem">
                  <div class="ProductItem__Wrapper">

                    <a href="#" class="ProductItem__ImageWrapper">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'ProductItem__Image PlaceholderSvg PlaceholderSvg--dark' }}
                    </a>

                    {%- if section.settings.show_product_info -%}
                      <div class="ProductItem__Info ProductItem__Info--{{ settings.product_info_alignment }}">
                        {%- if section.settings.show_vendor -%}
                          <p class="ProductItem__Vendor Heading">{{ 'home_page.onboarding.vendor_title' | t }}</p>
                        {%- endif -%}

                        <h2 class="ProductItem__Title Heading">{{ 'home_page.onboarding.product_title' | t }}</h2>

                        <div class="ProductItem__PriceList Heading">
                          <span class="ProductItem__Price Price Text--subdued">{{ 3000 | money_without_trailing_zeros }}</span>
                        </div>
                      </div>
                    {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endfor -%}
          {%- endcapture -%}

          {%- if section.settings.layout_mode == 'grid' -%}
            <div class="ProductList ProductList--grid ProductList--removeMargin Grid" data-mobile-count="{{ section.settings.grid_mobile_items_per_row }}" data-desktop-count="{{ section.settings.grid_desktop_items_per_row }}">
              {{ products_placeholder }}
            </div>
          {%- else -%}
            <div class="ProductList ProductList--carousel Carousel" data-flickity-config='{{ flickity_options }}'>
              {{ products_placeholder }}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>

      {%- if block.settings.button_text != blank -%}
        <div class="Container">
          <div class="SectionFooter">
            <a href="{{ block.settings.button_link }}" class="Button Button--primary">{{ block.settings.button_text | escape }}</a>
          </div>
        </div>
      {%- endif -%}
    </div>
  {%- endfor -%}
</section>

{%- 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 -%}
{% if section.settings.layout_mode == 'grid' %}{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}{% endif %}
{%- endcapture -%}

{% schema %}
{
  "name": "Featured collections",
  "class": "shopify-section--bordered",
  "max_blocks": 2,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Sub-heading",
      "default": "Featured collection"
    },
    {
      "type": "select",
      "id": "layout_mode",
      "label": "Layout",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "carousel",
          "label": "Carousel"
        }
      ],
      "default": "grid"
    },
    {
      "type": "checkbox",
      "id": "show_product_info",
      "label": "Show product info",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "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": "header",
      "content": "Grid",
      "info": "Those settings apply only if the layout mode is set to grid."
    },
    {
      "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
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "info": "If none is set, collection title is used."
        },
        {
          "type": "range",
          "id": "grid_items_count",
          "min": 2,
          "max": 50,
          "step": 1,
          "label": "Products to show",
          "default": 8
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "View all products"
        },

		{
          "type": "url",
          "id": "button_link",
          "label": "Button link",
          "default": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Collection",
      "name": "Featured collections",
      "settings": {},
      "blocks": [
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JKIRK
Excursionist
55 0 7

@dmwwebartisan 

 

I get this message when I copy the code.

 

This file contains the following errors:

  • Error: Invalid block 'collection': setting with id="button_link" default must be a string or datasource access path

Thanks