*Settings › Appearance*

# Design Settings

Match your theme in one switch, or set your own colours and font, then decide how products are laid out in listings and on their own pages, and how far you 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

- [Store colors](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#colors)
- [Typography](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#typography)
- [Product listings](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#product-listings)
- [Product page](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#product-page)
- [Cart & checkout look](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#cart-checkout)
- [Cart icon](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#cart-icon)
- [Newsletter popup](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#newsletter-popup)
- [Custom CSS](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#custom-css)
- [Theme integration](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#theme-integration)
- [Template system](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/#templates)

**Where to find it:** WP Admin › EasyCart › Settings › Appearance › Design

*Brand*

## Colours and type

Match my theme, or the colours and font you choose, so the store looks like the rest of your site.

### Store colors

Match your theme, brand colors, text on dark sites and corner style

**Match my theme** ( default: Off ( on for new stores ) )

Store pages take your theme’s colours and fonts. Product cards, prices, buttons, titles, labels and the checkout follow the theme, and every pair of colours is kept readable. Where the theme does not say which colour to use, your Main color and Second color below fill in. While it is on, the store uses your theme’s fonts, so the Store font under Typography is not loaded. Under the switch, *What your theme gives* names your theme and lists what the store takes from it: Accent, Text, Headings, Background, Buttons, Text font and Headings font. New stores start with it on; a store set up before keeps its own look until you turn it on. Try it first: it is the quickest way to make the store look like the rest of your site.

**Main color** ( default: #222222 )

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** ( default: #666666 )

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** ( default: Dark text )

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** ( default: Off )

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** ( default: #242424 )

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.

![Settings › Design open on Store colors, with Match my theme on and what the theme gives listed under it.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/design-settings-colors-607.jpg)

> **💡 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. For a step by step walkthrough, see [How to Customize Your Store’s Look](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/).

### Typography

The font used on every store element

**Store font** ( default: Theme default )

A Google font, loaded on store pages and applied to every EasyCart element. It is not used while Match my theme is on, because the store then takes your theme’s fonts. 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** ( default: Empty )

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, photo shape, 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

**Product layout** ( default: Grid style 1 )

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.

**Card photo shape** ( default: Original )

Puts every product card’s photo in the same frame, filled edge to edge: *Square*, *Portrait ( 4:5 )* or *Landscape ( 4:3 )*. This is the quick fix for a ragged grid made by photos of different shapes. *Original* keeps each photo’s own shape and uses the image height settings further down.

**Content alignment** ( default: Default )

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** ( default: Title, price, rating, cart )

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** ( default: Lighten )

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** ( default: None )

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** ( default: Off )

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** ( default: Off )

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** ( default: Off )

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** ( default: On )

Rounds the top-left corner of the product card.

**Top-right corner** ( default: On )

Rounds the top-right corner of the product card.

**Bottom-left corner** ( default: On )

Rounds the bottom-left corner of the product card.

**Bottom-right corner** ( default: On )

Rounds the bottom-right corner of the product card.

**Columns on desktop** ( default: 3 across )

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 )** ( default: 3 across )

Products per row on a sideways tablet or a small laptop.

**Columns on tablet ( portrait )** ( default: 2 across )

Products per row on an upright tablet.

**Columns on phone ( landscape )** ( default: 2 across )

Products per row on a sideways phone.

**Columns on phone** ( default: 1 across )

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** ( default: On )

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** ( default: 310px )

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 )** ( default: 310px )

The cropped image height on a sideways tablet or small laptop.

**Image height on tablet ( portrait )** ( default: 310px )

The cropped image height on an upright tablet.

**Image height on phone ( landscape )** ( default: 380px )

The cropped image height on a sideways phone.

**Image height on phone** ( default: 270px )

The cropped image height on an upright phone.

![The Product listings section: card layout, Card photo shape, the parts shown on each product, hover effect and Products per row for each screen size.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/design-settings-product-listings-607.jpg)

> **💡 Note:** Products per row is one row with a box for each of the 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. Page sizes, how many products a page shows, are set on [Settings › Store › Products](https://docs.wpeasycart.com/docs/administrative-console-guide/product-settings/).

*The pages*

## Product, cart and checkout layout

Whether the gallery sits beside the details and the summary beside the form, decided per screen size, the cart page’s modern or table look, and a cart that fits a narrow theme column.

### Product page

Gallery beside or above the details, per screen size

**Columns on desktop** ( default: 2 columns )

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 )** ( default: 2 columns )

Gallery beside the details, or above them, on a sideways tablet or small laptop.

**Columns on tablet ( portrait )** ( default: 1 column )

Gallery beside the details, or above them, on an upright tablet.

**Columns on phone ( landscape )** ( default: 1 column )

Gallery beside the details, or above them, on a sideways phone.

**Columns on phone** ( default: 1 column )

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

The cart page’s look, fitting the cart to your theme, and the order summary beside or below the cart and checkout form per screen size

**Cart page look** ( default: Modern )

How the cart page looks with the classic checkout. *Modern* shows each item as a card with its picture, a − / + quantity stepper and Remove, the coupon, gift card and shipping estimate under the items, and a summary box beside them with the totals, a large Checkout button, the express buttons under *or pay with*, and Continue Shopping. On a phone the items are shorter, the coupon, gift card and estimate fold into one-line rows that open when tapped, and a bar with the total and Checkout stays at the bottom of the screen while the summary’s own button is out of view. *Classic table* keeps the columns and Update buttons. The one-page checkout always uses the modern cart, and Elementor’s Cart widget has a Look setting of its own. A store that keeps its own copy of the cart template ( *ec_cart.php* ) or of the stylesheet from before the modern cart keeps the table whatever you choose, and a note under this row says which file to update or remove.

**Fit the cart to your theme’s content area** ( default: Off ( on for new stores ) )

For themes that give the cart less room than the screen: a page with a sidebar, or a narrow content column. On, the cart and checkout use the layout made for the width they actually get, so a cart 830px wide looks the way it would on an 830px screen instead of squeezing the desktop columns and the order summary. The column settings below then follow the cart’s width. Under the switch, *Check my theme* opens your cart page out of sight, measures the room your theme gives it and says whether you need this; when a theme measures too narrow, the EasyCart screens recommend it with a *Fit the cart* button. New stores start with it on; a store set up before keeps its layout until you turn it on. Elementor’s Cart and Checkout widgets are left alone: set their layout per device in Elementor.

**Columns on desktop** ( default: 2 columns )

Two columns shows the order summary beside the cart and 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 )** ( default: 2 columns )

Summary beside the form, or below it, on a sideways tablet or small laptop.

**Columns on tablet ( portrait )** ( default: 1 column )

Summary beside the form, or below it, on an upright tablet.

**Columns on phone ( landscape )** ( default: 1 column )

Summary beside the form, or below it, on a sideways phone.

**Columns on phone** ( default: 1 column )

Summary beside the form, or below it, on an upright phone. One column is the practical choice. On the checkout steps a screen size set to one column shows the summary as a closed bar above the form, with the item count and the total, that opens in place when tapped; on the payment step it stays open above Place order.

![Cart & checkout look: Cart page look, Fit the cart to your theme’s content area with the theme measured, then the columns for each screen size in one row.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/design-settings-cart-checkout-607.jpg)

![The cart page in the Modern look: items as cards with the − / + stepper, the coupon, gift card and shipping estimate under them, and the totals and Checkout beside them.](https://docs.wpeasycart.com/wp-content/uploads/2026/10/design-settings-cart-checkout-cart-606.jpg)

*Around the store*

## Cart icon and sign-ups

The cart icon added to your navigation, and where the newsletter popup went.

### Cart icon

The cart icon and item count added to your navigation menus

**Menus that show the cart icon** ( default: No menus )

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** ( default: Off )

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

Now on Settings › Email marketing, with the other places shoppers sign up

The newsletter popup is no longer set here. This section says whether the popup is on or off, and **Open Email marketing** takes you to **Settings › Marketing › Email marketing**, where the popup sits with every other place shoppers sign up.

![The Newsletter popup section, which now points to Settings › Email marketing.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/design-settings-newsletter-popup-607.jpg)

*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

**CSS rules** ( default: Empty )

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

**Hide the live design editor** ( default: Off )

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** ( default: Off; advanced setting )

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** ( default: Off; advanced setting )

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** ( default: Off; advanced setting )

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** ( default: Off; advanced setting )

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** ( default: Off; advanced setting )

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

**Custom theme folder** ( default: Built-in )

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** ( default: Built-in )

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

- [Products](https://docs.wpeasycart.com/docs/administrative-console-guide/product-settings/): Product pages and lists, and what appears on them.
- [Checkout](https://docs.wpeasycart.com/docs/administrative-console-guide/checkout-settings/): The cart and checkout this page lays out.
- [Language](https://docs.wpeasycart.com/docs/administrative-console-guide/language-settings/): The wording, where this page handles the look.
- [Admin](https://docs.wpeasycart.com/docs/administrative-console-guide/admin/): Storefront link style and the live editor visibility.
- [Email](https://docs.wpeasycart.com/docs/administrative-console-guide/email-settings/): Email branding, which uses the main colour set here.
- [Email marketing](https://docs.wpeasycart.com/docs/administrative-console-guide/email-marketing-settings/): The newsletter popup and every other place shoppers sign up.
- [Elementor](https://docs.wpeasycart.com/docs/administrative-console-guide/elementor-settings/): Product, category, cart and account pages designed in Elementor.

## Ready to run your store on WP EasyCart?

Everything in this guide works with the free plugin. PRO and Premium add subscriptions, memberships, wholesale pricing and more. Try every PRO feature free for 14 days.

[Start your free trial](https://www.wpeasycart.com/wp-easycart-professional-14-no-risk-trial/) · [See what is included](https://www.wpeasycart.com/wordpress-shopping-cart-pricing/)

![The WP EasyCart admin: orders and offers](https://docs.wpeasycart.com/wp-content/uploads/2026/09/cta-wpeasycart-pro-v2.jpg)

---

Source: https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/ ( updated 2026-11-06 )