Design

Design refers to elements like colors, font, logo, favicons, and anything else that makes up your store’s online branding. Design changes how your website looks across each page and can be customized to match your store. This feature makes it easy to customize the overall look of your website, and you can create multiple designs and switch between them. Only one design can be active for your site. 

Select Configure in the left menu, then select Design to access the website design tool. You can create multiple designs, but only one design can be Active. The active design is designated by a checkmark in the Is Active Design? column. Select +Add Design to create a new design. 

Create Design

All components and fields with a red asterisk (*) are required. 

Visual settings

Customize the website’s color scheme, fonts, logos, and email headers.

1. Enter a Title that identifies the design when configuring your site’s design settings. It is not visible to site visitors. 
2. Select one of the four Default palettes or pick Colors using one of three methods:
   • Select the Primary color and Secondary color squares and use the popup to choose the colors. 
   • Select the Primary color and Secondary color squares and enter the RGB (red, green, blue) values in the fields at the bottom of the popup. 
   • Enter the hex code in the field next to the Primary color and Secondary color squares. 

Note: A message displays if the selected color doesn’t meet the contrast ratio for ADA guidelines. This ensures the website is visible and easily seen by the largest audience possible. Select a darker color until the message no longer displays to save the color and continue. 

3. Select a Sitewide font from the four available fonts. When you select a font, the preview above shows what the font looks like. 
4. Upload the main Logo that displays on your site. Select Choose File under Add a new file and navigate to the logo file.

Note: The Minimum Recommended Width of a logo is 300px. There isn’t a Minimum Recommended Height. If the logo appears distorted after upload, try resizing it and re-uploading until you are happy with how it appears on the homepage. Allowed file types are png, gif, jpg, and jpeg.  Alt Text for the logo is added automatically.

5. Upload a Favicon that appears on the tab in browser windows. Select Choose File under Add a new file and navigate to the image. 

Note: Only png file types are allowed. The image must be larger than 16x16 pixels. Images larger than 32x32 pixels will be resized. 

6. Upload the Email Header image that displays at the top of emails (order invoices, account creation, etc.). Select Choose File under Add a new file and navigate to the email header image. The image displays in addition to the site logo and is optional, so it should be different than the site logo.

Note: Images should be at least 600px wide for the best appearance. Allowed file types are png, gif, jpg, and jpeg.  

Enter Alternative text that describes the image. This text is required to meet ADA guidelines.

Page structure

Manage the website page layout, including header organization, search block appearance, and newsletter forms.

Header

The header determines where the logo, navigation, newsletter signup, and search box display on your website. The preview above the header selection shows what the top part of your site will look like across all pages if you use the selected header. There are three header layouts:

• Search puts the logo and menu on the same line, and the search box gets its own region. 
• Customer Service displays the store’s contact information above the logo, making it customer-focused. 
• Brand makes the logo and store branding the main focus with the menu below. 

Search block settings

Configure how and where an additional search block appears on the home page and browse books pages. Regardless of what layout you selected in the last step, you will always have one search bar by default. This setting is used for a secondary search block. 

1. Enter a Search Block Headline that appears above the search box and select the pages where the search block displays. 
2. Select Display Search Block on Home Page to display the search block in the middle of the home page.
3. Select Display Search Block on Browse Book Pages to display the search block on browse books pages. 

Default Calls to Action for browse pages

View Calls to Action settings on the Home Page [Home Page#Primary Calls to Action]. 

The Calls to Action configured here display at the bottom of Browse Books and browse category pages for those that don’t have their own Call to Action overrides. Don’t configure this section if you don’t want Calls to Action to display on these pages. 

Footer Newsletter Form

 This feature gathers names and emails so customers can sign up for your newsletter. Select Add a newsletter signup form to Create Newsletter Signup that displays a Newsletter Signup Form above the footer on the home page. 

1. Select the Newsletter service you use to deliver emails. 
2. Enter a Newsletter form name that identifies the newsletter form.
3. Enter a Signup form headline that displays as the form's title.
4. Enter a Signup note that displays as the form’s subtitle.
5. Enter a Subscription message that displays when a customer subscribes to the newsletter. 
6. Select Enable modal and specify pages by their Paths to display the newsletter signup form when customers access pages (paths).  Enter a Modal Delay that indicates the number of seconds that pass before the modal displays, the default is 5 secs. This must be a whole number.
7. Select Save.

Active

Select Active to set this design as active for your website and for any changes to be visible. Only one design can be active.

URL redirects

Do not set URL redirects unless you know what you are doing.

Save

Once you’ve finished creating the design, select Save. 

Note: A list of fields to correct will display if any required fields weren’t completed.