Shoponents LogoShoponentsX (twitter) Logo

DealBar Documentation

This guide will walk you through how to set up and configure your DealBar and DealCards. By the end of this guide, you'll know how to do everything step-by-step to set up a DealBar on your store. Try it out and see how it works for yourself on the Demo Store. (password: dealbar)

image

Visit the App Listing page on the Shopify App Store and click Install to get started with DealBar. If you are having issues using DealBar on your Shopify store, please contact our Support. Connect with us on X (Twitter) to learn more about our roadmap and upcoming features with DealBar as well as other apps we are working on. Feel free to reach out to us and ask us any questions over there, and we'll be happy to chat with you.

Creating DealCards

The first step to setting up your DealBar is to create one or more DealCards. You can have up to 12 DealCards at one time. There are two types of DealCards you can choose from which are called Savings Cards and Discover Cards. We will talk more about the differences between them shortly.

Welcome Screen

DealCards are configured in the Shopify Admin dashboard. Navigate to the Apps section in the dashboard and select DealBar. You will be presented with the Welcome Screen where you are invited to create your first DealCard. Click Create Deal to open the DealCard Modal.

image

DealCard Title

The DealCard Title is a required field and should be concise, relevant, and engaging. For instance, 'Flash Sale Up to 50% Off' or 'Discover Our Fall Collection' effectively summarize the content or action of the card. The title field has a 50-character limit and allows for up to two lines before truncating, ensuring a clean and visually appealing layout.

image

DealCard Card Type

The 'Card Type' is a required field that defines the primary purpose and functionality of the card. There are two main types: 'savings' and 'discover.' A 'savings' card is typically used to promote discounts, special offers, or coupons. For example, it might feature a coupon code for free shipping on orders over $99. On the other hand, a 'discover' card is more informational and can be used to highlight new products, collections, or features. It aims to engage customers and guide them towards new or specific areas of interest on your site.

image

DealCard CTA Text (Discover Type Only)

The 'CTA Text' (Call To Action Text) is a required field, but only applicable for cards with the 'discover' type. This is the text that will appear on the button prompting the user to take action, like 'Shop Now' or 'Discover More.' The text should be short, direct, and compelling to encourage users to click. Keep it to a few words to ensure it fits nicely on the button.

image

DealCard CTA Link (Discover Type Only)

The 'CTA Link' (Call To Action Link) is also a required field for 'discover' type cards. This is the URL where the user will be directed upon clicking the CTA button. Make sure the link is relevant to the card's content and action, leading directly to the product, collection, or offer being advertised. It should be a full and valid URL or one that is relative if directing to a link on your store.

image

DealCard Input Field (Savings Type Only)

The 'Input Field' is specific to 'savings' type cards and is a required field for that card type. This is where you input the coupon or discount code that users will apply at checkout. Unlike other card types, the 'savings' card uses this field to display the code directly on the card, rather than a CTA button and link. The text should be concise, as space is limited, and it should clearly represent the offer, for example, 'FREESHIP99' for free shipping on orders over $99.

image

DealCard Image

The 'DealCard Image' is a required field and plays a crucial role in attracting user attention. For optimal viewing, the image should have an ideal height of 175 pixels and a width of no more than 325 pixels. The image dimensions are important as they directly impact how well the card integrates with the overall layout. Make sure to use high-quality, relevant images to effectively convey the card's message or offer.

image

DealCard Highlight (Featured) Text

The 'DealCard Highlight (Featured) Text' is an optional field that allows you to spotlight key information or promotions, such as 'New Arrivals' or 'Limited Time Offer'. This text is typically displayed in a prominent, eye-catching manner on the DealCard. Utilizing this field can grab the user's attention and provide immediate context or urgency to the offer or content presented on the card.

image

DealCard Info Text

The 'DealCard Info Text' is an optional field that serves to provide quick, supplementary information about the deal or offer. Ideally, this could be used to indicate the expiration date of a deal, such as 'Expires Dec 31' or simply 'No Expiration' if the offer is ongoing. This brief note adds context and can create a sense of urgency, encouraging users to take action.

image

DealCard Details Description

The 'DealCard Details Description' is a field designed to provide a comprehensive overview of the offer or deal when the user clicks the 'More Details' button on the card, essentially 'flipping' it to reveal the backside. This is the area to elaborate on what the offer entails, the value proposition, or any other relevant information that helps the user understand the deal better. Being a more detailed section, you have the flexibility to use more text compared to other sections of the card.

image

DealCard Terms and Conditions

