Setting Your Cart Widget

What’s a cart widget?

Fondue’s Cart Widget is a comprehensive introduction to CashBack. It explains what CashBack is, how shoppers can redeem and use, the amount of CashBack a shopper will receive based on the value of the content in their cart, and lists the CashBack eligibility of products within their cart. 

Why is it important?

The cart widget serves as a reminder of the value of the promotion you’re offering the shopper. As they add products to their cart, they’ll see the CashBack value rise, affirming their decision to shop, and shop more, with you. 

Setting the widget within your cart

There are four options on how you can place your cart widget:

1. Auto Placement

By choosing automatic placement, we take care of the widget placement for you. This option works with a majority of sites, and all that’s needed on your end is to confirm the placement looks good within your cart. 

How to use Auto Placement

1. Create your first promotion! (If you have already created, skip to Step 2)
2. In Widget Placement Settings, select Automatic Placement > Save

Here's how you can check if the auto placement worked: 

After reviewing your auto placement, should you want to adjust the location, select “Theme Section” or “Manual Placement.”

2. Theme Section

Available for all Shopify Online Store 2.0 themes, Theme Section allows you to place the cart widget directly within the Shopify Online Store editor. This option allows you to drag and drop the widget exactly where you want it. 

How to Use Theme Section

1. Within your Brand Admin, go to Store Appearance > Cart Widget > Theme Section > Save
   • Important: This step must be completed before moving on. If not completed or another method is selected within your Brand Admin, the module won’t show within your Theme editor or on your site. 
2. Within your Shopify account, navigate to Sales Channels > Online Store
3. From the Themes page, locate the theme you want to modify and select Customize
   • You must be on a Shopify 2.0 theme to use Theme Section. Learn how to upgrade here.
4. Select Cart from the top dropdown menu 
   • Important: Be sure to add a product to your cart, as the module cannot be added to an empty cart!
5. Within the Subtotal section, select Add Block > CashBack Module
6. Click and drag the module to the desired location

3. Manual Placement

Prefer to customize your store to your taste? No problem. You can always place our widget manually wherever you want by using Custom CSS Selector or embedding a code snippet directly within your Liquid code for more complex sites.

Custom CSS Selector

CSS Selectors are used to find, or select, the HTML elements you want to style. To use, follow these steps: 

1. Find the element you want to target within your cart. The widget will be placed above the selector you choose. 
   1. Open a browser window to your site’s cart page
   2. Right click and open the web development tool (ex: select “Browser Developer” for Safari, or “Inspect” for Chrome)
   3. Ensure you’re within the Elements tab
   4. In the top left corner of the Inspect window, click the box icon that has an arrow within it. This will allow you to highlight specific elements within the page. 
2. Click the element you want to target to highlight it within the elements tab 
3. Right click and select Copy > Copy Selector
4. In your Brand Admin, go to Store Appearance > Cart Widget > Manual > Custom CSS Selector
5. Paste the selector into the Target CSS Selector field
6. Click Save

Code Snippet

Code Snippet means you can add our widget anywhere–in the cart, mini cart, on product pages, your grandmother’s house–you name it! We’ll provide you with the widget script that you can place into the Shopify Liquid files in your theme’s edit code section. To locate the script, follow these steps:

1. In your Brand Admin, go to Store Appearance > Cart Widget > Manual > Code Snippet
2. Copy the Contained Widget Script 

When you are editing a liquid file, use the code snippet displayed in the For theme parts that support Liquid box.

When you are editing a non-liquid file, use the code snippet displayed in the For theme parts that don’t support Liquid box.