Avansert tilpasning for produktomtaler
Produktomtaler lar deg tilpasse utseendet til omtalene, gjennomgå skjemaer og stjerneikoner. Du bør bare prøve disse tilpasningene hvis du er komfortabel med å opprette og redigere CSS, HTML og Liquid-kode, og med å bruke et redigeringsprogram.
Tilpass CSS
Produktomtaler ble utviklet for å tilpasse seg temaet så mye som mulig. Du må imidlertid muligens overstyre produktgjennomgang-CSS for å tilpasse utseendet til omtalene og vurderingsskjemaet ytterligere.
Slik tilpasser du CSS:
Bruk et redigeringsprogram på datamaskinen din til å opprette en fil med overstyringen av CSS. Lagre den som
product-reviews-override.css
.Gå til redigeringsprogrammet for temaer.
Klikk på ressurser.
Klikk på Legg til ny ressurs og last opp
product-reviews-override.css
-filen.Gå til theme.liquid-oppsettet.
Lim inn følgende kode rett før
</head>
.
{{ "product-reviews-override.css" | asset_url | stylesheet_tag }}
Tilpass stjerneikoner
Produktomtaler bruker en webskrifttype kalt Font Awesome for å gjengi hvert stjerneikon. Dette lar stjerneikonene se klare ut på alle oppløsningsskjermer og for å arve fargene i temaet ditt.
Hvis du vil tilpasse utseendet til disse ikonene, må du erstatte webskrifttypen med et bilde og overstyre standard stilark for Produktanmeldelser.
Slik tilpasser du stjerneikonene:
Opprett et bilde som består av fire ikoner, 18 piksler ganger 18 piksler hver. Still dem opp i en vertikal kolonne for en total bildestørrelse på 18 piksler ganger 72 piksler:
Gå til filer-siden og last opp bildet.
Kopier nettadressen til det opplastede bildet til en tekstfil.
Gå til theme.liquid-oppsettet.
Lim inn følgende kode, inkludert den opplastede bilde-URL-adressen rett før
</head>
og klikk på Lagre-knappen.
<style>
/* All stars */
.spr-icon {
background-image: url("YOUR IMAGE URL GOES HERE");
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>
HTML-kode-referanse
Hvis du redigerer produktomtale-CSS, kan du bruke denne referansen til å identifisere HTML-elementene og attributtene deres, slik at du kan målrette dem når du skriver CSS-reglene dine.
<div id="shopify-product-reviews">
<p></p><div class="spr-container">
<div class="spr-header">
<h2 class="spr-header-title">Kundeomtaler</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">Ingen omtaler ennå</span> <span class="spr-summary-actions"> <a href="#" class="spr-summary-actions-newreview">Skriv en omtale</a> </span>
</div> <!-- /.spr-summary -->
</div> <!-- /.spr-header -->
<pre><code translate="no"><div class="spr-content">
<div class="spr-form">
<form class="new-review-form">
<h3 class="spr-form-title">Write a review</h3>
<fieldset class="spr-form-contact">
<div class="spr-form-contact-name">
<label class="spr-form-label" for="review_author">Name</label>
<input class="spr-form-input spr-form-input-text" id="review_author" type="text" name="review[author]" value="" placeholder="Enter your name">
</div>
<div class="spr-form-contact-email">
<label class="spr-form-label" for="review_email">Email</label>
<input class="spr-form-input spr-form-input-email" id="review_email" type="email" name="review[email]" value="" placeholder="john.smith@example.com">
</div>
</fieldset> <!-- /.spr-form-contact -->
<fieldset class="spr-form-review">
<div class="spr-form-review-rating">
<label class="spr-form-label" for="review[rating]">Rating</label>
<div class="spr-form-input spr-starrating ">
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
</div>
</div> <!-- /.spr-form-review-rating -->
<div class="spr-form-review-title">
<label class="spr-form-label" for="review_title">Review Title</label>
<input class="spr-form-input spr-form-input-text" id="review_title" type="text" name="review[title]" value="" placeholder="Give your review a title">
</div> <!-- /.spr-form-review-title -->
<div class="spr-form-review-body">
<label class="spr-form-label" for="review_body">Body of Review <span class="spr-form-review-body-charactersremaining">(1500)</span></label>
<div class="spr-form-input">
<textarea class="spr-form-input spr-form-input-textarea" id="review_body" name="review[body]" rows="10" placeholder="Write your comments here"></textarea>
</div>
</div> <!-- /.spr-form-review-body -->
</fieldset> <!-- /.spr-form-review -->
<fieldset class="spr-form-actions">
<input type="submit" class="spr-button spr-button-primary button button-primary btn btn-primary" value="Submit Review">
<input type="button" class="spr-button button btn" value="Cancel">
</fieldset> <!-- /.spr-form-actions -->
</form>
</div>
<div class="spr-reviews">
<div class="spr-review">
<div class="spr-review-header">
<span class="spr-starratings spr-review-header-starratings">
<i class="spr-icon spr-icon-star"></i>
<i class="spr-icon spr-icon-star"></i>
<i class="spr-icon spr-icon-star"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
</span>
<h3 class="spr-review-header-title">I love this product!</h3>
<span class="spr-review-header-byline"><strong>John Appleseed</strong> on <strong>Jan 26, 2014</strong></span>
</div> <!-- /.spr-review-header -->
<div class="spr-review-content">
<p class="spr-review-content-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor aliquam lorem, rhoncus tincidunt massa condimentum nec.</p>
</div> <!-- /.spr-review-content -->
<div class="spr-review-footer">
<a href="#" class="spr-review-reportreview">Report as Inappropriate</a>
</div> <!-- /.spr-review-footer -->
</div> <!-- /.spr-review -->
</div> <!-- /.spr-reviews -->
</div> <!-- /.spr-content -->
</code></pre>
<p></p></div> <!-- /.spr-container -->
<p></p></div>
<!-- /#shopify-product-reviews -->