Theme "Maker" Category Text Below Instead Of Above

Lipp97 · ‎10-20-2022

Hello all,

I noticed that with the theme "Maker" the category text is always displayed above the articles.
This is unfortunately not very advantageous due to SEO texts, because they then cover the articles.

The sections can also not be moved.

Could someone tell me how to manage to list the text below the articles?

See: https://three-taps.com/collections/goldschmuck-auf-bambusbasis as an example.

Lipp97 · ‎10-25-2022

Here is my code:

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
  <head>
    <!-- Maker Theme - Version 6.0.3 by Troop Themes - https://troopthemes.com/ -->

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    <link rel="preconnect" href="https://fonts.shopify.com" crossorigin>
    <link rel="preconnect" href="https://monorail-edge.shopifysvc.com">

    <link rel="preload" href="{{ 'theme--critical.css' | asset_url }}" as="style">
    <link rel="preload" href="{{ 'theme--async.css' | asset_url }}" as="style">
    <link rel="preload" href="{{ 'lazysizes.min.js' | asset_url }}" as="script">
    <link rel="preload" href="{{ 'theme.min.js' | asset_url }}" as="script">

    {%- if canonical_url != blank -%}
      <link rel="canonical" href="{{ canonical_url }}">
    {%- endif -%}

    {% if settings.favicon != nil %}
      <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x' }}" type="image/png">
      <link rel="apple-touch-icon" href="{{ settings.favicon | img_url: '180x' }}">
    {% endif %}

    {% render 'framework--social-meta-tags' %}

    {% if request.page_type == 'index' %}
      <title>{{ page_title }}</title>
    {% elsif request.page_type == 'password' %}
      <title>{{ shop.name }}</title>
    {% else %}
      <title>{{ page_title }} | {{ shop.name }}</title>
    {% endif %}

    {% render 'framework--css-variables' %}
    {% render 'partial--css-variables' %}
    {% render 'partial--js-variables' %}

    <script>
      function onLoadStylesheet() {
        const link = document.querySelector(`link[href="${theme.assets.stylesheet}"]`);
        link.loaded = true;
        link.dispatchEvent(new Event('load'));
      }
    </script>
    <noscript>
      <style>
        body .layout--main-content > *,
        body .header--root,
        body .footer--root,
        body .popup-modal-close,
        body .modal--root,
        body .modal--window {
          opacity: 1;
        }
      </style>

      <link href="{{ 'theme--async.css' | asset_url }}" rel="stylesheet">
    </noscript>

    <link href="{{ 'theme--critical.css' | asset_url }}" rel="stylesheet" media="all"/>
    <link
      href="{{ 'theme--async.css' | asset_url }}"
      rel="stylesheet"
      media="print"
      onload="this.media='all';onLoadStylesheet()"
    >

    <style>{% render 'custom-styles' %}</style>

    <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
    <script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>

    {% if request.page_type contains 'customers' %}
      <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
      <script src="{{ 'customer_area.js' | shopify_asset_url }}" defer="defer"></script>
    {% endif %}

    {{ content_for_header }}
  </head>

  <body
    class="template--{{ template | split: '.' | first | remove: '_' | replace: '/', '--' }} page--{{ page_title | handle }}{% if customer %} customer-logged-in{% endif %}"
    data-theme-id="765"
    data-theme-name="Maker"
    data-theme-version="6.0.3"
    data-tabbing="false"
  >
    {% unless request.page_type == 'password' %}
      <a data-item="a11y-button" href='#main-content'>
        {{ 'general.skip_link' | t }}
      </a>

      <div
        class="off-canvas--viewport"
        data-js-class="OffCanvas"
        data-off-canvas--state="closed"
      >
        <div class="off-canvas--overlay" data-js-class="Transition"></div>
        <div
          aria-label="{{ 'general.close' | t }}"
          data-js-class="Transition"
          data-off-canvas--close
        >
          {% render 'framework--icons', icon: 'cross' %}
        </div>

        <div class="off-canvas--main-content">
          {% section 'announcement' %}
          {% section 'header' %}
    {% endunless %}

    <main role="main" class="layout--main-content" id="main-content">
      {{ content_for_layout }}
    </main>

    {% unless request.page_type == 'password' %}
          {% section 'framework--footer' %}
          {% render 'partial--popup', component: 'main' %}
        </div>

        <div
          class="off-canvas--right-sidebar"
          data-active="cart"
          data-js-class="Transition"
        >
          <div class="off-canvas--focus-trigger" tabindex="0"></div>

          {% if request.page_type == 'product' %}
            <div class="off-canvas--container" data-view="pickup"></div>
          {% endif %}

          {% if request.page_type == 'collection' %}
            <div class="off-canvas--container" data-view="collection-filter"></div>
          {% endif %}

          {% if settings.product--quick-add-enabled %}
            <div class="off-canvas--container" data-view="product-form"></div>
          {% endif %}

          {% if settings.cart--type == 'drawer' or settings.product--quick-add-enabled %}
            <div class="off-canvas--container" data-view="cart">
              {% render 'framework--cart', view: 'mobile', is_drawer: true %}
            </div>
          {% endif %}

          <div class="off-canvas--focus-trigger" tabindex="0"></div>
        </div>

        <div
          class="off-canvas--left-sidebar"
          data-active="menu"
          data-js-class="Transition"
        >
          <div class="off-canvas--focus-trigger" tabindex="0"></div>

          <div class="off-canvas--container" data-view="menu">
            {% render 'layout--mobile-nav' %}
          </div>

          <div class="off-canvas--focus-trigger" tabindex="0"></div>
        </div>

      </div>

      {% render 'framework--feedback-bar' %}
      {% render 'framework--search', view: 'modal' %}
      {% render 'framework--modal' %}

    {% endunless%}
a.featured-card.featured-card--contain {
    display: flex;
    flex-direction: column-reverse;
}
  </body>
</html>

Theme "Maker" Category Text Below Instead Of Above

Theme "Maker" Category Text Below Instead Of Above

Community Blog Articles