Elegant Shopify Theme

The Elegant theme consists of many changes frequently requested to the Reconfigured theme. It’s also a collections of frequently requested features from the folks I work with in building their custom shops.

Features minimalistic design, Ease of use, very customizable, customizable sign up form, custom upload logo with spacing options, customizable navigation bar links, menus and colors.

Theme Demo

FAQ

In the news slider on the home page, links do not seem to display properly.

  • First Backup your theme!!!
  • Next go to your theme editor and edit index.liquid
  • Look for this peice of code
    {{ article.content | strip_html | truncate: 300 }}
    
  • Remove strip_html |
  • Your snippet should then look like this

    {{ article.content | truncate: 300 }}
    
  • Links should now be working.
  • Be very careful, the exact syntax is important.

So many color options, what do they all do?

Yes, perhaps I gave too many color options but these screencaps may lend a helping hand to linking them all together.

Drop down menus are configurable through Shopify’s linklists and theme settings.

How to I get the price dropdown like on http://reconfigure.myshopify.com/ ?

This and many other combinations are made to be quite simple thanks to Shopify’s smart collections.

  • Go to Collections/Add smart collection
  • Fill out the obvious
  • Head down to conditions
  • Choose Product Price / is less than / 100 or any combination you’d like
  • Rinse and Repeat till you have the amount of collections you prefer
  • Go to Assets/Theme Editor/Theme Settings/Navigation Menus and add links to those collections

How do I get a mailing list?

There are many options out there providing great mailing list services but my favorite has to be MailChimp. It’s cute, friendly, smart and has all the features you need and more. Best of all you can get a few lists and campaigns going for free.

I’m not going to teach how to use MailChimp but it’s fairly simple.

My MailChimp Sign-up code looks like this:

<h4>Sign up to our newsletter</h4>

<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
	#mc_embed_signup fieldset {position: relative;}
	#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
	.mc-field-group {overflow:visible;}
</style>
<![endif]--><script type="text/javascript">
// delete this script tag and use a "div.mc_inline_error{ XXX !important}" selector
// or fill this in and it will be inlined when errors are generated
var mc_custom_error_style = '';
</script>
<script type="text/javascript" src="http://reconfigure.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://reconfigure.us1.list-manage.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://reconfigure.us1.list-manage.com/js/jquery.form.js"></script>
<script type="text/javascript" src="http://reconfigure.us1.list-manage.com/subscribe/xs-js?u=111ae760523243a29fd51c294&amp;id=afc2ed88c1"></script>
<div id="mc_embed_signup">
<form action="http://reconfigure.us1.list-manage.com/subscribe/post?u=111ae760523243a29fd51c294&amp;id=afc2ed88c1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
	<fieldset>

<div class="indicate-required">* indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <strong class="note-required">*</strong>
</label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
		<div id="mce-responses">
			<div class="response" id="mce-error-response" style="display:none"></div>
			<div class="response" id="mce-success-response" style="display:none"></div>
		</div>
		<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn mybuttons"></div>
	</fieldset>

</form>
</div>
<!--End mc_embed_signup-->

How does the news ticker work?

  • Goto Blogs & Pages
  • Create a blog for Latest News and make sure the handle is news (should be there by default)
  • Write new articles

How to I get the About box to work?

View Screenshot

  • Goto Blogs & Pages
  • Create a page for about and make sure the handle is about. This contains the long version of your about page which the short version in the about box links to.
  • There should already be an About Us page with a handle of about-us. This is the short version that appears on the front page in the about box. Keep it short and sweet.

Screenshots

  1. I had a look at your site and it seems to be fixed, correct?

  2. Hi Tim,

    Vision unfortunately does not support theme settings yet, so you can edit it but it will look odd. Until they release a vision that supports theme settings, you pretty much have to do it live or open a test shop and do it there.

  3. I can’t get my main menu (not the left hand drop down menus) to appear on my site.

  4. Him

    A client of ours purchased your elegant theme. We want to make further tweaks to the template design. Can this theme be viewed locally with Vision? If not, how do you recommend we make modifications (besides doing it live)?

    Thanks.

  5. Shopify menus are all customizable through Shopify’s admin interface using linklists.
    http://reconfigure.ca/projects/shopify/elegant-shopify-theme/#dropdowns

    Logo can be any dimension, there are theme settings to adjust the padding around it.
    Ideally 236px × 75px would be a good size.

    You can change about-us by editing the page. Removing it completely from the template would require some coding.

  6. Hello, I do not know HTML/CSS. Like this template but will need to change the headers/menu options i.e. Brands would be “chakra jewelry” and collection would be “astrological jewelry” and price would be “type” or “style”. Can I do this myself? What are dimension required for the logo? From the above screenshots it looks like it is possible, just want to make sure. Can the about us page not be on frontpage? Thanks and be well.

Leave a Reply

 
bgimage bgimage bgimage bgimage bgimage bgimage bgimage bgimage bgimage bgimage bgimage bgimage