Settings › Customize
Design Settings
Colours, fonts, how products are laid out in listings and on their own pages, and how far you can go with your own CSS and templates. 10 sections, with every setting named in plain language and its factory default shown beside it.
Quick links
Where to find it:WP Admin › EasyCart › Settings › Customize › Design
Brand
Colours and type
The colours and font that make the store look like the rest of your site, or not.
Store colors
Brand colors, text on dark sites and corner style
5 settingsMain color
The colour used for buttons, links and highlights across the store, and in your order emails too. This is the single most visible setting on the page, so set it to your actual brand colour before anything else. Remember it has to carry white button text legibly: a pale brand colour that looks right on a logo often fails as a button.
Second color
Hover states and secondary accents. A slightly darker or lighter version of the main colour is the safe choice. Picking something unrelated makes every hover feel like a different website.
Text color
Tells the store whether it is sitting on a light or a dark page. Choose white text only if your theme genuinely has a dark background, because this flips the text colour on store elements wholesale rather than per element. Getting it wrong produces white text on white, which looks like the store failed to load.
Square corners
Removes rounded corners from buttons, images and boxes across the store. Worth turning on if your theme is squared off, because the mismatch between a sharp theme and rounded store elements is one of the things that makes a store look bolted on rather than built in.
Admin accent color
The colour of the EasyCart admin menu, buttons and dashboard charts. It changes nothing a customer ever sees. Useful if you run several stores and want to tell at a glance which admin you are looking at.
💡 Note: The main colour also appears in your order emails, so pick something that reads well on white in a mail client as well as on your site. Email clients do not run your stylesheet, and they will not rescue a low-contrast choice.
Typography
The font used on every store element
2 settingsStore font
A Google font, loaded on store pages and applied to every EasyCart element. Theme default leaves your theme’s own font alone, which is usually the right answer: matching your theme costs nothing and loading a second font family costs page speed. Reach for this when the store visibly does not match the rest of the site.
Custom font family
A CSS font-family name to use instead of a Google font. The font itself must already be loaded by your theme or another plugin, since this only names it. If the name is wrong or the font is not loaded, browsers fall back silently and you will not get an error to tell you.
The grid
How products look in a listing
Card style, what appears on each card, hover behaviour, and how many fit across each screen size.
Product listings
How products look on store and category pages
23 settingsProduct layout
The card style used for each product in a listing. The styles differ in where the image, title, price and button sit relative to each other rather than in colour, so pick on layout and let the colour settings above do the branding. Individual store pages can override this in the live editor.
Content alignment
Aligns the title, price and buttons inside each card. Centre suits sparse cards with short titles; left is easier to scan down a long grid, because the eye has a consistent starting edge.
Parts shown on each product
Which parts appear on a product card: title, price, star rating, Add to cart button and quick view button. Dropping the rating on a new store is sensible, since empty star rows suggest nobody has bought anything. Dropping the price is only right for catalogue and quote-based stores.
Image hover effect
What the product image does when a shopper hovers over it. Flip, crossfade, slide and flipbook all swap in the product’s extra images, which is genuinely useful for clothing and anything with a back view, but only if your products actually have extra images. Lighten, grow and shrink work with a single image. None of this happens on a touch screen.
Image frame
A thin border or a drop shadow around each product image. Helpful when your photography has a white background and would otherwise dissolve into the page. Unnecessary when products are shot on a coloured or textured backdrop.
Quick view popup
Shoppers can open a product summary in a popup straight from the listing. It shortens the path to the cart for simple products. For products with several options to choose, the full page is usually the better experience, and a popup that cannot show everything just adds a step.
Border around each product
Draws a box around every product card. Gives a grid structure when products have varying image sizes or ragged text lengths; adds visual noise when the grid is already tidy.
Round the border corners
Rounds the corners of that border. Only does anything when the border above is on. The four corners are then controlled individually below, which is how you get shapes like a card rounded at the top and square at the bottom.
Top-left corner
Rounds the top-left corner of the product card.
Top-right corner
Rounds the top-right corner of the product card.
Bottom-left corner
Rounds the bottom-left corner of the product card.
Bottom-right corner
Rounds the bottom-right corner of the product card.
Columns on desktop
Products per row on wide screens. Three or four suits most catalogues. More columns means smaller images, and past about five the photography stops doing any selling.
Columns on tablet ( landscape )
Products per row on a sideways tablet or a small laptop.
Columns on tablet ( portrait )
Products per row on an upright tablet.
Columns on phone ( landscape )
Products per row on a sideways phone.
Columns on phone
Products per row on an upright phone, which for most stores is the majority of visits. One column gives each product a usable image; two fits more on screen but makes everything small. Look at your own store on a phone before deciding.
Automatic image height
Listing images keep their natural proportions. Leave it on if your product photos are consistently shaped. Turn it off to crop every image to a fixed height instead, which is the fix for a ragged grid caused by mixed portrait and landscape photography.
Image height on desktop
The fixed height listing images are cropped to on wide screens, in pixels. Only used when automatic image height is off.
Image height on tablet ( landscape )
The cropped image height on a sideways tablet or small laptop.
Image height on tablet ( portrait )
The cropped image height on an upright tablet.
Image height on phone ( landscape )
The cropped image height on a sideways phone.
Image height on phone
The cropped image height on an upright phone.
💡 Note: The column and image-height settings repeat across five screen sizes. Set desktop and phone deliberately, since those cover most visits, and leave the three in between on their defaults unless you have a reason. They sit behind the advanced fold for that reason.
The pages
Product, cart and checkout layout
Whether the gallery sits beside the details and the summary beside the form, decided per screen size.
Product page
Gallery beside or above the details, per screen size
5 settingsColumns on desktop
Two columns puts the image gallery beside the product details; one column stacks the gallery above them. Two is the norm on desktop, because it keeps the price and the Add to cart button visible without scrolling.
Columns on tablet ( landscape )
Gallery beside the details, or above them, on a sideways tablet or small laptop.
Columns on tablet ( portrait )
Gallery beside the details, or above them, on an upright tablet.
Columns on phone ( landscape )
Gallery beside the details, or above them, on a sideways phone.
Columns on phone
Gallery beside the details, or above them, on an upright phone. One column is almost always right here; two columns on a phone leaves both halves too narrow to be useful.
Cart & checkout look
Order summary beside or below the checkout form, per screen size
5 settingsColumns on desktop
Two columns shows the order summary beside the checkout form; one column puts it below. Beside is better: a shopper who can see the total while filling in the form is less likely to abandon at the last step because something surprised them.
Columns on tablet ( landscape )
Summary beside the form, or below it, on a sideways tablet or small laptop.
Columns on tablet ( portrait )
Summary beside the form, or below it, on an upright tablet.
Columns on phone ( landscape )
Summary beside the form, or below it, on a sideways phone.
Columns on phone
Summary beside the form, or below it, on an upright phone. One column is the practical choice; the summary then sits below, so make sure it is not so long that the totals fall off the screen.
Around the store
Cart icon and sign-ups
The cart icon added to your navigation, and the newsletter popup.
Cart icon
The cart icon and item count added to your navigation menus
2 settingsMenus that show the cart icon
Adds a cart icon with a live item count to each menu you choose. Worth doing: shoppers expect a persistent cart in the navigation, and without one they have to remember what they added. Clear every menu to remove the icon again.
Hide the icon when the cart is empty
The icon only appears once something is in the cart. Keeps the navigation clean for browsers who have not started shopping, at the cost of the cart being somewhere shoppers have not already learned to look.
Newsletter popup
A sign-up form that opens over the page for new visitors
1 settingShow the newsletter sign-up popup
Opens a name and email form over the page for new visitors, on every page until they close or submit it, after which it stays hidden in that browser. It does build a list. It also interrupts people before they have seen anything worth signing up for, so if you use it, make sure the offer is worth the interruption. Sign-ups appear under Users, Subscribers.
Going further
CSS, themes and templates
Your own rules, the switches that resolve theme conflicts, and the folders that let a developer replace the built-in design outright.
Custom CSS
Your own rules, printed on every store page after the store stylesheet
1 settingCSS rules
Your own CSS rules, printed on every store page after the store stylesheet, which is what lets them win. Plain CSS only, with no style tags around it. The important part: this survives plugin updates, whereas edits to the plugin’s own stylesheets do not, so this is where store tweaks belong.
💡 Note: Rules added here survive plugin updates. Editing the plugin’s own stylesheets does not, so anything you want to keep belongs in this box rather than in a file.
Theme integration
The on-page editor, and switches for theme conflicts and performance
6 settingsHide the live design editor
Removes the on-page design toolbar that administrators and store managers see while browsing the store. Useful when you are recording a demo, or when staff keep changing things by accident.
Use the theme\’s post template for products
Product pages render with your theme’s single-post template, or a single-ec_store.php file if you have one, instead of being treated as pages. Reach for this when product pages are missing theme furniture such as a sidebar or breadcrumb that posts get. It can equally introduce post elements you do not want, like author bylines and comment forms, so check a product page after switching.
Match store page meta on product pages
A legacy option for older layouts that copied the store page’s meta onto product pages. The current design does not use it, so leave it off unless you are maintaining a store built years ago that depends on it.
Load minified store CSS and JavaScript
Serves the compressed store CSS and JavaScript for faster loading. Worth turning on, with one caveat: if the store breaks immediately after a plugin update, this is the first thing to switch off, because a stale minified file is a common cause. It is ignored when a custom theme folder supplies its own files.
Skip the jQuery UI accordion script
Stops the jQuery UI accordion script loading with the store. This exists purely to resolve a conflict with a theme that loads its own copy. It is not a performance setting, and switching it on can stop collapsible store panels working, so only use it when you have an actual conflict to fix.
Skip the jQuery UI datepicker script
Stops the jQuery UI datepicker loading. Same purpose and same warning as the accordion above: date fields on product options and pickup dates may stop working, so only reach for it when a theme conflict leaves you no choice.
⚠️ Careful: The two jQuery UI switches are conflict fixes, not speed settings. Turning them on without an actual theme conflict will quietly break collapsible panels, product date options and pickup date pickers.
Template system
For developers: override the built-in CSS, images and PHP templates from wp-easycart-data
2 settingsCustom theme folder
A folder under wp-easycart-data holding CSS, images and scripts that replace the built-in ones. Only folders that actually exist are listed. This is the developer route to a fully custom store appearance, and because it lives in the data directory it survives plugin updates.
Custom layout folder
A folder under wp-easycart-data holding PHP templates that replace the built-in store, cart and account templates. The deepest level of customisation available, and correspondingly the one most likely to need attention when the plugin changes, since your copies do not gain upstream fixes.
⚠️ Careful: A custom layout folder takes over the PHP templates completely, which means your copies stop receiving upstream fixes and changes. Expect to re-check them after plugin updates, and prefer the custom CSS box above for anything that is only cosmetic.
Keep going
Related panels
Product pages and lists, and what appears on them.
The cart and checkout this page lays out.
The wording, where this page handles the look.
Storefront link style and the live editor visibility.
Email branding, which uses the main colour set here.
How many products a listing shows before it pages.
Try the PRO features free for 14 days
Anything marked PRO comes with WP EasyCart PRO or Premium. Take the whole thing for a run on your own store before you decide.