Changing the Look of Your Store – Marketing 360®

Once your Websites 360 site is set up for basic shopping functionality, it's time to customize the look and feel of the contents of the store.

From Marketing 360, click Shop App from the dashboard or from the App Menu near the top left corner of the page. Once you're viewing your Shop App dashboard, navigate to Design to customize the look of the store.

Category Page

These options apply to the pages that display a single category, often referred to as the product grid. Full descriptions of each option are displayed on the dashboard for reference.

Image size

Select the image size to use for each product image. Large images help represent products in detail. Small images let you display more products in the Product List. This setting also plays a role in determining how many products are displayed per row.

Image aspect ratio

Select an orientation for the product images. Landscape orientation is best for products with horizontal images. Portrait orientation is meant for vertical images. Square is for images of equal proportions, which is ideal for small merchandise.

Darken image backgrounds

Enable this option to slightly darken the background of images to make them stand out against the store's background and style them the same way for all products.

Product Card details and layout

Choose which product details to display on the Product List and how they are positioned in the Product Card. Product name, price, SKU, and 'Buy now' button can all be displayed or turned off.

Category name position

Choose where to display category names or hide them completely.

Product Page Options

These options apply to the pages that display a single product, additional images, product info, and the 'Add to Cart' button. Full descriptions of each option are displayed on the dashboard for reference.

Product Page layout

Choose the layout for the information displayed on the product's page.

Image Gallery thumbnails

Choose the layout for thumbnails of images uploaded into the products' Image Gallery.

Sidebar

Choose items displayed in the sidebar of the product's page. Drag and drop the items to re-arrange the order of their appearance in the sidebar.

Storefront navigation & colors

These settings determine which navigational and sorting options are available when browsing your store.

All of these options are optional, but it is strongly recommended to use the Color Adaption option feature. The Color Adaptation technology automatically repaints your store to match the colors of your website. Writing CSS is needed for any other style customizations.

First, enable the Color Adaptive Mode setting to let the Websites 360 Shop App utilize the colors and styles already created in your website.

What styles will Color Adapt inherit from Websites 360?

The Color Adapt setting will use colors already set up in Websites 360's Design editor. In your Websites 360 dashboard, click Design near the top of the page, then navigate to

to your Shop page. Click the HTML block to view the design settings that Color Adapt mode will inherit.

Background colors will be based on the container background color from the Shop App Product Grid embed block. Its a good idea to set a background color here instead of an image background.

Text colors will be based on the Fonts and colors selected in the Shop App Product Grid embed block. Be sure your text color has a good amount of contrast from the background color set in the step above.

Link colors based on site-wide link colors in the Design Styles Editor in the Sitewide section under Controls > Links. Note that the hover colors may not be exact.

Themes and In-depth customization

As mentioned above, there is a full CSS editor for any style customizations that are not accomplished by the Color Adaption feature. To add custom styles to your store:

Click Design from your Shop App dashboard.
Next, click Create Theme to start your new, unique theme.
On the next page, click Add New CSS Theme and give it a name.
Add the custom CSS necessary, then click Save.
Click Activate in the top right corner to activate the new theme on your site!

Please remember that CSS can be tricky, and you should only create a custom theme if you or someone in your business is familiar with editing CSS by hand. Saving invalid CSS could cause issues with your store and even stop customers from being able to check out.