Changing the Look of Your Store
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, select Design on the left-hand sidebar 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
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 the Websites 360® Design editor. In your Websites dashboard, click Design at the top of the page, then navigate to your Shop page. In the design preview window, click on the block containing your products 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
- Click Design on the left-hand sidebar on 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.
Related Articles
Import and Export Store Products
You can import and export your store's catalog on your Shop app. This makes it easy to make bulk updates to products and categories. Import your products If you would like to bulk-upload products to your store, you can enter your product details in a ...Use Advanced CSS to Style Your Store
You can easily customize the look and feel of your Shop by using Cascading Style Sheets (CSS). How to Add Custom CSS To add custom styles to your store: Click Design from your Shop App dashboard. Next, click Create Theme to start your new, unique ...Add Products to Your Store
There are two ways to add products to your store: manually or in bulk. Manual entry requires you to add each product one by one. However, if you’re transferring from another e-commerce solution or already have your products listed out in a ...Import and Bulk-Upload Products to Your Store
Products can always be added to your store one at a time using the + Add New Product button on your catalog page. However, there are times when adding many products at once is highly beneficial. You can add products in bulk by importing a CSV file ...Add Product Ribbons or Callouts to the Shop App
Ribbons are colored horizontal product labels that are displayed on product listings thumbnails and product details pages in your store. You can put any text you like on them (e.g. “Bestseller”, “20% Off”, “New”, “Christmas deal” or “Free Shipping”). ...