Luna by Singlenaut

View Demo Store

Luna

Designed by our friends at Singlenaut, Luna is expertly crafted to shine brightly on any type of desktop, tablet, or mobile device.

Features

  • Responsive and optimized for any type of mobile or desktop device
  • Image slideshow on the Home page
  • Set the number of featured products on the Home page
  • Sort featured products by their order in your admin, newest, number of sales, or number of views
  • Display share buttons for Twitter, Facebook, and Pinterest on Product pages
  • Add links to Twitter and Facebook in the footer
  • Product pages feature a slideshow image gallery for mobile users
  • Display your store’s logo in the header
  • Display a repeating background image on every page
  • Display product inventory bars on Product pages
  • Show a search field in the footer
  • Up-sell products by automatically showing “Related Products” on Product pages

Tips

  • Recommended header image size is 900 pixels wide by any height
  • Recommended Home page slideshow image size is 900 x 500 pixels
  • Use the Home page slideshow to advertise discounts and show off detailed product shots

Customizations

If you're on a paid plan and don't mind getting your hands dirty in the code, then here are a few common advanced customization questions we get for this theme.

Head to Customize Design > Advanced > Layout and find this line of code:

<a href="/products">Products</a></li>{% for page in pages.all limit:2 %}

Replace Products with your preferred title - Shop, Artwork, Classes, etc.

Head to Customize Design > Advanced > Layout and find this line of code:

<a href="/products">Products</a></li>{% for page in pages.all limit:2 %}

Change 2 to the number of custom page links you’d like to include in your top navigation bar.

Head to Customize Design > Advanced > Layout and find this line of code near the bottom:

{% if theme.facebook_username != blank %}
<li><a href="http://facebook.com/{{ theme.facebook_username }}" title="Friend us on Facebook">Facebook</a></li>
{% endif %}

Just after that you can add in your additional social media profile links, for example:

<li><a href="http://instagram.com/username">Instagram</a></li>
<li><a href="http://pinterest.com/yourprofile">Pinterest</a></li>

Head to Customize Design > Advanced > Home, and look for the slideshow code:

{% if theme.image_sets.slideshow.size > 0 %}
  <div class="flexslider">
    <ul class="slides">
      {% for image in theme.image_sets.slideshow %}
      <li><img src="{{ image.url | constrain: 1800 }}"></li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

Remove the rest of the code that follows, and you’re all set.

How can I add a continue shopping button to the Cart page?

Head to Customize Design > Advanced > Cart and look for this piece of code:

<button id="checkout-btn" class="button" type="submit" title="Checkout">Checkout</button>

Right after that, add this code:

<br>
<button type="button" class="button" title="Continue Shopping" onclick="window.location.href='/products'">Continue Shopping</button>

Head to Customize Design > Advanced > CSS and paste the following code at the bottom:

footer ul li {
  text-transform: uppercase
}

How can I add a quantity field to the Product page?

Head to the Customize Design > Advanced > Product page. From there you’ll paste the following bit of code just above the closing </form> tag.

{{ product | product_quantity_input }}

How can I remove the shadow that’s included on product images?

Head over to Customize Design > Advanced > CSS and paste this at the very bottom:

#product_images li img {
  box-shadow: none;
  webkit-box-shadow: none
}

Head to Customize Design > Advanced > Layout and find the following code:

<a href="/products">Products</a></li>
{% for page in pages.all limit:2 %}
  <li {% if page.full_url contains page.url %}class="selected"{% endif %}>{{ page | link_to }}</li>
{% endfor %}

Just after that, you can add in your custom links, for example:

<li><a href="http://example.com">Blog</a></li>
<li><a href="http://instagram.com/username">Instagram</a></li>

How can I display all products on the Home page?

Luna was designed to only display featured products on the Home page. If you want to change how your Home page functions so that it looks like your Products page, you can simply add pagination. To do this head to Customize Design > Advanced > Home and find this entire section:

{% get products from products.all limit:theme.featured_products order:theme.featured_order %}

{% if products != blank %}
  {% for product in products %}
    {% if forloop.first %}
      <ul id="products" class="{% if forloop.length == 1 %}single_product{% endif %}{% if forloop.length == 2 %}double_product{% endif %}">
    {% endif %}
    <li id="product_{{ product.id }}" class="product">
      <a href="{{ product.url }}" title="View {{ product.name | escape }}">
        <div class="product_header">
          <h2>{{ product.name }}</h2>
          <span class="dash"></span>
          <h3>{{ product.default_price | money_with_sign }}</h3>
          {% case product.status %}
          {% when 'active' %}
            {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
          {% when 'sold-out' %}
        <h5>Sold Out</h5>
          {% when 'coming-soon' %}
        <h5>Coming Soon</h5>
          {% endcase %}
        </div>
        <div class="product_thumb">
          <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
        </div>
      </a>
    </li>
    {% if forloop.last %}
      </ul>
    {% endif %}
  {% endfor %}

{% else %}
<p class="alert-noproducts">No products found.</p>
{% endif %}

{% endget %}

Now replace that whole section with this:

{% paginate products from products.current by theme.products_per_page %}

{% if products != blank %}
  {% for product in products %}
    {% if forloop.first %}
      <ul id="products" class="{% if forloop.length == 1 %}single_product{% endif %}{% if forloop.length == 2 %}double_product{% endif %}">
    {% endif %}
    <li id="product_{{ product.id }}" class="product">
      <a href="{{ product.url }}" title="View {{ product.name | escape }}">
        <div class="product_header">
          <h2>{{ product.name }}</h2>
          <span class="dash"></span>
          <h3>{{ product.default_price | money_with_sign }}</h3>
          {% case product.status %}
          {% when 'active' %}
            {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
          {% when 'sold-out' %}
        <h5>Was on Sale</h5>
          {% when 'coming-soon' %}
        <h5>Coming Soon</h5>
          {% endcase %}

        </div>
        <div class="product_thumb">
          <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
        </div>
      </a>
    </li>
    {% if forloop.last %}
      </ul>
    {% endif %}
  {% endfor %}

{{ paginate | default_pagination }}

{% endif %}

{% endpaginate %}

Now your Home page will have page numbers at the bottom!