FROM CACHE - de_header

Theme für Smartphone anpassen

LoganDeLaCruz
Entdecker
36 1 13

Hey Leute,

 

ich konnte leider keinen passenden Thread finden, deswegen entschuldigt bitte, falls die Frage hier schonmal gestellt wurde.

 

Ich habe das Problem, dass sowohl der Highlights-Banner, als auch die Featured Collections auf dem Smartphone abgeschnitten und dadurch hinderlich zu bedienen sind. Meine Frage ist nun, ob man es über den Code so einstellen kann, dass sich beides an den kleineren Smartphone Bildschirm anpasst?

 

Es geht wirklich nur um den Highlights Banner und die Featured Collection, alles andere wird einwandfrei angezeigt.

 

Bildschirmfoto 2022-12-01 um 12.38.17 (2).png

 

In Benutzung ist eine ältere Version des Empire Themes und ich hoffe, dass mir jemand weiterhelfen kann. Nachfolgend noch die Codes für die Featured Collection:

 

{% assign collection = collections[section.settings.collection] %}

{% assign product_limit = 4 %}
{% assign products = collection.products %}
{% assign onboarding = false %}

<script
  type="application/json"
  data-section-id="{{ section.id }}"
  data-section-type="dynamic-featured-collection">
</script>

<section class="product-row--container featured-collection--container">
  {% if section.settings.title != blank %}
    <h1 class="home-section--title">
      {{ section.settings.title | escape }}
    </h1>
  {% endif %}

  <div class="home-section--content product-row" data-product-row>
    {% for product in products limit: product_limit %}
      {%
        include 'product-grid-item',
        product: product
      %}
    {% else %}
      {% for i in (1..product_limit) %}
        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}

        {%- capture placeholder_image -%}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder--image' }}
        {%- endcapture -%}

        {%
          include 'product-grid-item',
          product: false
        %}
      {% endfor %}
    {% endfor %}

    <div
      class="
        productgrid--item
        featured-collection--banner
      "
      {% if section.settings.banner_image %}
        {%
          include 'rimg',
          img: section.settings.banner_image
          size: '500x750',
          crop: 'center',
          background: true,
          lazy: true
        %}
      {% endif %}
    >
      {% if section.settings.banner_image %}
        {%
          include 'rimg',
          img: section.settings.banner_image
          size: '500x750',
          crop: 'center',
          canvas: true,
          lazy: true
        %}
      {% endif %}

      <a class="featured-collection--banner-outer" href="{% if collection.url != blank %}{{ collection.url }}{% else %}#{% endif %}">
        <div class="featured-collection--banner-inner">
          <span class="featured-collection--banner-subtitle">
            {{ 'onboarding.featured_collection.subtitle' | t }}
          </span>

          <h2 class="featured-collection--banner-title">
            {% unless onboarding %}
              {{ collection.title | escape }}
            {% else %}
              {{ 'onboarding.featured_collection.title' | t }}
            {% endunless %}
          </h2>
        </div>
      </a>
    </div>

  </div>
</section>

<style>
  #shopify-section-{{section.id}} .featured-collection--banner {
    color: {{ section.settings.banner_color }};

    {% unless section.settings.banner_image %}
      background-color: {{ settings.color_links }};
    {% endunless %}
  }
</style>

{% schema %}
{
  "name": "Featured collection",
  "class": "featured-collection--section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Featured collection"
    },
    {
      "id": "collection",
      "type": "collection",
      "label": "Collection"
    },
    {
      "type": "header",
      "content": "Call to action"
    },
    {
      "type": "color",
      "id": "banner_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "id": "banner_image",
      "type": "image_picker",
      "label": "Image",
      "info": "500 x 750px .jpg recommended"
    }
  ],
  "presets": [
    {
      "name": "Featured collection",
      "category": "Collection"
    }
  ]
}

{% endschema %}

Sowie den Highlight Banner:

 

<script
  type="application/json"
  data-section-type="static-highlights-banners"
  data-section-id="{{ section.id }}">
</script>

{% if section.settings.show_highlights_banner and section.blocks.size > 0 %}
  <style>
    .highlights-banners-container {
      background-color: {{ section.settings.background_color }};
    }

    .highlights-banners:before {
      background: linear-gradient( to right, {{ section.settings.background_color }} 10%, {{ section.settings.background_color | color_modify: 'alpha', 0 }} 100%);
    }

    .highlights-banners:after {
      background: linear-gradient( to left, {{ section.settings.background_color }} 10%, {{ section.settings.background_color | color_modify: 'alpha', 0 }} 100%);
    }

    .highlights-banners-block {
      color: {{ section.settings.color }};
    }

    .highlights-banners-icon {
      color: {{ section.settings.icon_color }};
    }
  </style>

  <div class="highlights-banners-container">
    <div class="highlights-banners highlight-banners-count-{{ section.blocks.size }}">
      {% for block in section.blocks %}
        {% if block.settings.text != blank or block.settings.title != blank %}
          {% if block.settings.link != blank %}
            <a
              class="highlights-banners-block"
              href="{{ block.settings.link }}"
              {{ block.shopify_attributes }}
            >
          {% else %}
            <div
              class="highlights-banners-block"
              {{ block.shopify_attributes }}
            >
          {% endif %}
            {% if block.settings.icon != 'none' or block.settings.image != blank %}
              <div class="highlights-banners-icon">
                {% if block.settings.image != blank %}
                  {%
                    include 'rimg',
                    class: 'highlights-banners-custom-icon',
                    img: block.settings.image,
                    size: '46x'
                  %}
                {% else %}
                  {% include 'icon-library', id: block.settings.icon %}
                {% endif %}
              </div>
            {% endif %}

            <div class="highlights-banners-text">
              {% if block.settings.title != blank %}
                <h4 class="highlights-banners-heading">
                  {{ block.settings.title | escape }}
                </h4>
              {% endif %}

              {% if block.settings.text != blank %}
                {{ block.settings.text | escape }}
              {% endif %}
            </div>
          {% if block.settings.link != blank %}
            </a>
          {% else %}
            </div>
          {% endif %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endif %}

{% schema %}
{
  "name": "Highlights banner",
  "class": "highlights-banners--section",
  "settings": [
    {
      "id": "show_highlights_banner",
      "type": "checkbox",
      "label": "Enable highlights banner",
      "default": true
    },
    {
      "id": "color",
      "type": "color",
      "label": "Text color",
      "default": "#4d4d4d"
    },
    {
      "id": "icon_color",
      "type": "color",
      "label": "Icon color",
      "default": "#4d4d4d"
    },
    {
      "id": "background_color",
      "type": "color",
      "label": "Background color",
      "default": "#f8f8f8"
    }
  ],
  "blocks": [
    {
      "type": "highlight",
      "name": "Highlight",
      "settings": [
        {
          "id": "icon",
          "type": "select",
          "label": "Icon",
          "options": [
            {
              "value": "none",
              "label": "No icon"
            },
            {
              "value": "icon-cell-phone",
              "label": "Cell phone"
            },
            {
              "value": "icon-chat",
              "label": "Chat"
            },
            {
              "value": "icon-chat-alternate",
              "label": "Chat alternate"
            },
            {
              "value": "icon-chat-solid",
              "label": "Chat solid"
            },
            {
              "value": "icon-credit-card",
              "label": "Credit card"
            },
            {
              "value": "icon-delivery",
              "label": "Delivery"
            },
            {
              "value": "icon-email",
              "label": "Email"
            },
            {
              "value": "icon-envelope",
              "label": "Envelope"
            },
            {
              "value": "icon-gift-card",
              "label": "Gift card"
            },
            {
              "value": "icon-heart",
              "label": "Heart"
            },
            {
              "value": "icon-label-tag",
              "label": "Label tag"
            },
            {
              "value": "icon-lock-alternate",
              "label": "Lock"
            },
            {
              "value": "icon-people",
              "label": "People"
            },
            {
              "value": "icon-people-alternate",
              "label": "People alternate"
            },
            {
              "value": "icon-pin",
              "label": "Pin"
            },
            {
              "value": "icon-pin-solid",
              "label": "Pin solid"
            },
            {
              "value": "icon-question-mark",
              "label": "Question mark"
            },
            {
              "value": "icon-smile",
              "label": "Smile"
            },
            {
              "value": "icon-store",
              "label": "Store"
            },
            {
              "value": "icon-transfer",
              "label": "Transfer"
            }
          ],
          "default": "none"
        },
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image",
          "info": "50x50 recommended. Uploading an image will override any icon selected above."
        },
        {
          "id": "title",
          "type": "text",
          "label": "Heading"
        },
        {
          "id": "text",
          "type": "textarea",
          "label": "Text"
        },
        {
          "id": "link",
          "type": "url",
          "label": "Link"
        }
      ],
      "limit": 4
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-delivery",
          "title": "Free Shipping",
          "text": "When you spend $100+"
        }
      },
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-cell-phone",
          "title": "Give Us A Call",
          "text": "+1 (201) 555-5555"
        }
      },
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-chat-alternate",
          "title": "Chat With Us",
          "text": "We offer 24-hour chat support"
        }
      },
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-pin",
          "title": "Locations",
          "text": "Find a store near you"
        }
      }
    ]
  }
}

{% endschema %}

Ich hoffe jemand Blickt da durch und ich bedanke mich im vorraus 🙂

 

 

1 ANTWORT 1

Gabe
Shopify Staff
18021 2849 4195

Besprechen wir gerade hier.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog