Avanceret tilpasning i Product Reviews

I Product Reviews har du mulighed for at tilpasse udseendet og funktionaliteten for anmeldelser, anmeldelsesformularer og stjerneikoner. Du skal kun forsøge dig med disse tilpasninger, hvis du er fortrolig med at oprette og redigere CSS-, HTML- og Liquid-kode og med at bruge et tekstredigeringsprogram.

Tilpas CSS

Product Reviews er designet til at tilpasse sig dit tema så meget som muligt. Dog skal du muligvis tilsidesætte CSS for Product Reviews for at tilpasse udseende og funktionaliteten for anmeldelser og anmeldelsesformularen yderligere.

Sådan tilpasser du CSS:

  1. Ved hjælp af en teksteditor på din computer skal du oprette en fil med dine tilsidesættelser af CSS. Gem filen som product-reviews-override.css.

  2. Gå til temaeditoren.

  3. Klik på Aktiver.

  4. Klik på Tilføj et nyt aktiv, og upload filen product-reviews-override.css.

  5. Gå til layoutet theme.liquid.

  6. Indsæt følgende kode lige før </head>.

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

Tilpas stjerneikoner

Product Reviews bruger en webskrifttype kaldet Font Awesome til at gengive hvert stjerneikon. Det får stjerneikonerne til at stå skarpt uanset skærmopløsningen og til at overtage farverne i dit tema.

Hvis du vil tilpasse, hvordan ikonerne vises, skal du erstatte webskrifttypen med et billede og tilsidesætte standardtypografiarket for Product Reviews.

Sådan tilpasser du stjerneikoner:

  1. Opret et billede bestående af 4 ikoner på hver 18 px x 18 px. Arranger dem i en lodret kolonne for at få en samlet billedstørrelse på 18 px x 72 px:

  2. Gå til siden Filer, og upload dit billede.

  3. Kopiér webadressen til det uploadede billede ind i en tekstfil.

  4. Gå til dit theme.liquid-layout.

  5. Indsæt følgende kode, inklusive webadressen til dit uploadede bilede, lige før </head>, og klik på knappen Gem.

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

Henvisning til HTML-markering

Hvis du redigerer CSS for Product Reviews, kan du bruge denne henvisning til at identificere HTML-elementerne og deres attributter, så du kan være målrettet mod disse, når du skriver dine CSS-regler.

 

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

<p></p><div class="spr-container">
    <div class="spr-header">
      <h2 class="spr-header-title">Kundeanmeldelser</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">Endnu ingen anmeldelser</span> <span class="spr-summary-actions"> <a href="#" class="spr-summary-actions-newreview">Skriv en anmeldelse</a> </span>
      </div> &lt;1-- /.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 -->

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis