Link Versandkosten in produktkarte

[EM-Partner]

Guten Abend zusammen,

Ich würde gerne einen Link zu den Versandkosten in Produkt Karte haben. Die passenden möglichen Stellen im Produkt.card.liquid habe ich gefunden, auch die stelle direkt unter dem Preis, und dort kann ich es auch einfügen. 

Jedoch ist der Link nicht Klickbar da die Produktkarte selbst nur anwählbar ist. Hättet ist da eine passende Lösung für mich? 

Danke schonmal

LG Dennis

[Ben310 · Accepted solution]

@EM-Partner 

Ich sehe die frage wurde auch in der FB Gruppe gestellt und dass dieser Link ein interner Systemlink ist. Der @Guido_Michele ist auch in dieser Hinsicht ein Experte und kann bestimmt in Auftrag gestellt werden.

Und das scheint eine Anweisung von einer Tiefenprüfung zu sein, ist das richtig? -> "inkl. MwSt. zzgl. Versand" (verlinkt) ist uberall dort am Preis anzugeben, wo das Produkt in den Warenkorb gelegt werden kann - wie hier der Fall".

Meine 2-Cent dazu: Ist es nicht Overkill es doppelt anzeigen zu müssen? Hier handelt es sich um eine nuancierte rechtliche Sache wo das ggf. nicht ganz zutrifft was dein Rechtsberater da sagt, denn der Satz steht dann ja schon 1) auf der PDP, und 2) im nächsten Schritt auf der Cart Page deutlich zu sehen (siehe folgende 2 Screenshots) und das sollte eigentlich rechtlich-gesehen  ausreichen. Warum es doppelt-gemoppelt anzeigen?

Auszug aus der Seite der IT-Rechtskanzlei bzgl.§ 1 Abs. 2 Satz 2 PAngV: wo deutlich gemacht wird, dass die ganze Sache nicht so ganz klar unter den Rechtsexperten ist, und dass ein Anzeigen des Versandkosten Links auch etwas später "im elektronischen Bestellprozess erfolgen kann":

Wir persönlich neigen derzeit der Auffassung zu, dass der BGH mit seiner Entscheidung nicht vorschreiben wollte, dass die konkreten Versandkosten immer direkt bei Aufruf des virtuellen Warenkorbs ausgewiesen werden müssen, sondern dass ein Ausweis der konkreten Versandkosten auch noch an späterer Stelle im elektronischen Bestellprozess erfolgen kann, jedenfalls aber noch rechtzeitig bevor der Kunde die Möglichkeit hat, seine Bestellung abzusenden. Nur eine solche Auslegung halten wir auch für praktikabel.

---

Also denke ich mal, ist dein Shop NICHT unbedingt rechtswidrig wenn du auf der Produktkarte keinen Versandkosten Link einbaust da dieser ja bereits auf der PDP steht und auch auf der Cart Page ja deutlich zu sehen ist. Also, wie gesagt, warum diesen Link doppelt oder dreifach anzeigen, was für mich wie totaler Overkill zu sein scheint... Das hat dir bis jetzt wahrscheinlich viel Arbeit und Stress beschert, nehme ich mal an, die du viel effektiver woanders investieren kannst... 😉

Desweiteren:

Eine Herausforderung besteht darin, dass die gesamte Produktkarte oft als Link zum Produkt definiert ist, was es schwierig macht, einen separaten, innerhalb der Karte funktionierenden Link zu erstellen. Vielleicht ist deswegen dein Link nicht klickbar. Du könntest den CSS anpassen, um sicherzustellen, dass die Links innerhalb der Produktkarte funzen, wie z. B.:

.grid-view-item__link {
    display: block !important;
    position: absolute !important;
}

.product-card__title {
    display: block !important;
    width: max-content !important;
    margin: 0 auto !important;
}

.price {
    display: block !important;
    text-align: center !important;
}

Das kann den Link innerhalb der Produktkarte klickbar machen, indem du die CSS-Eigenschaften änderst - kann aber je nach Theme variieren.

Oder das HTML der Produktkarte anpassen, sprich, den HTML-Code umstrukturieren, insbesondere in Bezug auf die Verwendung von<a>-Anker-Tags, da HTML es nicht erlaubt, <a>-Tags ineinander zu verschachteln. Mehr dazu hier und auch hier.

Oder eben einen standalone Button für den Link zu den Versandbedingungen erstellen, innerhalb der Produktkarte, aber außerhalb des bestehenden<a href>-Links zum Produkt platzieren. So kannst du sicherstellen, dass der Button klickbar ist, ohne dass es zu Konflikten mit dem vorhandenen Link zur Produktseite kommt. Könnte wie folgt aussehen:

<div class="product-card">
  <!-- Bestehende Inhalte der Produktkarte -->
  <button onclick="location.href='LINK_ZU_DEINEN_VERSANDBEDINGUNGEN';" class="shipping-link-button">Versandbedingungen</button>
</div>

Hoffe das hilft dir weiter! 😉

[EM-Partner]

Hallo Ben30,

zunächsteinmal möchte ich dir ganz herzlich für die Zeit & Mühe die du für mein Thema investierst hast, danken.

