Store Design Tab

The Store Design tab includes all of the features you would need to edit the look and feel of your storefront. With the Store Design tab, users can view edits to the storefront in real-time, allowing you to customize stores faster and more efficiently than ever before. For a size guide for images please click here.

Store Design Tab

When editing a store, click the Store Design tab from the Edit Store menu.

Once you’ve clicked on the Store Design tab, you will see a control panel on the left-hand side allowing you access to a variety of features to customize your storefront:

• Select A Layout
• Branding
• Header
• Price Display
• Fundraising Tracker

Select A Store Layout

Selecting a layout will be the first step when customizing your store. Additionally, you can make your store into a landing page from this page. 

Note: You must be subscribed to the Advanced Branding package to access Premium Layouts 1-3. Learn more about setting up Store Layouts by visiting the Store Layouts Help Center Article.

Branding

The Branding tab contains basic branding elements including a light or dark theme, uploading primary and secondary logos, and primary and secondary colors for your storefront, and adding in an image background. 

Select Theme: Select Theme is a way for you to choose between light and dark display settings for mobile and desktop interfaces. It means that, instead of the default dark text showing up against a light screen (known as 'light theme'), a light color text (white or grey) is presented against a dark or black screen. Some prefer dark mode because it reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.

Light Theme Example                                                        Dark Theme Example

Primary & Secondary Logos: Use "Primary Logo" to add a logo to the top-left corner of your store; if you do not add a primary logo from the branding tab, your dealer logo will be used as the default primary logo (dealer logo found in Dealer Settings). Use "Secondary Logo" to add a smaller logo to the store as well that will show near the store title. 

Primary & Secondary Colors: Use "Primary Color" to set the color that will be used throughout the storefront experience. The primary color is used to style call-to-action buttons, the fundraiser tracker, the cart icon, and more. The primary color will be set to #0356B0 if none is added. Use "Secondary Color" to set the color that will be used in the footer section of the store. The secondary color will be set to #333333 if none is added.

Image Backgrounds: The Store Backgrounds features allow you to apply a fixed image to your stores background. The image will begin to appear after your store’s header and end at the store’s footer. As your shopper scrolls through the store, product images, banners, and image blocks will appear to pass over the background.

Step 1: Enable the “Add image background” toggle to display the “Add image” button

Step 2: Click the “Add image” button to prompt the Image Gallery Modal. 

Step 3: Drag an image in the designated box or click “select a file” to access your files on your desktop. Advanced Branding subscribers can click the Image Library tab to access a library of images provided by Unsplash.

Step 4: Once an image has been selected, click insert to apply the image to your store's background in the preview. 

Step 5: Click the “Save Design” button in the upper right-hand corner and your customers will see the changes applied to your storefront.

Header

Your store header is the first thing your customer will see when they enter your storefront. We know first impressions are everything, so we’ve made banner creation simple and easy.

Header Type: 

You have three options for a Header Type:

• No Banner: This will display the store title, secondary logo (if added), and store deadline (if available). As the name implies, there will be no banner image.
• Standard Banner: This will display all of the above, plus a banner image that you upload. If uploading a banner image, the recommended size is 1920 pixels by 512 pixels.
• Banner with Overlay: This places the secondary logo (if added), store title, and store deadline (if available) over the banner image you’ve selected. This banner will only be available to accounts with Advanced Branding activated. 

No Banner Example:

Standard Banner Example: 

Banner with Overlay Example:

Uploading Banner Image: You have the ability to upload a custom image or select an image from our Image Library. After selecting "Add Banner Image" or "Replace Banner Image", you will prompt a modal with two tabs "Upload" and "Image Library".

• Upload allows you to select any image file on your desktop. You can drag and drop an image in the preview area or click "select a file" to access images saved on your desktop.

• "Image Library" allows you to search millions of high-resolution stock images from Unsplash directly in the OMG platform and upload them to your storefront. Enter a keyword into the search bar, select an image, then click "Insert" to view the selected image on the branding tab. This feature is only available to accounts with Advanced Branding.

Adjust Banner Settings: You have multiple options to help set up the banner image on your storefront.

1. "Use Cropped Image" is available for Standard Banner header types. If this is toggled off it allows you to display the full width and height of an image. "Use cropped Image" allows you to view a banner image in the recommended size (1920 pixels x 512 pixels).

2. "Reposition Image" is available for Banner with Overlay header types. You’ll have the ability to adjust if the ‘Top’, ‘Center’, or ‘Bottom’ of an image is displayed in the banner area. For images that are significantly wider than they are tall, you’ll have the ability to adjust if the ‘Left’, ‘Center’ or ‘Right’ of an image is displayed in the banner area. 

3. "Opacity" is available for Banner with Overlay header types. You can define the opacity of the layer over your banner image by selecting "None", "Light", "Medium", or "Dark". This allows you to ensure your image contrast with the logo and text over your banner image.
   

Store Deadline: If there is a store deadline on the store you have the option to display that deadline on the storefront.

Price Display

The 'Price Display Type' option will allow you to configure how prices are displayed to the customer when they are browsing products.

Fundraising Tracker

You have the option to display the fundraising for the store on the storefront. For a walkthrough on setting up the Fundraising Tracker, click here.

Here's our recommended Size Guide: