Upload an image to promote a flash sale or a popular item. This element can link to a collection, product, blog or website without leaving the app. There are two layout options for this element, stacked & overlay.
Click on the “Design” tab from the navigation bar at the top of the StoreLab Platform.
Ensure you are on the “Homepage” of the App builder. Visible from the dropdown menu underneath the navigation bar at the top.
Within the homepage builder, click the “Add Element” button on the bottom right-hand side of the Homepage elements list.
From the list of elements, select “Image with Text”.
Add an image by clicking the “select an image” box under the “Content” heading on the right-hand element editor. Or, select an image from your media library (images you have previously uploaded to the StoreLab App Builder) via the “Media Libray” button underneath.
Note: Be sure to select an image in either JPG, PNG, or GIF format only. Also, ensure the file size is below 40MB for faster loading times. However, the file size is large enough to avoid any pixelation.
6. Once the image has been uploaded, you can adjust the height & image alignment below to your preferred look.
Heights:
Adapt (Use image aspect ratio): Maintains the original height and width of the selected image.
Medium, Large & Full Screen: Adjusts the image height to fill more of the screen.
Image Alignment:
Adjust the image position by Top, Middle & Bottom and Left, Center & Right combinations
7. If you want to add text to your image, add “heading” and/or “text”. See an example of each in the preview below.
8. Adjust the position of the text on your image by selecting your desired look from the drop-down menu under “Overlay Alignment”. See the previews below for an example of the different alignments available.
9. Assign an action to your Image element. Select front the following actions:
Collection: Link to a collection.
Products: Link to a specific product.
URL: Link to a relevant website, such as your social media or FAQs page. This will keep users within the App, using an in-app browser.
Discount: Copy a discount code straight to the user's clipboard for convenient use.
10. To add a button to your image, add “Action Text”. We recommend using an engaging call to action.
Note: Without a button, users will be able to click anywhere on the image element to initiate the assigned action.
11. If you would like to have the text appear below your image instead of over it, select the “Stacked” option from the “Layout”. See the examples below to see the difference between each.
12. As a final touch, you can add an animation to the image element.
Fade In
Slide Up
Slide Left
Focus In
Animations will appear when the user scrolls into & past the element on the homepage.
13. Once you are happy with the appearance, action, and layout of the image element, click the green “Save” button in the bottom right-hand corner of the element editor.
14. Drag & Drop your new element to your desired location on the Homepage.