Clickbares Bild-Banner für Ride Theme

[Leicke]

Hallo,

ich möchte im Ride Theme folgendes Bild-Banner mit einem Link ausstatten:

Gibt es dafür ein Code-Snippet? Sollte man das nicht sogar einfach über den Theme-Editor einstellen können? Ein Bild mit Link ist ja durchaus ein häufiges Feature.

Gruß Daniel

[Gabe]

Hey @Leicke 

Meinst du das gesamte Bild klickbar machen? Wenn ja dann ist nicht derzeit ein Feature des Designs des Bild Banners ist und zwar aus guten UX-Design- und Zugänglichkeits-Gründen.

Du hast ja in diesem Block 3 out-of-the-box Elemente die du zu Links machen kannst, wie ich hier demonstriere:

Ich rate dir ab den ganzen Block klickbar zu machen aber:

• Bild-Banner mit Link versehen: Ändere den Code so, dass das gesamte Banner ein Link wird - dafür musst du das <a>-Tag um das Bild-Banner wrappen, um es klickbar zu machen.

<section id="shopify-section-template--22571138056541__image_banner" class="shopify-section section">
  <link href="//mind-mapper.co.uk/cdn/shop/t/225/assets/section-image-banner.css?v=124819179385751388401714137603" rel="stylesheet" type="text/css" media="all">
  <style data-shopify="">
    #Banner-template--22571138056541__image_banner::after {
      opacity: 0.4;
    }
  </style>
  <a href="DEIN_ZIEL_LINK" id="Banner-template--22571138056541__image_banner" class="banner banner--content-align-center banner--content-align-mobile-center banner--large banner--desktop-transparent scroll-trigger animate--fade-in">
    <div class="banner__media media placeholder scroll-trigger animate--fade-in">
      <!-- Dein SVG- oder Bildinhalt hier -->
    </div>
    <div class="banner__content banner__content--bottom-center page-width scroll-trigger animate--slide-in">
      <div class="banner__box content-container content-container--full-width-mobile color-inverse gradient">
        <h2 class="banner__heading inline-richtext h0">
          Taste the World. Mit den Spices von Nural
        </h2>
        <div class="banner__text rte body">
          <p>Give customers details about the banner image(s) or content on the template.</p>
        </div>
        <div class="banner__buttons">
          <a href="/collections/all" class="button button--secondary">Shop all</a>
        </div>
      </div>
    </div>
  </a>
  <style>
    @media (max-width: 767px) {
      #shopify-section-template--22571138056541__image_banner .banner__box .banner__buttons .button--primary {
        font-size: 12px; /* Adjust the font size as needed */
        padding: 8px 16px; /* Adjust the padding as needed */
        line-height: 1.2; /* Adjust line-height if necessary */
      }
    }
  </style>
</section>

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Leicke]

Danke für die Antwort. Ich habe es nun über eine Box aus der Template Vorlage gelöst.