Appearance Settings

Go to System → Settings → Appearance

Appearance settings are specifically designed for each individual theme installed on your store. To ensure your desired look and feel are applied correctly, always adjust appearance settings within the context of the currently active theme.

1 Storefront Site Width
2 Store Logo
- 2.1 Additional logo formats
  - 2.1.1 SVG logo example
3 Email Logo
4 Icon
5 Default Items per Page
6 Number of items
7 Color of fill for image resize
8 Images Sizes
- 8.1 third party themes

Storefront Site Width

By setting the width, you control how wide the entire storefront will appear on a user’s screen. The width can be specified in either percentage (%) or pixels (px). Example: 100% or 1000px

"Storefront Site Width" is a setting that may or may not be applicable in all AbanteCart themes. Please contact your template developer if this setting does not work for your template.

Store Logo

The logo you want to display in the header of your store. In order to set a logo click on the image to change it and a pop-up will appear allowing you to upload a new picture from your local computer or set a pre-existing one that is already uploaded in the images directory of AbanteCart.

Typically, the store logo and email logo are identical. However, you may prefer to use an HTML resource for your store logo. This allows for rendering without image artifacts, using fonts or other assets loaded with your default template.

Unfortunately, this approach isn't suitable for email logos. For email logos, you'll need to use an image or SVG object.

SVG logo example

<svg width="256px" height="206px" viewBox="0 0 256 206" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
	<g>
		<path d="M159.9687,131.8189 C157.1197,129.8819 153.2367,130.6219 151.2977,133.4709 L136.2677,155.5839 C133.7217,154.7319 131.0057,154.2519 128.1737,154.2519 C125.3667,154.2519 122.6737,154.7209 120.1477,155.5579 L95.1857,120.6849 C99.7967,116.0669 102.6497,109.6919 102.6497,102.6489 C102.6497,88.5529 91.2227,77.1259 77.1257,77.1259 C63.0297,77.1259 51.6027,88.5529 51.6027,102.6489 C51.6027,109.2499 54.1287,115.2459 58.2407,119.7759 L35.0887,156.1219 C32.1327,154.9249 28.9087,154.2519 25.5237,154.2519 C11.4277,154.2519 -0.0003,165.6789 -0.0003,179.7749 C-0.0003,193.8719 11.4277,205.2989 25.5237,205.2989 C39.6197,205.2989 51.0477,193.8719 51.0477,179.7749 C51.0477,173.5909 48.8467,167.9229 45.1887,163.5059 L68.6357,126.6959 C71.2947,127.6349 74.1447,128.1729 77.1257,128.1729 C79.6637,128.1729 82.1107,127.7909 84.4237,127.0999 L109.6147,162.2899 C105.3077,166.8599 102.6497,173.0009 102.6497,179.7749 C102.6497,193.8719 114.0767,205.2989 128.1737,205.2989 C142.2697,205.2989 153.6977,193.8719 153.6977,179.7749 C153.6977,173.0229 151.0557,166.8999 146.7737,162.3359 L161.6227,140.4899 C163.5617,137.6399 162.8207,133.7569 159.9687,131.8189" fill="#3E7EBC"/>
		<path d="M230.4766,-0.0004 C216.3796,-0.0004 204.9526,11.4266 204.9526,25.5236 C204.9526,31.9966 207.3816,37.8896 211.3536,42.3886 L188.1106,78.8756 C185.2436,77.7606 182.1356,77.1256 178.8736,77.1256 C176.0266,77.1256 173.2956,77.6116 170.7386,78.4736 L145.8016,43.6376 C150.4616,39.0126 153.3506,32.6066 153.3506,25.5236 C153.3506,11.4266 141.9226,-0.0004 127.8266,-0.0004 C113.7306,-0.0004 102.3026,11.4266 102.3026,25.5236 C102.3026,32.5766 105.1636,38.9606 109.7886,43.5806 L94.3776,66.2516 C92.4396,69.1036 93.1796,72.9856 96.0316,74.9236 C98.8826,76.8596 102.7636,76.1216 104.7036,73.2706 L120.5366,49.9766 C122.8476,50.6646 125.2916,51.0466 127.8266,51.0466 C130.3226,51.0466 132.7276,50.6726 135.0076,50.0046 L160.2376,85.2496 C155.9766,89.8106 153.3506,95.9166 153.3506,102.6486 C153.3506,116.7456 164.7776,128.1736 178.8736,128.1736 C192.9706,128.1736 204.3976,116.7456 204.3976,102.6486 C204.3976,96.3386 202.0956,90.5726 198.2996,86.1176 L221.6576,49.4496 C224.4096,50.4646 227.3716,51.0466 230.4766,51.0466 C244.5726,51.0466 255.9996,39.6196 255.9996,25.5236 C255.9996,11.4266 244.5726,-0.0004 230.4766,-0.0004" fill="#4C96DF"/>
	</g>
