Zaawansowane dostosowanie dla Product Reviews

Aplikacja Product Reviews umożliwia dostosowanie wyglądu recenzji, formularzy recenzji i ikon gwiazdek. Próbę wykonania tych dostosowań można podjąć tylko w przypadku dysponowania umiejętnością tworzenia i edytowania kodu CSS, HTML i Liquid, z wykorzystaniem programu edytora tekstu.

Dostosuj CSS

Aplikacja Product Reviews została zaprojektowana w taki sposób, aby jak najlepiej dostosować się do Twojego szablonu. Jednak może być konieczne nadpisanie CSS Product Review w celu dalszego dostosowania wyglądu recenzji oraz formularza recenzji.

Aby dostosować CSS:

  1. Za pomocą edytora tekstu na komputerze utwórz plik z nadpisaniami CSS. Zapisz go jako product-reviews-override.css.

  2. Przejdź do edytora szablonów.

  3. Kliknij opcję Zasoby.

  4. Kliknij opcję Dodaj nowy zasób i załaduj plik product-reviews-override.css.

  5. Przejdź do układu theme.liquid.

  6. Wklej następujący kod bezpośrednio przed </head>.

  {{ "product-reviews-override.css" | asset_url | stylesheet_tag }}  

Dostosuj ikony gwiazdek

Aplikacja Product Reviews używa czcionki sieci Web o nazwie Font Awesome do renderowania każdej ikony gwiazdki. Dzięki temu ikony gwiazdek są wyraźnie widoczne na ekranie o dowolnej rozdzielczości i dziedziczą kolory szablonu.

Jeśli chcesz dostosować wygląd tych ikon, musisz zastąpić czcionkę sieci Web obrazem i nadpisać domyślny arkusz stylów aplikacji Product Reviews.

Aby dostosować ikony gwiazdek:

  1. Utwórz obraz składający się z 4 ikon, każda o wielkości 18 px na 18 px. Ustaw je w pionowej kolumnie, aby uzyskać całkowity rozmiar obrazu 18 px na 72 px:

  2. Przejdź do strony Pliki i załaduj obraz.

  3. Skopiuj adres URL załadowanego obrazu do pliku tekstowego.

  4. Przejdź do układu theme.liquid.

  5. Wklej następujący kod zawierający adres URL załadowanego obrazu bezpośrednio przed </head> i kliknij przycisk Zapisz.

 <style>
  /* All stars */
  .spr-icon {
    background-image: url(&quot;YOUR IMAGE URL GOES HERE&quot;);
    background-position: 0 0;
    display: inline-block;
    position: static;
    top: 0;
    width: 18px;
    height: 18px;
    text-indent: -30000px;
  }</p>

<p>/* Empty star <em>/
  /</em> Shown in New Review form as unselected */
  .spr-icon.spr-icon-star-empty,
  .spr-icon.spr-icon.spr-icon-star-empty {
    background-position: 0 0;
    opacity: 1;
  }</p>

<p>/* Empty star on hover <em>/
  /</em> Displayed when user hovers mouse over an empty star in the review form */
  .spr-icon.spr-icon-star-empty.spr-icon-star-hover {
    background-position: 0 -18px;
  }</p>

<p>/* Full star */
  .spr-icon.spr-icon-star {
    background-position: 0 -36px;
  }</p>

<p>/* Half star <em>/
  /</em> Displayed when a rating is a half value (3.5 stars) */
  .spr-icon.spr-icon-star-half {
    background-position: 0 -54px;
    opacity: 1;
  }
 </style> 

Referencja znacznika HTML

Jeśli edytujesz kod CSS Product Reviews, możesz użyć tej referencji do identyfikowania elementów HTML i ich atrybutów, aby umożliwić ich ukierunkowanie na nie podczas pisania reguł CSS.

 

<div id="shopify-product-reviews">

<p></p><div class="spr-container">
    <div class="spr-header">
      <h2 class="spr-header-title">Recenzje klientów</h2>
      <div class="spr-summary">
        <span class="spr-starrating spr-summary-starrating"> <i class="spr-icon spr-icon-star"></i> <i class="spr-icon spr-icon-star"></i> <i class="spr-icon spr-icon-star-half"></i> <i class="spr-icon spr-icon-star-empty"></i> <i class="spr-icon spr-icon-star-empty"></i> </span> <span class="spr-summary-caption">Nie ma jeszcze recenzji</span> <span class="spr-summary-actions"> <a href="#" class="spr-summary-actions-newreview">Napisz recenzję</a> </span>
      </div> &lt;!-- /.spr-summary --&gt;
    </div> &lt;!-- /.spr-header --&gt;

