Shopify themes, liquid, logos, and UX
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.
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>
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024