How to move "view all products" button to featured collections section - Minimal theme

New Member
8 0 0

I am using the Minimal theme on my shop. I followed this tutorial for adding a "view all products" button and edited the code in featured-collection.liquid, but the button appears at the bottom of the page (right above the footer) instead of below all of my products on the homepage. I edited the code in featured-collection.liquid according to 

 

Does anyone know how to move this button up so it appears within the featured collection section? Am I missing something?

 

Here's my code for featured-collection.liquid:

 

{% assign featured = section.settings.featured_collection %}
{% assign products_per_row = section.settings.num_per_row %}
{% assign rows = section.settings.num_rows %}
{% assign total_products = products_per_row | times: rows %}

<div data-section-id="{{ section.id }}" data-section-type="featured-products-section">
  {% unless section.settings.title == blank %}
  <div class="section-header section-header--small">
    <h2 class="section-header__title">
      {{ section.settings.title | escape }}
    </h2>
  </div>
  {% endunless %}

  {% case products_per_row %}
    {% when 3 %}
      {% assign grid_item_width = 'medium--one-third post-large--one-third' %}
      {%- assign product_width = 410 -%}
    {% when 4 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-quarter' %}
      {%- assign product_width = 335 -%}
    {% when 5 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-fifth' %}
      {%- assign product_width = 335 -%}
  {% endcase %}

  <div class="grid-uniform">
    {% for product in collections[featured].products limit: total_products %}
      {% assign featured = product %}
      <div class="grid__item {{grid_item_width}}" {{ block.shopify_attributes }}>
        {% include 'product-grid-item' %}
      </div>
    {% else %}
      <div class="grid__item">
        <div class="helper-section">
          <div class="grid-uniform helper-content">
            {% for i in (1..total_products) %}
              <div class="grid__item {{grid_item_width}}">
                <a href="/admin/products" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
                  <span class="grid-link__image">
                    <span class="grid-link__image-centered">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                    </span>
                  </span>
                  <p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
                  <p class="grid-link__meta">
                    <strong>$19.99</strong>
                  </p>
                </a>
              </div>
            {% endfor %}
          </div>
        </div>
        {% if section.settings.show_view_all_button %}
          <div class="text-center">
          <a href="/collections/our-products" class="btn">See All Products</a>
          </div>
    {% endif %}
      </div>
    {% endfor %}
  </div>
</div>



{% schema %}
{
  "name": {
    "de": "Featured Kategorie",
    "en": "Featured collection",
    "es": "Colección destacada",
    "fr": "Collection en vedette",
    "it": "Collezione in evidenza",
    "ja": "特集コレクション",
    "nl": "Uitgelichte collectie",
    "pt-BR": "Coleção em destaque",
    "zh-CN": "特色产品系列",
    "zh-TW": "精選商品系列"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fr": "Titre",
        "it": "Heading",
        "ja": "見出し",
        "nl": "Kop",
        "pt-BR": "Título",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "de": "Featured Kategorie",
        "en": "Featured collection",
        "es": "Colección destacada",
        "fr": "Collection en vedette",
        "it": "Collezione in evidenza",
        "ja": "特集コレクション",
        "nl": "Uitgelichte collectie",
        "pt-BR": "Coleção em destaque",
        "zh-CN": "特色产品系列",
        "zh-TW": "精選商品系列"
      }
    },
    {
      "type": "collection",
      "id": "featured_collection",
      "label": {
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fr": "Collection",
        "it": "Collezione",
        "ja": "コレクション",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      }
    },
    {
      "type": "range",
      "id": "num_per_row",
      "label": {
        "de": "Produkte per Reihe",
        "en": "Products per row",
        "es": "Productos por fila",
        "fr": "Produits par rangée",
        "it": "Prodotti per riga",
        "ja": "行あたりの商品数",
        "nl": "Producten per rij",
        "pt-BR": "Produtos por linha",
        "zh-CN": "每行产品数",
        "zh-TW": "每列產品數"
      },
      "min": 3,
      "max": 5,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "num_rows",
      "label": {
        "de": "Reihen",
        "en": "Rows",
        "es": "Filas",
        "fr": "Rangées",
        "it": "Righe",
        "ja": "行",
        "nl": "Rijen",
        "pt-BR": "Linhas",
        "zh-CN": "行数",
        "zh-TW": "列"
      },
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 1
    },
    {
      "type": "checkbox",
      "id": "vendor_disable",
      "label": {
        "de": "Produktverkäufer anzeigen",
        "en": "Show product vendor",
        "es": "Mostrar proveedor del producto",
        "fr": "Afficher le distributeur du produit",
        "it": "Mostra fornitore prodotto",
        "ja": "商品の販売元を表示する",
        "nl": "Productleverancier weergeven",
        "pt-BR": "Exibir o fornecedor do produto",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      }
    },
    {
      "type": "checkbox",
      "id": "show_sale_circle",
      "label": {
        "de": "Kreis für 'Sonderangebot' anzeigen",
        "en": "Show 'Sale' circle",
        "es": "Mostrar el círculo \"Oferta\"",
        "fr": "Afficher la vignette « Réduction »",
        "it": "Mostra cerchio \"In Offerta\"",
        "ja": "丸で囲んだ「セール」を表示する",
        "nl": "Laat 'Verkoop'-cirkel zien",
        "pt-BR": "Exibir círculo \"Oferta\"",
        "zh-CN": "显示“销售”圆圈",
        "zh-TW": "顯示「特價」圓圈"
      }
    },
    {
      "type": "checkbox",
      "id": "show_sold_out_circle",
      "label": {
        "de": "Kreis für 'Ausverkauft' anzeigen",
        "en": "Show 'Sold out' circle",
        "es": "Mostrar el círculo \"Agotado\"",
        "fr": "Afficher la vignette « Épuisé »",
        "it": "Mostra cerchio \"Esaurito\"",
        "ja": "丸で囲んだ「売り切れ」を表示する",
        "nl": "Laat cirkel 'Uitverkocht' zien",
        "pt-BR": "Exibir círculo \"Esgotado\"",
        "zh-CN": "显示“售罄”圆圈",
        "zh-TW": "顯示「售罄」圓圈"
      }
    },
    {
      "type": "checkbox",
      "id": "center_grid_link",
      "label": {
        "de": "Text unter Produktbildern zentrieren",
        "en": "Center text below product images",
        "es": "Centrar el texto debajo de las imágenes del producto",
        "fr": "Centrer le texte sous les images des produits",
        "it": "Centra il testo sotto le immagini di prodotto",
        "ja": "商品画像下のテキストを中央に寄せる",
        "nl": "Centreer de tekst onder de productafbeeldingen",
        "pt-BR": "Centralizar texto abaixo das imagens do produto",
        "zh-CN": "使产品图片下方的文本居中显示",
        "zh-TW": "將文字置中並置於產品圖片下方"
      }
    },
    {
        "type": "checkbox",
        "id": "show_view_all_button",
        "label": "Display the View All Button"
      }
  ],
  "presets": [
    {
      "name": {
        "de": "Featured Kategorie",
        "en": "Featured collection",
        "es": "Colección destacada",
        "fr": "Collection en vedette",
        "it": "Collezione in evidenza",
        "ja": "特集コレクション",
        "nl": "Uitgelichte collectie",
        "pt-BR": "Coleção em destaque",
        "zh-CN": "特色产品系列",
        "zh-TW": "精選商品系列"
      },
      "category": {
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fr": "Collection",
        "it": "Collezione",
        "ja": "コレクション",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "settings": {
        "title": "Featured collection",
        "featured_collection": "frontpage"
      }
    }
  ]
}
{% endschema %}
0 Likes
New Member
8 0 0

I just looked at everything again and realized that the "view all" button for featured collections isn't showing up at all. The one at the bottom of my page actually links to my blog,

 

So is there something in my code that is causing the button in the featured collections not to appear?

0 Likes
New Member
8 0 0

After looking around the board, I've found the fix for the button not showing. 

 

Instead of pasting the code from Section 2 between lines 54 and 55, You want to paste this code around line 57:

{% endfor %}
</div>
</div>

Now you want to paste the code from section 2 between the two </div> lines.

 

It should now look like this;

 

{% endfor %}
</div>
{% if section.settings.show_view_all_button %}
<div class="text-center">
<a href="/collections/{{ section.settings.featured_collection }}" class="btn">View All</a>
</div>
{% endif %}
</div>

That seemed to do the trick.

 

0 Likes