</svg>

Email Logo

Logo for E-mails Sent to Customers. Aim for a logo size that is appropriate for email viewing. Large logos can slow down email loading times and may not display correctly on all devices. Use a lightweight format: PNG or JPG and Vector formats (SVG) are generally suitable. Avoid large file sizes as they can increase email delivery times.

Email Logos for Multi-Language Stores

If you have a multi-language store in AbanteCart, it's highly beneficial to use different email logos for each language to maintain brand consistency across different languages by using logos that align with the visual identity of each language version. This enhances the customer experience by presenting a more localized and professional brand image. To easily switch between logos during configuration, the administrator should change the admin content language within the settings.

Icon

A favicon is a small, square image displayed in the browser window next to your store's address. It helps users identify your website. Use a PNG image that is 16 pixels by 16 pixels.

Default Items per Page

Purpose: Controls the number of products displayed on each page in the storefront. This setting affects all product listings, including category pages, search results, brands, and the specials page.
User Experience: A well-chosen value can significantly impact the user experience. Too few items per page may require excessive page scrolling, while too many items can overwhelm the user.

Number of items

This setting controls the number of items displayed in various blocks throughout your storefront.

Affected Blocks:

Home Page Blocks: Typically includes blocks like "Bestsellers," "Featured," and "Specials."
Content Blocks: This setting also influences the number of items displayed in content blocks that you can add to your page layouts.
Viewed Products Block: You can find this block in the Novator theme's product page layout.

Color of fill for image resize

Jpeg Image Resize Fill Color: When resizing JPEG images, this setting defines the color used to fill any empty areas that may appear around the image. This often occurs when the original image has different aspect ratios than the desired resized dimensions.

Example: If you resize a rectangular image to a square and choose "white" as the fill color, the empty areas around the image will be filled with white.

After changing the fill color, it's essential to clear the image cache in your AbanteCart admin panel (System → Cache). This ensures that the resized images are regenerated with the new fill color.

Images Sizes

AbanteCart automatically resizes product, category, and brand images to various sizes, optimising image loading speed. This ensures consistent display across your store. Most themes have their own preferred or required image sizes.

Viewed products image size: Default is 312x400. Viewed product images on the product info page.

Product Image Thumb size: Default is 380x380. Main product image on the product info page.

Large Window Preview size: Default is 500x500. Zoomed image on the product info page

Category List size: Default is 120x120. Subcategory image size.

Brand Icon List: The recommended is 130x56. Brands images on product page and Home page block.

Product List size: Default is 250x250. Product image in the listings (category page, specials page, search, and brands product listing).

Additional Product Image Size: Default is 45x45. Product info page additional images thumbnails.

Related Products Image Size: Default is 120x120. Product info page.

Cart Image Size: Default is 75x75. Product image size on the shopping cart page.

Grid Image Size: Default is 57x57. Size for admin grid images.

After making any changes to image size settings, remember to click the "Save" button to apply your modifications.

User Manuals