Looking to upgrade the look of your online store?
Great news, Shopify’s released a new set of free themes and an improved theme editor!
We’re going to break down the Online store 2.0 theme editor, and see how you can use
it to create a fully customized look!
Hey everyone!
Nadeem here from Shopify.
Online store 2.0 allows you make creative changes to your store without touching any
code.
There are six free Online store 2.0 Themes available on the Shopify theme store at the
moment.
These include, Dawn…
Craft…
Crave…
Taste…
Studio… and Sense.
Vintage themes, like “Brooklyn” won’t have the features we talk about.
Consider upgrading to a 2.0 theme for full access to these options.
To find your “Theme editor” from your Admin, click “Online store.”
Your “Current Theme,” is what customers see when visiting your store.
Click “Customize” beside the theme you want to edit to open the “Theme editor.”
Let’s dive into 2.0!
2.0 themes are made up of three parts.
Templates, Sections and Blocks.
Templates are the pages in your theme editor that you can customize to give your shop a
consistent look and feel.
To access these templates, open the drop down menu and click each option to load that template
in the editor.
You can create new, “Alternate” templates for Products, Collections, Pages, Blogs and
Blog posts.
This lets you modify specific content on a template, like hiding the price on one product,
without changing all products at the same time.
To begin, select the template you want to edit in the menu.
Click “create template” Name it, and click “Create Template.”
Edit the content you want to adjust in the new template, like hiding the product’s
price.
Now click save.
Now find the content you edited in your admin.
You'll then need to assign the new, alternate template that you made, to the content you
edited.
For more information on applying new templates, check out the links below!
“Templates” contain “Sections.”
Some sections are specific to the template you’re viewing, while others can be added
to most pages.
Sections give you flexibility and control over your shop’s ideal aesthetic.
All themes include “Static” sections, like the “Header” and “Footer,” on
every page of your store.
You can’t move or delete these sections, but you can edit them.
You can add sections to your template by clicking “Add Section”
Now you can choose from sections like, Blog posts, Collection lists, and more.
Sections come with their own options that you can access by clicking the section name.
These options can change the look of your section, including the height, width, position
and more!
Using the 6 dot icon, you can move “Sections” to place them where you want.
On my “Homepage”, I’ll move the “Image with text” section below the “Rich text”
section that mentions my sale.
To do this, I’ll grab the section by clicking the 6 dot icon and drag it below.
Now my image is where I want it.
Most “Sections” are made up of “Blocks” that have their own options and represent
the content of each section.
You can use blocks to add text, images, links, buttons, and more.
“Blocks,” within sections can also be moved.
I’ll move the “Shop now” button in the “Image with text” section above the text
that mentions my leggings.
I’ll do this by opening the “Images with text” section, clicking and dragging the
“Button block,” above the text block.
You can add “Blocks” to make further customizations.
I want to add another “Button” to my sales information.
I’ll do this by clicking the “Rich text” section that has my sale information, and
then the “plus” symbol to add a “Button block.”
Now I have a new button where I want it and can edit it further by clicking the “Block”
I created.
I can change the button's name and create a link to redirect customers to places in
my store.
You can hide “Sections” and “Blocks” by holding the cursor over each option and
clicking the eye icon.
To delete a “Block” or a “Section” click on it to open it’s settings and click
“Remove Section.”
Theme settings are where you can put your artistic stamp on your shop!
To access these options, click “Theme Settings” in the bottom left corner.
You’ll see familiar customization options from vintage Shopify themes, like:
Colors, Typography, Social Media and Checkout.
With Online store 2.0, you now have access to even more options!
If you want to play with the width of your shop, head over to “Layout”.
Customize your call to action buttons, like “Shop now” and “add to cart” through
the “Buttons” option.
Want your variants to stand out?
Change the thickness and Opacity in “Variant Pills”
Your customers matter most!
Customize areas that require customer input, like the quantity selector, by using the “Inputs,”
setting.
Product, blog and collection cards are areas in sections that display multiple items.
You can edit the shape, style, color and more, under the “Cards” setting.
You can even adjust the borders and shadows around your content in ”Content Containers,”
These same settings can be adjusted under options like:
“Media,”: which is the visual component of your shop, like your images
“Drop downs and popups,”: like your add to cart pop-up.
And “Drawers,” such as a collapsible navigation menu.
Under “Badges,” you can adjust the position, shape and color of any sale or sold-out badges
that appear in your store.
“Search Behavior”, lets you enable product suggestions and their related options.
Finally, let’s talk dollars!
Under “Currency Format” you’re able to show currency codes for your product, cart
and checkout prices.
After making customizations, don’t forget to “Save” your changes!
Now you know how to take the style and feel of your shop to the next level using the Online
Store 2.0 themes.
For more information on everything shown in this video, visit help.shopify.com