Store Design Content Blocks

Header and Navigation Bar

What Navigation Headers would you like along the top of the screen? (See Image under Hero Slider to see what Navigation Header will look like).

• Select if a navigation items is a page or a category
  • For pages, select the page to link to
  • For categories, select the style of the menu:
    • Simple Link: Great for categories without subcategories
    • Hover Dropdown Menu: Great for categories with a single tier of subcategories
    • Mega Menu: Great for categories with two or more tiers of subcategories

Hero Slider

A full-width image and text slider for products and custom images. Generally the best content block to place right underneath the header. Upload an image. JPG and PNG file types are accepted. 5MB size limit. Dimensions are 1440x460px at Desktop resolution.

• Please Provide Image if you would like to add to site.
• Select transition style
• Set the duration between slide transitions
• Add and rearrange any number of slides to the slider
  • Select if a slide is a custom slide or a product slide
  • For product slides, select the featured product and add copy
  • For custom slides, upload a background image, add copy, toggle an opacity overlay, set the overlay or text color, and select a destination for the button

Hero Image

A full-width image with text overlay. Functionally equivalent to a single custom slide in the Hero Slider. Upload an image. JPG and PNG file types are accepted. 5MB size limit. Dimensions are 1903x460px at Desktop resolution.

• Please Provide Image if you would like to add to site.
• Upload a background image, add copy, toggle an opacity overlay, set the overlay or text color, and select a destination for the button.

Page Title

By default, Page Title is added to any new pages and features the name of the page in a light grey bar. The block can also be used for section headers or content breaks.

• Add a heading and set the text justification.

Category Carousel

Feature product categories in a cycling carousel.

• Toggle between an automatically scrolling carousel or a manually-scrolled carousel
• Set the duration between scroll transitions
• Add and rearrange any number of categories to the carousel. The category’s thumbnail image will display. If the category does not have an uploaded thumbnail, it will pull the alphabetically first product in the category to display.

Product Carousel

Feature products in a cycling carousel.

What Products would you like to feature in the Product Carousel?

• Toggle between an automatically scrolling carousel or a manually-scrolled carousel
• Set the duration between scroll transitions
• Add and rearrange any number of products to the carousel.

Featured

Two side-by side images with text overlay and multi-purpose buttons. Upload an image. JPG and PNG file types are accepted. 5MB size limit. Dimensions are 780x200px at Desktop resolution.

• For the left and right images, upload a background image, add copy, toggle an opacity overlay, set the overlay or text color, and select a destination for the button.

Grid

One large product or custom image with six product or category images, organized in a grid layout.

• Large Image
  • Upload an image. JPG and PNG file types are accepted. 5MB size limit. Dimensions are 621x472px at Desktop resolution.
  • Select if the large image is a product or custom image.
  • For a product image, select the featured product and add hover text.
  • For a custom image, upload an image, add hover text, and select a destination for the click
• Small Images
  • Toggle between a product or a category
  • Select the product or category

Banner

A centered, narrow image banner with an icon, text overlay, and a multi-purpose button. Upload an image. JPG and PNG file types are accepted. 5MB size limit. Dimensions are 850x150px at Desktop resolution.

• Upload a background image, add copy, toggle an opacity overlay, set the overlay or text color, select an icon to use, and select a destination for the button

Image

A standalone, centered image.Upload an image. JPG and PNG file types are accepted. 5MB size limit. Dimensions are 850x150px at Desktop resolution.

• Upload an image and provide alt-text

Video

A standalone, centered video. Recommendation: 850x478 (standard video ratio of 16:9)

• Enter a video URL to embed. Only works with “embed” links like “https://www.youtube.com/embed/oLV6yVrvrSg”
• Upload a background image if you’d like to replace the default video cover image, toggle an opacity overlay, set the overlay or play button color, and provide alt-text.

Text Block

A block of larger-sized text with an optional header that is ideal for small paragraphs or sentences of text, or for use with the header only as a section header or title.

• Add a heading and set the text justification
• Add the paragraph text

Body Copy

A block of smaller-sized text that is ideal for longer paragraphs.

• Add the paragraph text and set the text justification

Button

A multi-purpose button that inherits the store accent color and is ideal for calls to action after other content blocks.

• Add the button text, set the button justification on the page, and select a destination for the button

Spacer

Adjustable white space that can be added between any other content blocks to create breathing room for page elements.

• Adjust the height of the spacer, up to 200px

Contact

Provide a contact form, contact information, or both. Only editable in other pages besides the Design Home Page editor.

• Toggle between a one-column and two-column layout
• Toggle on or off the Contact Form section
• Add a Contact Form heading and set the text justification
• Add and reorder any number of form fields
  • Set the field title
  • Set the type of input that will be entered in the field for validation
  • Toggle if the field is required
• Add button text, set button justification, and add an email address to which the form responses should be sent
• Toggle on or off the Contact Info section
• Add a Contact Info heading and set the text justification
• Add and reorder any number of info blocks
• Set the info block title
• Set the type of info that will be added
• Add an email, address, or phone number

FAQs

Provide blocks that expand to reveal paragraph text when clicked. Only editable in other pages besides the Design Home Page editor.

• Add a heading and set the text justification
• Add and reorder any number of question blocks and enter answers in the paragraph text editors

Footer

Customize the storefront footer. Only editable in the Design Home Page editor.

• Add a contact name, address, email, and phone
• Add links to social media profiles or to corporate websites that will appear as icons in the footer
• Add any number of additional navigation links to other custom or default pages

Updated December 04, 2024 19:47