Elegant Shopify Theme
Shopify Elegant Theme 2.0 – Now supports customer accounts!
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:
</pre>
<h4>Sign up to our newsletter</h4>
<pre><!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<mce:style type="text/css" media="screen"><! #mc_embed_signup fieldset {position: relative;} #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;} -->
<!--[endif] -->
<!--[if IE 7]>
<mce:style type="text/css" media="screen"><! .mc-field-group {overflow:visible;} -->
<!--[endif] --><script type="text/javascript">// <![CDATA[
mce:0
// ]]></script><script type="text/javascript" src="http://reconfigure.us1.list-manage.com/js/jquery-1.2.6.min.js">// <![CDATA[
mce:1
// ]]></script><script type="text/javascript" src="http://reconfigure.us1.list-manage.com/js/jquery.validate.js">// <![CDATA[
mce:2
// ]]></script><script type="text/javascript" src="http://reconfigure.us1.list-manage.com/js/jquery.form.js">// <![CDATA[
mce:3
// ]]></script><script type="text/javascript" src="http://reconfigure.us1.list-manage.com/subscribe/xs-js?u=111ae760523243a29fd51c294&id=afc2ed88c1">// <![CDATA[
mce:4
// ]]></script></pre>
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="http://reconfigure.us1.list-manage.com/subscribe/post?u=111ae760523243a29fd51c294&id=afc2ed88c1" method="post">
<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 id="mce-EMAIL" class="required email" type="text" name="EMAIL" /></div>
<div><input id="mc-embedded-subscribe" class="btn mybuttons" type="submit" name="subscribe" value="Subscribe" /></div></fieldset>
</form></div>
<pre><!--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.
Hello
where can I find the sliding cart page to translate it in french
login …etc
can find script for sign up or comments in template?
http://reconfigure.ca/projects/shopify/elegant-shopify-theme/comment-page-1/#mailinglist ?
Hey Steph! Is it possible to use different images of a product based on which page your on? For example, an item uses image1 on the font page, but image2 on the “New Items” page, image 3 on the “Specials” page, etc. Also, to reiterate Gurumeet’s question, can the about us section be removed from the front page to make room for more products? For example, would it be possible to have 16 products on the front page?
1. Is it possible to use different images of a product based on which page your on?
Not without more detail and changing the code
2. Would it be possible to have 16 products on the front page
Yes, would need to modify the code.
Please feel free to email the details and I can let you know which maintenance package would cover it.
Cheers
Hi!
Instead of displaying the upper left corner of an image on the homepage, i would like to display its center. is there an easy way to achieve this?
There are new options in 2.0 which should accommodate your needs.
What are the options and where are they located? Have looked all over and unable to find them.
Options are under themes/theme settings
We are having real problems getting the images to work correctly in all contexts. Currently, the Product page works okay, with the thumbnail and the blown-up image. However, the images are truncated on both the Front page and the Full Collections page. We are using images with an aspect ratio of 4 X 3. Do we need to use images that are square? If so, is there an optimal size we should be using so that the images work correctly? We have tried varying the number of columns per page but this does not seem to work. Any help would be appreciated in solving this problem.
Unfortunately there is no way to manually crop thumbnails within Shopify which makes it difficult to cover all scenarios of image size and aspect ratios. Elegant was designed to provide a glimpse of the product image while keeping within a symmetrical square type grid layout. The theme works best if all your images are the same aspect ratio. You can always tweak the CSS afterward to suit your image dimension. I’ve added a notice above with more detail. Let me know if you have any questions and I’ll help as best I can.
Love the theme! Quick question, is there a way to display the price below the image?
Thanks!
Clark
No quick way because the theme was designed this way. You would need to modify the styles and template in various areas. Feel free to contact me with fine details – http://reconfigure.ca/contact/
In the theme, there is no option to change the following colors from default grey to my choice:
search bar
default title hovering text in the shopping cart
shopping cart title bar
checkout background color
Please reply.
Hi, I want to make the square product graphics on the Collection pages the same size as those on the home page. Currently they are 155 x 155 on the collection pages and 125 x 125 on the home page. Is this a setting or do I need to change some CSS. Love the theme!
Hi Stu, this would all have to be changed in the css. Feel free to email me the particulars and perhaps I can help you out.
We love your theme and already purchased it, but we’re running into a potential deal-breaker that we didn’t know existed. A comment above states that “There is a maximum of three menus due to spacing” — however in our layout there seems to be plenty of space left in the nav bar, and we definitely need more menu items. We like the idea of having dynamic/shopping cart nav items on the left, and static links on the right, so the default theme is great, but it’s that 3-menu limit that’s a problem. Any ideas? Thanks in advance.
Hi John, would need to edit the theme and theme settings to achieve this. Feel free to email me and we can work something out.
Is there any way to get the search box in the navigation bar instead of in the space next to the logo? I’m thinking of switching over to Elegant, but I don’t want to cover the logo design, which currently stretches over the entire width of the content box. (See: http://www.prettyindulgent.com/ )
Hello! Great Shopify theme. I’d like to be able to use the Blog rectangle at the bottom of the home screen as a visual slideshow instead of a text based slideshow, allowing me to show PNG files of special offers, news, discounts – think banner ads. The links would still take the user to the blog entry that is associated with the image they clicked on.
Thanks!
Hi, I LOVE your template and with NO knowledge of HTML/CSS or anything like that, I’m finding it very easy to tweak the site. Awesome! However, I’m having a problem getting the MailChimp to work properly. I followed your instructions and wrapped the Join our mailing list and deleted what you said to but the email format buttons are all screwy and I don’t have a clue as to how to fix it. I did look at what your sign-up code looks like but it’s sooo different than mine and, as I mentioned before, I’m clueless. Can you help me out or do I need to go through MailChimp?
Thanks for any help at all.
P.S. and FYI: A lovely woman at Shopify is helping me resize my logo. :)
Hi there, I love the theme except for the scrolling blog/news ticker at the bottom. Is there a way to instead have this be a photo slideshow? That would work very well for our needs. If not, how can I turn this feature off?
I’d like to add images to the footer – mc/visa/amex/paypal – how do I do this?
Also, is there a way to apply full product information, not just the collection graphics, to a product page? I’d like my customers to see the entire thing (with description) before clicking on it.
Is there a way to add text above the collections on a product page?
I can’t get my main menu (not the left hand drop down menus) to appear on my site.
I had a look at your site and it seems to be fixed, correct?
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.
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.
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.