<pre><code translate="no">&lt;div class="spr-content"&gt;
  &lt;div class="spr-form"&gt;
    &lt;form class="new-review-form"&gt;
      &lt;h3 class="spr-form-title"&gt;Write a review&lt;/h3&gt;
      &lt;fieldset class="spr-form-contact"&gt;
        &lt;div class="spr-form-contact-name"&gt;
          &lt;label class="spr-form-label" for="review_author"&gt;Name&lt;/label&gt;
          &lt;input class="spr-form-input spr-form-input-text" id="review_author" type="text" name="review[author]" value="" placeholder="Enter your name"&gt;
        &lt;/div&gt;
        &lt;div class="spr-form-contact-email"&gt;
          &lt;label class="spr-form-label" for="review_email"&gt;Email&lt;/label&gt;
          &lt;input class="spr-form-input spr-form-input-email" id="review_email" type="email" name="review[email]" value="" placeholder="john.smith@example.com"&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt; &lt;!-- /.spr-form-contact --&gt;

      &lt;fieldset class="spr-form-review"&gt;
        &lt;div class="spr-form-review-rating"&gt;
          &lt;label class="spr-form-label" for="review[rating]"&gt;Rating&lt;/label&gt;
          &lt;div class="spr-form-input spr-starrating "&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.spr-form-review-rating --&gt;

        &lt;div class="spr-form-review-title"&gt;
          &lt;label class="spr-form-label" for="review_title"&gt;Review Title&lt;/label&gt;
          &lt;input class="spr-form-input spr-form-input-text" id="review_title" type="text" name="review[title]" value="" placeholder="Give your review a title"&gt;
        &lt;/div&gt; &lt;!-- /.spr-form-review-title --&gt;

        &lt;div class="spr-form-review-body"&gt;
          &lt;label class="spr-form-label" for="review_body"&gt;Body of Review &lt;span class="spr-form-review-body-charactersremaining"&gt;(1500)&lt;/span&gt;&lt;/label&gt;
          &lt;div class="spr-form-input"&gt;
            &lt;textarea class="spr-form-input spr-form-input-textarea" id="review_body" name="review[body]" rows="10" placeholder="Write your comments here"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.spr-form-review-body --&gt;
      &lt;/fieldset&gt; &lt;!-- /.spr-form-review --&gt;

      &lt;fieldset class="spr-form-actions"&gt;
        &lt;input type="submit" class="spr-button spr-button-primary button button-primary btn btn-primary" value="Submit Review"&gt;
        &lt;input type="button" class="spr-button button btn" value="Cancel"&gt;
      &lt;/fieldset&gt; &lt;!-- /.spr-form-actions --&gt;
    &lt;/form&gt;
  &lt;/div&gt;

  &lt;div class="spr-reviews"&gt;
    &lt;div class="spr-review"&gt;
      &lt;div class="spr-review-header"&gt;
        &lt;span class="spr-starratings spr-review-header-starratings"&gt;
          &lt;i class="spr-icon spr-icon-star"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star-empty"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star-empty"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;h3 class="spr-review-header-title"&gt;I love this product!&lt;/h3&gt;
        &lt;span class="spr-review-header-byline"&gt;&lt;strong&gt;John Appleseed&lt;/strong&gt; on &lt;strong&gt;Jan 26, 2014&lt;/strong&gt;&lt;/span&gt;
      &lt;/div&gt; &lt;!-- /.spr-review-header --&gt;

      &lt;div class="spr-review-content"&gt;
        &lt;p class="spr-review-content-body"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor aliquam lorem, rhoncus tincidunt massa condimentum nec.&lt;/p&gt;
      &lt;/div&gt; &lt;!-- /.spr-review-content --&gt;

      &lt;div class="spr-review-footer"&gt;
        &lt;a href="#" class="spr-review-reportreview"&gt;Report as Inappropriate&lt;/a&gt;
      &lt;/div&gt; &lt;!-- /.spr-review-footer --&gt;
    &lt;/div&gt; &lt;!-- /.spr-review --&gt;
  &lt;/div&gt; &lt;!-- /.spr-reviews --&gt;

&lt;/div&gt; &lt;!-- /.spr-content --&gt;
</code></pre>

<p></p></div> &lt;!-- /.spr-container --&gt;

<p></p></div>

 <!-- /#shopify-product-reviews -->

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo