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.
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 