FROM CACHE - de_header

Clickbares Bild-Banner für Ride Theme

Leicke
Shopify Partner
16 0 2

Hallo,

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

SharedScreenshot.jpg

 

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

2 ANTWORTEN 2

Gabe
Shopify Staff
18047 2853 4197

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.

 

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

Leicke
Shopify Partner
16 0 2

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