Intro

When Antecons is installed, recommendations are automatically styled using some in-line styles. If this does not suit your needs, you can apply your own stylesheet to Antecons to make the recommendations fit perfectly with your shop.

Applying automatic styles

Applying your own styles

Your stylesheets are usually found in your Shop Dashboard under Themes - Template Editor - Assets - style.css.liquid.

If you apply your own styles, remember to turn off automatic styles.

A good starting point is probably to add a little bit of margin to the recommendation container and some padding to the individual product recommendations. Something like this:

.antecons { margin-top: 14px; }
.antecons-recommendation { 
    float: left; 
    padding: 10px;
    max-width: 150px;
}

The following sections dig a little deeper.

Layout

Antecons uses a grid layout with rows and columns. You decide how many recommendations to show per row in your shop settings. The recommendations will then be structured based on this setting. Notice that the grid layout by default only provides a basic structure for the recommendations. No styles are added.

The grid layout makes it possible to define in which direction to show recommendations. For example, setting one recommendation per row effectively results in a vertical layout.

CSS classes

The following CSS classes are defined. The indentation of the bullet-points indicate the hierachy of the classes:

• antecons
  All Antecons content is surrounded by a single <div> tag. If you want extra padding or margin for the recommendation list, it is a good idea to style this tag.
  • antecons-header. The header for the recommendation list (e.g. "You might also like").
  • antecons-row. A row of recommendations.
    • antecons-col. A column which is a container for a single recommendation.
      • product or antecons-recommendation. The container for a recommendation.
        • photo. The container for the product photo.
        • title. The title of the product.
        • price. The price of the product.

All the above classes are <div> tags except for antecons-header which is a <h3> tag.

HTML example

Here is an example of how a single recommendation is rendered in HTML:

<div class="antecons">
  <h3 class="antecons-header">You might also like</h3>
  <div class="antecons-row">
    <div class="antecons-col">
      <div class="product antecons-recommendation">
        <div class="photo">
          <a href="/products/cola" title="Cola">
            <img src="a-long-url.jpg" alt="Cola">
          </a>
        </div>
        <div class="title">
          <a href="/products/cola" title="Cola">Cola</a>
        </div>
        <div class="price">
          $0.05
        </div>
      </div>
    </div>
  </div>
</div>

Here is an example of how two recommendations in a single row are rendered in HTML:

<div class="antecons">
  <h3 class="antecons-header">You might also like</h3>
  <div class="antecons-row">
    <div class="antecons-col">
      <div class="product antecons-recommendation">
        <div class="photo">
          <a href="/products/cola" title="Cola">
            <img src="a-long-url.jpg" alt="Cola">
          </a>
        </div>
        <div class="title">
          <a href="/products/cola" title="Cola">Cola</a>
        </div>
        <div class="price">
          $0.05
        </div>
      </div>
    </div>
    <div class="antecons-col">
      <div class="product antecons-recommendation">
        <div class="photo">
          <a href="/products/pbr" title="PBR">
            <img src="a-long-url.jpg" alt="PBR">
          </a>
        </div>
        <div class="title">
          <a href="/products/pbr" title="PBR">PBR</a>
        </div>
        <div class="price">
          $1.00
        </div>
      </div>
    </div>
  </div>
</div>