Store Design Tab

The Store Design tab, formerly known as the Branding tab, includes all of the same great features you’re used to leveraging on your storefronts—now, with an organized view and real-time preview pane. 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.

Store Design Tab

When editing a store, click the Store Design tab from the Edit Store menu. Please note, the Store Design tab has replaced the former Branding tab.

Control Panel

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 (See Store Layouts HC Article)
• Branding
• Header
• Price Display
• Fundraising Tracker

Select A Store Layout

First, you will need to select a store layout from the ‘Select A Layout’ menu. Click the green ‘Select A Layout’ button to get started.

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 drawer contains basic branding options from: selecting a light or dark theme, uploading primary and secondary logos, and selecting primary and secondary colors for your storefront.

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. Other prefer it because it looks slick, and is becoming more and more common for online shoppers to use!

• Select a theme and click "Save Changes" for it to be applied to the storefront.

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.

• Set a color by using the color picker or inputting your own Hex code

Here is what the store footer looks like using the default secondary color (#333333)

Store 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.

• From the Store Design Tab, expand the Branding Drawer

• Enable the “Add image background” toggle to display the “Add image” button

• Click the “Add image” button to prompt the Image Gallery Modal. 
• 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.

• Once an image has been selected, click insert to apply the image to your store's background in the preview. 
• Click the “Save Design” button in the upper right-hand corner and your customers will see the changes applied to your storefront.

Select A Header

Uploading and Customizing your Store Banner

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 You have the ability to upload and customize banners seen by your customers on the storefront. There are three simple steps to configure your banner: 1) Select your header type, 2) Upload or select a banner image, and 3) Adjust banner settings.

Header Type

You have four options for a Header Type:

1. 'No Banner' will display the store title, secondary logo (if added), and store deadline (if available). As the name implies, there will be no banner image.
2. 'Standard Banner' will display all of the above, plus a banner image that you upload.
1. If uploading a banner image, the recommended size is 1920 pixels by 512 pixels.
2. You will be able to preview your uploaded banner under the 'Preview' label
3. 'Banner with Overlay' places the secondary logo (if added), store title, and store deadline (if available) over the banner image you’ve selected.
4. ‘Hero Header’ has all of the functionality of ‘Banner with Overlay’, plus allows you to input custom text and set-up Call-To-Action buttons.

Note: ‘Banner with Overlay’ and ‘Hero Header’ are only available with the Advanced Branding premium package subscription. To subscribe to Advanced Branding, navigate to Dealer Settings > Premium Features > Advanced Branding in the app. Only Owner and Accountant roles can activate premium features.

Here is what the store looks like with no Banner. 

Here is what the store looks like with the Standard Banner. 

Here is what the store looks like with a Banner with Overlay.

Upload or Select Banner Image from the Image Library

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 to 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 from 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.

Before using the Banner with Overlay or Image Library feature, you must first enable the Advanced Branding premium feature package. Activate this package under Dealer Settings > Premium Features.

Note: Premium feature subscriptions apply account-wide. Only Owner and Accountant roles can access the Premium Features page. If you are the Owner or Accountant of your business and cannot access the Premium Features page, email support@ordermygear.com.

Adjust Banner Settings

You have multiple options to help set up the banner image on your storefront:

1. ‘Use Full-Size Image’ & ‘Use Cropped Image’ is available for Standard Banner header types.
   • ‘Use Full-Size Image’ allows you to display the full width and height of an image. We left this functionality for customers who like portrait-style images as banner images.
   • ‘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 both Standard Banner and 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 ‘Light’, ‘Medium’, or ‘Dark’. This allows you to ensure you image contrast from the logo and text over your banner image.
     
4. ‘Large’ and ‘Small’ text are available in the hero header. Any text inputted into this field will be viewable in the preview and on the storefront.
5. ‘CTA’ (Call-to-Action) allows you to link to products, categories, bundles, or custom URLs. Title your CTA by inputting text into the ‘CTA Name’ field. Define the CTA’s destination by clicking the ‘Select a Link’ button to prompt your available options.

Note: Opacity, Large/Small Text, and CTAs are only available with the Advanced Branding premium package subscription.

Display Store Close Date

• When 'Display Store Close Date' is turned on, the store will include the deadline banner on the storefront so customers know exactly when the store will close.
• If you do not have a store deadline, this toggle will not appear.

Here is what a store header looks like with the close date.

Here is what a store header looks like without the close date.

Price Display Type

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

Fundraising Tracker

For a walkthrough on setting up the Fundraising Tracker, click here

Store Preview Area

Preview real-time updates as you edit the branding on the storefront before publishing your edits.