App Builder Elements and Images

Learn about the graphical elements and where they go

Let's start with the Home View under the Builder tab

Screen Shot 2019-07-10 at 9.51.57 AM

SEARCH BAR

The search bar sits at the top of the app. All elements are 'drag and drop'

Screen Shot 2019-07-10 at 9.55.24 AM

By hovering over the search bar, and clicking the pencil icon, you can then edit font and color. Click 'Update' to apply your changes.

Screen Shot 2019-07-10 at 9.59.04 AM

MARQUEE IMAGE

The first thing you customers will see is your marquee. Use this space to feature great looking graphics, new collections, promotions, and items from your store. You’re also able to add multiple images to create a carousel slideshow.

Screen Shot 2019-07-10 at 10.21.50 AM

When using multiple images, you can choose how much time elapses (1-15 seconds) until the image changes.

Screen Shot 2019-07-10 at 10.26.01 AM

You'll then need to link your image

Screen Shot 2019-07-10 at 10.41.29 AM

After updating and returning to the editing screen (pencil icon), you can select your next image if using multiple images.

Screen Shot 2019-07-10 at 10.43.18 AM

From the 'Edit Design' tab, you can change font, color, and button label

Screen Shot 2019-07-10 at 10.51.48 AM

NOTE: If you change fonts, you will have to resubmit your app for these changes to take effect

Screen Shot 2019-07-10 at 10.54.11 AM

COLLECTIONS

This element allows you to feature multiple items that users can swipe through to view.

Screen Shot 2019-07-10 at 11.16.17 AM
Screen Shot 2019-07-10 at 11.17.39 AM

You can also edit the display type to a 'Grid View' or 'Rounded Icons'

Screen Shot 2019-07-10 at 11.28.18 AM

ITEM IMAGE

This element is for selecting an individual image you want to feature.

You can search for a specific item name, or just click 'Search' with a blank field to display all.

Screen Shot 2019-07-10 at 11.43.17 AM

*** TIPS & TRICKS ***

If there's a specific color you want to select to match existing branding, or from an image you like, there's an easy way to get the exact match. Color Select From Image

Screen Shot 2019-07-10 at 9.45.45 AM

Once you've selected the color, enter the Hex Code (#XXXX) in the editing tool. Easy!

Screen Shot 2019-07-10 at 1.02.01 PM

VIDEO (*Currently only Vimeo links are supported)

The video should reference the item for shoppers, as the item image will not appear. Selecting the desired item links it to the 'Add to Cart' button.

Screen Shot 2019-07-10 at 1.53.38 PM-1
Screen Shot 2019-07-10 at 1.53.49 PM

COLLECTION VIEW

Here, you can select how your collections will be displayed. Clicking the pencil allows you to edit which items appear in each collection.

Screen Shot 2019-07-10 at 2.03.13 PM

Note that multiple items were selected for 'Collection 1'. Those items are now added, leaving Collections 2-4 remaining to edit. Clicking the '+' allows you to add more items.

Screen Shot 2019-07-10 at 2.08.18 PM
Screen Shot 2019-07-10 at 2.01.39 PM
Did this answer your question?