Du hast das echt fantastisch erörtert und deine persönliche Meinung hinzugefügt. Das finde ich Super und der gleichen Auffassung, das es "to much" ist, bin ich auch. 

Die Meinungen gehen scheinbar sehr auseinander und von Anbieter zu Anbieter, sieht man beide Varianten. Ich möchte allerdings kein Risiko eingehen.

1.

Mit den CSS anweisungen bin ich sichtlich überfordert und habe keine Ahnung, wo sie einzufügen sind. Im "Benutzerdefinierten CSS" auf der Kategorie-Seite geht es nicht.

2.

Im Code selbst weis ich nicht in welche Datei ich es einbetten soll. 

3.

Die Lösung mit dem Button ist sehr cool, aber geht ja dann schienbar auch nicht zwischen dem Preis und dem "Optionen" Button, klickbar,  zu platzieren.

Ich werde wohl oder übel entgegen dem Ratschlag des HB-Rechtsanwalts auf den "Zusatz" verzichten.

Hier nochmal der Code des card-product.liquid, falls noch Ideen und Hilfestellungen kommen. 

Ganz lieben Dank.

Dennis

Spoiler

{% comment %}
  Renders a product card

  Accepts:
  - card_product: {Object} Product Liquid object (optional)
  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_rating: {Boolean} Show the product rating. Default: false
  - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  - show_quick_add: {Boolean} Show the quick add button.
  - section_id: {String} The ID of the section that contains this card.
  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
  - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

  Usage:
  {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == null
      assign ratio = 1
    endif
  -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if extend_height %} card--extend-height{% endif %}
        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
        {% if horizontal_class %} card--horizontal{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
      >
        {%- if card_product.featured_media -%}
          <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                srcset="
                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                "
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
                <img
                  srcset="
                    {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                    {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
                  "
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                  alt=""
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
            </div>
          </div>
        {%- endif -%}
        <div class="card__content">
          <div class="card__information">
            <h3
              class="card__heading"
              {% if card_product.featured_media == null and settings.card_style == 'standard' %}
                id="title-{{ section_id }}-{{ card_product.id }}"
              {% endif %}
            >
              <a
                href="{{ card_product.url }}"
                id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
                class="full-unstyled-link"
                aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
              >
                {{ card_product.title | escape }}
              </a>
            </h3>
          </div>
          <div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3
            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="{{ card_product.url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ card_product.title | escape }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif %}

            <span class="caption-large light">{{ block.settings.description | escape }}</span>
            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}

              <div
                class="rating"
                role="img"
                aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}"
              >
                <span
                  aria-hidden="true"
                  class="rating-star"
                  style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
                ></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">
                  {{- card_product.metafields.reviews.rating.value }} /
                  {{ card_product.metafields.reviews.rating.value.scale_max -}}
                </span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">
                  {{- card_product.metafields.reviews.rating_count }}
                  {{ 'accessibility.total_reviews' | t -}}
                </span>
              </p>
            {%- endif -%}
            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {%- if card_product.quantity_price_breaks_configured? -%}
              <div class="card__information-volume-pricing-note">
                <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
              </div>
            {%- endif -%}
          </div>

        </div>
        {%- if show_quick_add -%}
          <div class="quick-add no-js-hidden">
            {%- liquid
              assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
              assign qty_rules = false
              if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                assign qty_rules = true
              endif
            -%}
            {%- if card_product.variants.size > 1 or qty_rules -%}
              <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-product-url="{{ card_product.url }}"
                >
                  {{ 'products.product.choose_options' | t }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>
              <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
                <div
                  role="dialog"
                  aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
                  aria-modal="true"
                  class="quick-add-modal__content global-settings-popup"
                  tabindex="-1"
                >
                  <button
                    id="ModalClose-{{ card_product.id }}"
                    type="button"
                    class="quick-add-modal__toggle"
                    aria-label="{{ 'accessibility.close' | t }}"
                  >
                    {% render 'icon-close' %}
                  </button>
                  <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
                </div>
              </quick-add-modal>
            {%- else -%}
              <product-form data-section-id="{{ section.id }}">
                {%- form 'product',
                  card_product,
                  id: product_form_id,
                  class: 'form',
                  novalidate: 'novalidate',
                  data-type: 'add-to-cart-form'
                -%}
                  <input
                    type="hidden"
                    name="id"
                    value="{{ card_product.selected_or_first_available_variant.id }}"
                    class="product-variant-id"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                  <button
                    id="{{ product_form_id }}-submit"
                    type="submit"
                    name="add"
                    class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
                    aria-haspopup="dialog"
                    aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                    aria-live="polite"
                    data-sold-out-message="true"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                    <span>
                      {%- if card_product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}
                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- endif -%}
                    </span>
                    <span class="sold-out-message hidden">
                      {{ 'products.product.sold_out' | t }}
                    </span>
                    {%- if horizontal_quick_add -%}
                      <span class="icon-wrap">{% render 'icon-plus' %}</span>
                    {%- endif -%}
                    {%- render 'loading-spinner' -%}
                  </button>
                {%- endform -%}
              </product-form>
            {%- endif -%}
          </div>
        {%- endif -%}
        <div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{%- else -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if extend_height %} card--extend-height{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
      "
      style="--ratio-percent: 100%;"
    >
      <div
        class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
        style="--ratio-percent: 100%;"
      >
        <div class="card__media">
          <div class="media media--transparent">
            {%- if placeholder_image -%}
              {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% render 'price', show_compare_at_price: true %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}

[Gabe]

Hey @EM-Partner 

Ich klinke mich hier auch mal rein! Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Es sieht so aus, als ob du schon eine gute Vorstellung davon hast, wo und wie du den Link zu den Versandbedingungen in deiner Shopify Produktkarte einfügen möchtest und hier ein paar weitere Ansätze, die du verfolgen kannst:

• Anpassung des HTML/CSS: Dies kann eine effektive Lösung sein, um sicherzustellen, dass der Link funktioniert, ohne das Gesamtdesign der Karte zu beeinträchtigen. Für Shopify Themes kann dies jedoch etwas komplex sein, insbesondere wenn du nicht vertraut mit HTML und CSS bist.
• Erstellen eines separaten Buttons: Dies scheint eine praktikable Lösung zu sein, wenn du den Link direkt in der Produktkarte platzieren möchtest, aber Probleme damit hast, ihn innerhalb des bestehenden Produktlinks klickbar zu machen. Der Button kann so gestaltet werden, dass er gut in das Design der Karte passt.

Um den CSS-Code korrekt einzufügen, kannst du im base.css weiteren CSS hinzu ergänzen. 

Wenn du den Code des card-product.liquid genauer untersuchen möchtest, um herauszufinden, wo du den Button oder den Link einfügen könntest, wäre es hilfreich, wenn du mir mitteilst, an welcher Stelle (nach welchem Element) du den Link platzieren möchtest. Auf diese Weise könnte ich dir spezifischere Anweisungen geben.

Um einen klickbaren Link zu den Versandbedingungen in der Shopify Produktkarte zu integrieren, gibt es verschiedene Ansätze, die in der Shopify-Community diskutiert werden:

• Einen eigenständigen Button erstellen: Du kannst einen separaten Button für den Link zu den Versandbedingungen innerhalb der Produktkarte, aber außerhalb des bestehenden <a href>-Links zum Produkt platzieren. Dies stellt sicher, dass der Button klickbar ist, ohne Konflikte mit dem vorhandenen Link zur Produktseite zu verursachen. Ein Beispielcode dafür könnte so aussehen:

<div class="product-card">
  <!-- Bestehende Inhalte der Produktkarte -->
  <button onclick="location.href='LINK_ZU_DEINEN_VERSANDBEDINGUNGEN';" class="shipping-link-button">Versandbedingungen</button>
</div>

Wenn das Problem darin besteht, dass der gesamte Produktkartenbereich als Link fungiert, könntest du versuchen, die CSS-Eigenschaften anzupassen, um sicherzustellen, dass die Links innerhalb der Produktkarte funktionieren. Dies könnte jedoch je nach Theme variieren. Hier ein Beispiel für CSS-Code, der helfen könnte:

.grid-view-item__link {
    display: block !important;
    position: absolute !important;
}

.product-card__title {
    display: block !important;
    width: max-content !important;
    margin: 0 auto !important;
}

.price {
    display: block !important;
    text-align: center !important;
}

Eine weitere Möglichkeit ist, den HTML-Code der Produktkarte umzustrukturieren, um die Verwendung von <a>-Anker-Tags anzupassen. Beachte dabei, dass HTML es nicht erlaubt, <a>-Tags ineinander zu verschachteln.

Es ist wichtig zu erwähnen, dass solche Anpassungen technisches Verständnis erfordern und je nach Theme unterschiedlich sein können. Du solltest Änderungen immer zuerst in einer Testumgebung ausprobieren und eventuell einen Experten hinzuziehen. Außerdem ist es ratsam, ein Backup deines Themes zu erstellen, bevor du den Code bearbeitest.

Diese Informationen basieren auf Diskussionen und Lösungsvorschlägen aus der Shopify Community und zeigen verschiedene Wege auf, wie du einen klickbaren Link zu den Versandbedingungen in der Produktkarte integrieren kannst.

[EM-Partner]

Hallo Gabe,

Danke, dass auch Du mithilfst 🙂

Wenn du den Code des card-product.liquid genauer untersuchen möchtest, um herauszufinden, wo du den Button oder den Link einfügen könntest, wäre es hilfreich, wenn du mir mitteilst, an welcher Stelle (nach welchem Element) du den Link platzieren möchtest. Auf diese Weise könnte ich dir spezifischere Anweisungen geben.

Ich möchte den Link genau zwischen "Preis je Einheit" und "Varianten Button" einfügen. 

In meinem DAWN card.product.liquid müsste das genau Zeile 208 sein.

[Gabe]

@EM-Partner 

Super probiere es in einer Theme-Testumgebung und wenn du nicht weiterkommst wird eine Experte einen 👀 in deinen Theme Code werfen müssen. Hast du schon einen? Du könntest auch einen unserer zertifizierten Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. 

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!