take your ecwid store to the next level › wp-content › ... · tip: new ecwid feature for...
TRANSCRIPT
TAKE YOURECWID STORE TO THE NEXT LEVEL
E C W I D 2 0 1
daniella.io
Table of Contents§1. Ecwid CSS. Fully Customizing Your Ecwid Store ......................................................................................... 4
How to Customize Your Ecwid Store .................................................. 5
Digging Deeper: Find Exactly What You Want to Edit .................. 15
§2. Five Ecwid Hacks for Penny Pinchers ....,,,... 16
How to Only Sell 10 Products Even if You Have 100 ............,,,,,,,,,,... 17
How to Charge Extra Costs at Checkout ......................................... 21
How to Offer Local Pickup Without a Paid App ................................ 23
Create a Website Using Ecwid ........................................................ 25
How to Use Ecwid as a Product Catalogue ........................................ 26
§3. The Best of Ecwid’s Blog ......................................... 29
How to Use Content to Attract Customers to Your Store .................. 30
Simple Product Photography Tips to Beautifully
Showcase on Your Store ................................................................ 31
How to Optimize Product Images: Step-By-Step Instructions and An
Overview of Services ....................................................................... 32
Make Facebook Work for Your Small Business ................................. 33
How To Write A Welcome Email That Sells ................................. 34
How to Price Your Products? A Science Backed Answer .................. 35
How to Use Content to Attract Customers to Your Store ..........,,..... 36
How to Create an Online Store Without a Website ......................... 37
About the Author
Daniella is proud to combine her passion for
business, web design and teaching to bring her
clients a unique and outstanding experience.
Daniella's goal is to enable entrepreneurs to
achieve their autonomy in maintaining their
online presence. She proudly uses Ecwid to
achieve that goal.
4
§1 Ecwid CSS. Fully Customizing Your Ecwid Store
Ever since I started providing Ecwid tutorials, I have received
requests non-stop for CSS tips. Ecwid is very flexible in the
sense that it allows you to customize your store to match your
brand. However, without any CSS knowledge, making these
changes can become very tedious and frustrating for newbies.
So, here is (almost) everything you need to easily make your
store look exactly the way you want it to. All you will need to
do is copy and paste the few lines of code provided here to get
it to look the way you want it to!
5
How to Customize Your Ecwid Store
Step 1: Creating Your ThemeIt is super easy to create your custom theme in Ecwid. All you have to
do is open your seller dashboard, head over to Settings > Design > CSS
Theme.
Tip: Create your new theme based on the theme that looks the most like your brand colors or the colors on your website. If your website is dark, you may wish to use the red theme which uses darker colors. If your website is light, you could use the beige or standard theme as a base to
create your custom theme.
6
Create a new theme: based on the red or beige theme if you have very
few changes you wish to make.
Duplicate: the red or beige theme if you wish to make many changes to
the look of your store.
Create a new theme by clicking on “New CSS Theme.” Rename your
theme to whatever you wish. Ecwid will use the base theme you had Add
code to this theme.
7
Tip: New Ecwid Feature for WordPress Users! (2016). If you use the Ecwid Plugin on a WordPress site you can use Ecwid’s Chameleon skin feature. Chameleon skin will adapt to the design of your theme by detecting predominant colors and fonts. You can enable Chameleon on the "Advanced" tab in the Ecwid plugin settings in your Wordpress backend.
Step 2: Customizing Your ThemeYou can change, add, remove and edit change many different items
using various CSS styles. All you need to do add some CSS code to your
active theme. You can add and edit different styles to all of the following
labels including font, font size, color, etc.
If you are totally new to CSS you may never heard of Color Hexes. Color
hexes are codes used to identify a color. Knowing the codes you want is
key if you wish to change the colors of your Ecwid store. Here are a few
resources to know and choose your color hexes:
Get Color Hex from Image: if you do not know what your color codes
are you can use this reverse tool to upload your logo or image to easily
extract your color codes.
Color hex pickers:
– http://www.w3schools.com/colors/colors_picker
– http://www.color-hex.com
8
Popular flat design color codes:
– https://flatuicolors.com
– http://www.flatuicolorpicker.com
You can change, add, remove and edit change many different items
using various CSS styles. All you need to do add some CSS code to your
active theme. You can add and edit different styles to all of the following
labels including font, font size, color, etc.
Tip: You may have to clear your browser cache or open your site in a different browser if changes are not made right away.
How to Change Items
Here are a bunch of codes you can use to change items that appear in
your Ecwid store. All you need to do is create a new theme (Settings >
Design > CSS Themes > New Theme) and paste the codes you wish to use
in your store.
Important: do not forget to replace #FFFFFF (white) with the color
codes you want to appear in your store!
Change the color of prices in your store:
div.ecwid-productBrowser-price {
color: #FFFFFF;
}
9
Change the “In Stock” label color:
div.ecwid-productBrowser-details-inStockLabel {
color: #FFFFFF;
}
Change border that appears when you hover over a product:
div.ecwid-productBrowser-productsGridproductTopFragment-
mouseover {
border: solid 1px #FFFFFF;
border-bottom: none;
}
div.ecwid-productBrowser-productsGrid-productBottomFragment-
mouseover {
border: solid 1px #FFFFFF;
border-top: none;
}
Change default product and description text size:
div.ecwid-productBrowser-details-descr {
color: #FFFFF; font-family: "Arial";
}
Change product price font:
div.ecwid-productBrowser-price {
font-size: 20px;
}
10
Change the text color of your product options:
div.ecwid-productBrowser-details-optionPanel label.ecwid-
fieldLabel {
font-weight: bold; color: #FFFFFF;
}
Change the product title hover color:
table.ecwid-productBrowser-productsGrid-v2
div.ecwid-productBrowser-productNameLink:hover a {
color: #FFFFFF;
}
Change product browser category label colour (size, font…):
div.ecwid-productBrowser-subcategories-categoryName {
font: normal 19px "trebuchet MS", helvetica,
verdana, sans-serif;color: #FFFFFFF;
margin-top: 15px;
text-align: center;
}
Change Sign in pop up background color:
div.ecwid-popup {
border: solid 18px #FFFFFF;background-color:
#FFFFFF;padding: 5px;
}
11
Change Sign in pop up header font or color:
div.ecwid-popup-headLabel {
font: 30px georgia, "times new roman", times, serif;
color: #YOUR_COLOUR;
margin: 0 0 12px 0;
min-width: 240px
}
Change the Position of the Mini-Cart
Change Product Titles
How to Add Items
Add drop shadow effect to product images:
.ecwid-productBrowser-productsGrid-productTopFragment img {
background:transparent url(http://kb.ecwid.com/f/
shadow-1000x1000.gif) no-repeat scroll right
bottom;
padding:5px 10px 10px 5px;
}
.ecwid-productBrowser-details-thumbnail img {
background:transparent url(http://kb.ecwid.com/f/
shadow-1000x1000.gif) no-repeat scroll right
bottom;
padding:15px 20px 20px 15px;
}
Add border around products
12
Add GIFS as product images
Add tabs to product descriptions
Add a sale price view
How to Remove Items
Remove delivery time from names of shipping methods. If you select
automatic shipping methods for your products such as Fedex, USPS or
UPS, delivery time may also be displayed at checkout. You can hide this
information with the following code:
span.ecwid-shippingOption-days,span ecwid-Invoice-
ShippingDetails-transitTime {
display:none !important;
}
Remove breadcrumbs. A breadcrumb is a string of links that show your
path on a site. On the left you can see an example of a breadcrumb in an
Ecwid Store (usually found at the top left of your store). You can remove
breadcrumbs with the following code:
div.ecwid-productBrowser-categoryPath {
display:none;
}
13
Remove “Sort By” drop-down menu:
div.ecwid-results-topPanel-sortByPanel {
display:none !important;
}
Remove “view as” link:
div.ecwid-results-topPanel-viewAsPanel {
display:none !important;
}
Remove category title:
div.ecwid-productBrowser-subcategories-categoryName{
display:none;
}
Remove the Mini-Cart:
div.ecwid-minicart {
display:none !important;
}
Remove the tax line:table.ecwid-productBrowser-cart-taxAmountPanel,
tr.ecwid-Invoice-Summary-taxRow {
display:none !important;
}
14
Remove available quantity:
div.ecwid-productBrowser-details-qtyAvailInfo {
display:none;
}
Remove sign in:
div.ecwid-productBrowser-auth {
display: none;
}
Remove Continue Shopping button
Remove category icons from the store
Remove cart “Drag and Drop” text
How to Edit Buttons
Make buttons round
Many ways to customize the Continue Shopping button
Change Buy Now button
15
Digging Deeper: Find Exactly What You Want to Edit
Check out this Youtube video to find out how to dig deeper into the
CSS you would like to edit.
TroubleshootingIf you are having issues with your CSS code, check out these tips on
Ecwid’s Help Center. If ever you are really stuck, all you have to do is
activate one of Ecwid’s default themes (Standard, beige or red).
If, after following this easy tutorial, you still feel like CSS is too
complicated for you, you have the following choices:
– Leave your store as is with Ecwid’s default standard theme.
– Use another one of Ecwid’s free themes (beige or red).
– You could also check out Ecwid’s App Market under Design for various
design customization offers (free to $3,000).
– You could also upgrade to an annual Unlimited plan to benefit from
twelve hours of customization by Ecwid’s design team.
– Check out Ecwid’s custom services for more.
16
§2 Five Ecwid Hacks for Penny Pinchers
If you loved the hacks in Chapter 4 (Ecwid 101), here are a
few penny-pinching ideas and bits of code to personalize the
look and feel of your Ecwid Store.
Although there are many benefits to having a paid Ecwid
account, some of us cannot afford one during the first months
of testing our sales online. Here are some Ecwid hacks for the
first time online sellers and startups looking to save money.
17
How to Only Sell 10 Products Even if You Have 100
So you have hundreds of products to sell but Ecwid is limiting you to
only ten. There is a way to add 100 products to your store without having
to upgrade your account.
This tip is best for:
– Businesses on a tight budget.
– Products that have no variations or that are unique.
How to: Get out a pen and paper and find a way to categorize your
products. Let’s say for example you are selling women's clothing. You
have 10 shirts, 20 skirts, 50 pants, and 20 dresses. Instead of making 100
separate products you are going to create one product for each category.
Tip: Do not use Ecwid categories for this tip. Delete the two demo categories and head directly over to the products section to create your
“categories.”
18
Add your first product called “Shirts.”
Head over to the Options tab and add as many options as you need
(size and color for example). If your products are unique or your stock is
limited (since it is a paid feature to have stocks), you can create unique
products by making an option with the exact name of your product
including its variations (for example: Grey size M, Blue size S, etc).
Note: You will have to manually delete the products once they are out of
stock.
Fill in product descriptions so that your clients know exactly what
they are purchasing. Then head over to the Gallery section and upload
19
all the shirts you are selling. Name each shirt using the reference in your
description.
Tip: Use your SKU to name your products in your description, option choices and gallery names so that your clients are sure of what they are
purchasing.
Next, head over to the Design tab and add the following bits of code!
This code will hide the product price in your storefront making the
products actually look like categories:
.ecwid-productBrowser-CategoryPage-0 div.ecwid-productBrowser-
price {
display: none !important;
}
20
This code will enlarge the text on a product image:
div.pswp__caption small, div.pswp__caption__center {
font-size: 30px !important; line-height: 40px
!important;
}
div.pswp__caption__center div {
display: none !important;
}
div.pswp__caption__center small div {
display: inline !important;
}
This will make it easier for your client to understand which image goes
with which product, especially if you are offering 10 different dresses in
different sizes.
21
How to Charge Extra Costs at Checkout
Ecwid offers a paid handling fee option available with a venture plan
(minimum). But you can easily add any fee for free.
So you want to charge a handling fee at the checkout but you do not
want to pay a recurring monthly fee to do so? Easy. Head over to Settings
> Taxes and add a new tax but name it Handling Fees for example.
22
Choose the concerned zones (make sure you had set up your zones in the
Zone tab). Set the rate and you are done.
This tip is best for:
Anyone wanting to charge extra fees at checkout.
How to: You can name your fee whatever you want. It could be a gift
wrapping service or a fee for extra packaging.
Tip: You could even chargeback Paypal fees if you wanted to by adding a “tax” called “Paypal Fee” and charging back the current Paypal fee rate.
23
How to Offer Local Pickup Without a Paid App
There is an app in Ecwid’s app market that can enable you to do this
for five dollars a month. There is little to no value to spending five dollars
or any dollar for such an option unless you only function with local
pickup and have a bunch of pickup locations. So here is how to do it, for
free.
This tip is best for:
– Small business offering local pickup
– Those who have one or few pickup locations
How to: Go to Settings > Shipping > New shipping method > Flat
Rate. Do not define any shipping time and name the method Free Local
Pickup for example.
24
You can set a weight limit if needed (you can use a Custom Table to set
up weight limits). Make the rate $0. Hit Save.
You could also add a mandatory field where your client needs to
specify when they want to come pick their product up. All you have to do
is head over to Settings > General > Cart and scroll down to Order
Comments. Name the order note Local Pickup Date and Time to allow
your clients to specify when they will come pick up their order. You can
make this option mandatory (recommended if you only function with
local pickup).
25
Create a Website Using Ecwid
So you are on a super tight budget and you want to save money on
purchasing a website, an SSL etc. Then you can use Ecwid’s Starter Site
as a website. Create your Ecwid account, head over to Settings > General
> Starter Site. Click on Change Starter Site URL to customize the name of
your starter site.
Tip: With a Venture plan, you can connect your own domain to your store and therefore make it look more professional. More on how to here.
26
How to Use Ecwid as a Product Catalogue
If you would like to use Ecwid to show products that you cannot
actually purchase, you can follow these steps to set up a product
catalogue:
This tip is best for:
– Those who would like to create an online catalogue.
– Creating a lookbook.
How to: Head to Shipping > Settings and disable all payment and
shipping methods. Then head over to Design and create a new template
or add the following code to your current template:
27
To deactivate mini cart widget:
div.ecwid-minicart {
display:none !important;
}
To hide the "Add to Cart" buttons and the "Qty" fields:
td.ecwid-productBrowser-productsTable-buy,.ecwid .ecwid-btn--
addToBag, div.ecwid-productBrowser-details-qtyPanel {
display:none;
}
Now go check out your store! You just created a product catalogue in
no time.
Tip: You could also hide the prices on the store home page by adding
the following code:
To hide the priced on all category pages:
div.ecwid-productBrowser-price {
display: none !important;
}
28
To hide the price on the main store page:
.ecwid-productBrowser-CategoryPage-0 div.ecwid-productBrowser-
price {
display: none !important;
}
Now go check out your store! You just created a product catalogue in
no time.
Tip: You could also hide the prices on the store home page by adding the following code:
To hide the priced on all category pages:
div.ecwid-productBrowser-price {display: none !important; }
To hide the price on the main store page:
.ecwid-productBrowser-CategoryPage-0 div.ecwid-productBrowser-
price {display: none !important; }
29
§3 The Best of Ecwid’s Blog
Everything you need to take your store one step further, all
in one place. For further reference, check out help.ecwid.com.
Follow Ecwid’s blog to receive tips and tricks every month.
30
How to Use Content to Attract Customers to Your Store
Posted Sep 21, 2015 by Lina Vashurina, Ecwid Team.
"A couple of months ago, we wrote about how to properly photograph
your products. We received a lot of feedback, and the most common
question was, “How do I remove the background from photos without
Photoshop?” Today we will try to answer this question. Indeed, one does
not always have the opportunity to take pictures with a good background
(white, grey, plain or branded). How to solve the situation if the photos
have already been taken, and the results are not satisfactory?
31
Simple Product Photography Tips to Beautifully Showcase on Your Store
Posted Feb 19, 2015 by Lina Vashurina, Ecwid Team.
As a merchant, your products (and selling your products) are the key
to your success. How you visually showcase them online can make all
the difference in converting visitors into customers.
32
How to Optimize Product Images: Step-By-Step Instructions and An Overview of Services
Posted Oct 20, 2015 by Lina Vashurina, Ecwid Team.
Pictures draw the attention of the buyer. In order to keep that attention,
you need beautiful pictures that load quickly. Hence, you will need to
optimize your images. This article will tell you how.What should the size
of the image be? How can you make your online store structured and
beautiful? How can you reduce the picture size but keep the details? Let
us help you.
33
Make Facebook Work for Your Small Business
Posted Apr 17, 2015 by Jesse Ness, Ecwid Team.
Whether you employ half the city or you’re just starting out, you can
operate your very own Facebook Business page. In short, the biggest
reason to set up shop on Facebook is because it’s where your customers
are. It’s one thing to draw your customers to your brand, but it’s another
to show up where they are already hanging out.
34
How To Write A Welcome Email That Sells
Posted Mar 29, 2016 by Lina Vashurina, Ecwid Team.
Customers who receive welcome emails are more likely to continue
interacting with your brand, shopping at your store, and reading your
newsletters. Your customer has already decided to take the leap and sign
up with your service, so now is your chance to make a great first
impression with a strong welcome email.
Here we’ll discuss examples of welcome emails and give you ideas,
tips, and techniques for you to implement today in your own welcome
emails to impress your own customers.
35
How to Price Your Products? A Science Backed Answer
Posted Jul 10, 2015 by Lina Vashurina, Ecwid Team.
Pricing is one of the most important considerations for any business.
How much you charge for a product directly affects how much you can
sell. Getting the pricing right can result in massive revenue boosts.
In this post, we’ll look at some strategies for pricing your products
using proven theories. You’ll learn about pricing science, statistical
models, and pricing optimization based on psychological principles.
36
How to Use Content to Attract Customers to Your Store
Posted Mar 10, 2016 by Kristen Pinkman, Ecwid Team.
Facebook is the world’s largest social network and a leading platform
for targeted advertising. However, it may be difficult at first to navigate
the Facebook for Business page and its many options for your intended
purpose and outreach.
37
How to Create an Online Store Without a Website
Posted Aug 18, 2015 by Lina Vashurina, Ecwid Team.
According to research from PWC, 45% of people are buying more goods
from their favorite brands after looking at them in social networks,
especially when they can interact with representatives from the brand.
Shop owners are using social networks to talk about products,
communicate with existing customers, and attract new customers.