The 'DealCard Terms and Conditions' field is intended for legal specifics and fine print related to the offer or deal. Unlike the 'DealCard Details Description,' this section should contain the rules, limitations, and legal clauses that customers need to be aware of. If both the 'DealCard Details Description' and 'DealCard Terms and Conditions' fields are left empty, the 'More Details' button will not appear on the front of the card, effectively hiding the flip functionality.

image

DealCard Start Date

The 'DealCard Start Date' field allows you to set when the deal card becomes active. You can either choose 'Start Immediately' to make the card active as soon as it is created, or you can pick a future date and time at 30-minute intervals. It's important to note that the start date can only be set during the card's creation and cannot be updated afterward. In the admin panel, active deal cards are indicated by a green bar, while pending ones have a yellow bar. Only active deal cards will be displayed to merchants, ensuring that your intended offers are the ones being seen.

image

DealCard End Date

The 'DealCard End Date' field allows you to specify when the deal card will expire. This date can only be set during the card's creation and cannot be updated afterward. If you choose to leave the 'Include End Date' box unchecked, the deal card will remain active and continue to be displayed to merchants until you manually delete it. In the admin panel, deal cards that are set to expire within the next 48 hours are indicated by a red bar, making it easier for you to keep track of time-sensitive promotions.

image

Reordering DealCards

Reordering DealCards is simple and intuitive, done entirely through a drag-and-drop interface. Once you've arranged the cards to your liking, don't forget to click "Save" to apply the changes. Keep in mind that only DealCards with a green bar (active) or a red bar (expiring within 48 hours) will be displayed to customers, regardless of their position in the order. DealCards with a yellow bar are still pending and won't be shown to customers.

image

Updating DealCards

Updating a DealCard is straightforward—just click on the DealCard you wish to modify, and the editing modal will reopen. Here you can adjust any properties, such as title or description, with the exception of the start and end dates. If you need to change the start or end dates, you'll need to delete the DealCard and recreate it. Good news—Version 2 of DealBar is on the horizon and will offer a revamped admin UI with even more options for DealCard management. Stay updated by following us on Twitter.

image

Deleting DealCards

Deleting a DealCard is a quick process—simply click on the DealCard you wish to remove, and then select the "Delete" option. The card will be immediately removed from your DealBar and will no longer appear to customers.

image

DealBar Configuration

This is the control center for customizing your DealBar and associated DealCards. Here, you'll find global settings that allow you to tweak everything from the appearance and text of the DealBar to more advanced options like excluding or including the bar on specific pages. Manage text color, background themes, call-to-action buttons, and even the visibility of active offers. Each setting is designed to give you granular control over how your promotions are displayed to customers.

Enabling/Disabling DealBar

This section allows you to toggle the DealBar on or off. Disabling it will remove the bar from all pages where it is currently displayed.

image

Seeing Your New Changes

After creating or updating a DealCard, you may not see the changes immediately in the admin section. To view the updated content, you have two options: 1) Close your browser and reopen it, or 2) If you are feeling adventurous, you can manually clear the "dealCards" object from your session storage. Video: https://www.youtube.com/watch?v=o6oEh_Xirrs. This caching mechanism is designed to enhance the customer experience by reducing network calls during each page visit. Once the customer closes their browser and reopens it, a fresh network call is made to fetch any updated DealCards. Note that even though the cards are stored in session storage, expired cards are still filtered out to ensure accuracy, even in case of long browser sessions by the customer.

image

DealBar Text

This is where you can set the text that appears on the DealBar. This text is usually a short call-to-action or announcement.

image

DealBar Background Color

Select the background color of the DealBar. It’s important to choose a color that complements your website’s color scheme.

image

DealBar Text Color

Choose the color of the text displayed on the DealBar. Make sure it is readable against the background color.

image

DealBar Highlight Background Color

Specify the background color for any highlighted text or elements on the DealBar.

image

DealBar Highlight Text Color

Set the text color for any highlighted sections of the DealBar. It should stand out but still be readable.

image

DealBar CTA Background Color

Choose the background color for the call-to-action (CTA) button on the DealBar.

image

DealBar CTA Text Color

Select the color of the text inside the CTA button. Ensure it contrasts well with the background for readability.

image

Hide Offer Count

This allows you to hide the number of offers currently active. Useful if you wish to simplify the appearance of the DealBar.

image

Exclude/Include Pages

Specify which pages the DealBar should or shouldn’t appear on. Useful for targeting specific audiences or sections of your website.

image

Uninstalling DealBar

If DealBar didn't work out for you, no hard feelings. To uninstall, simply go to the admin panel, locate the icon in the top-right corner, click on it, and select 'Uninstall' from the dropdown menu. It's as easy as that!

image