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.
FAQ
- In the news slider on the home page, links do not seem to display properly.
- So many color options, what do they all do?
- How do I get the drop downs to work?
- How to I get the price dropdown like on http://reconfigure.myshopify.com/ ?
- How do I get a mailing list?
- How does the news ticker work?
- How to I get the About box to work?
- Screenshots
- Comments
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.
- Main content, Body and Background
- Logo and Header
- Navigation Bar
- Product and Content Boxes | Buttons
- Sliding Cart
How do I get the drop down menus to work?
Drop down menus are configurable through Shopify’s linklists and theme settings.
- Go to Assets/Theme Editor/Theme Settings/Navigation Menus
- There is a maximum of three menus due to spacing, check the ones you want to use and add some titles. These titles will be the link with the arrow in the menu bar
- Click apply changes
- Create Collections, products, blogs and pages. Your menus will have to link to something…
- Go to Navigation and add three link lists named menuone, menutwo, menuthree and add links to relevant items
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.
- Create a list
- View the list and click “for your website”
- Go to “Signup form embed code“
- Options I prefer
- Include only required fields
- Uncheck Include required field notice
- Uncheck Include interest groups
- Select I’m a pro – give it to me with no CSS at all
- Copy your embed code
- Optional ( paste your code into Notepad or Textedit )
- Wrap “join our mailing list” in <h4></h4> tags. End result <h4>Join our mailing list</h4>
- Delete “<a href=”#” id=”mc_embed_close” style=”display: none;”>Close</a>”
- Go to Assets/Theme Editor/Theme Settings/Front page Sign up form (mailchimp or other)
- Paste the code
- Apply changes
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&id=afc2ed88c1"></script>
<div id="mc_embed_signup">
<form action="http://reconfigure.us1.list-manage.com/subscribe/post?u=111ae760523243a29fd51c294&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?
- 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.
I had a look at your site and it seems to be fixed, correct?
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.
I can’t get my main menu (not the left hand drop down menus) to appear on my site.
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.
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.
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.