[Version 2] How to set up Sticky Button & Cart Drawer?

[Version 2] How to set up Sticky Button & Cart Drawer?

SLIDE CART SETTINGS

1. Visibility


  1. Enable "Slide Cart" on desktop: Tick on this option to show the Slide Cart on desktop version.
  2. Enable "Slide Cart" on mobile: Tick on this option to show the Slide Cart on mobile version.
  3. Auto open "Slide Cart" when user add to cart: Tick on this option to auto open the Slide Cart when adding an item to cart.
  4. Disable sticky footer: Tick on this option if you want customers to scroll down to see the Footer of Slide Cart to save space.

2. General settings


  1. Show option value of variant: Show short form of product variation (example: blue/small).
  2. Show custom properties: Show more custom properties if you use Custom Product Option app.
  3. Show compare-at price: Show compared price in each product item.
  4. Empty cart state content: Show a message on the Slide Cart when your cart is empty.
  5. Empty cart button text: Enter the button title when the cart is empty.
  6. Empty cart button URL: Add a link to direct your customers when they click on the Empty cart button.
  7. Not enough items text: Show a message below the line item when the product quantity is not enough to increase.

3. Bundle


  1. Integrate with Shopify Bundles: Tick on this option to integrate this feature to the Shopify bundle item.
  2. Show bundle text: Enter a message and number of bundle item.
  3. Hide bundle text: Enter a message and number of bundle item.

4. Subtotal


  1. Subtotal label: Enter the Subtotal title
  2. Show order discount tag in subtotal: Tick on this option to show Discounts and discount tag. 
  3. Total saving label: Enter the Total saving title

5. Checkout


  1. Checkout button text: Enter the Checkout button title.
  2. Show checkout message: Tick on this option to show a line of message above the Checkout button.
  3. Checkout message text: Enter the message.
  4. Show "Continue shopping" button: Tick on this option to show the Continue button below the Checkout button. Once you click on this button, the Slide Cart will be closed.
  5. Continue shopping text: Enter the title for the Continue shopping button.
  6. Show "View cart" button: Tick on this option to show the View Cart button. Once you click on this button, you will be directed to the Cart page of your store.
  7. "View cart" button text: Enter the title for the View Cart button.
Info
The View Cart button option will only show if you don't tick on the Continue button option.
If you want to restyle the Continue shopping or View Cart button as the style of the Checkout button, please contact the support team through the live chat. Our team will respond to you as soon as possible.

SLIDE CART STYLE

1. Template



We have multiple template for the Slide Cart. Once you choose the template, you're unable to customize it and it will override all the styles you set up before.

2. Style


  1. Font family: Apply font family from Google Fonts for the whole Slide Cart. If you leave it blank, the app will display your theme's font.
  2. Font size: Apply font size for the whole Slide Cart.
  3. Button size: Modify sticky button size.
  4. Cart drawer primary color: Apply color to checkout button and other buttons of different features.
  5. Cart drawer secondary color: Apply color to text of button.
  6. Cart drawer background color: Apply color to the Slide Cart's background.
  7. Cart drawer footer background color: Apply background color to the footer of Slide Cart.
  8. Text color: Apply color for the whole content of the Slide Cart.
  9. Sticky button background color: Apply color to the background of sticky button.
  10. Icon color: Apply color to the icon of sticky button.
  11. Cart counter background color: Apply color to the background of cart countdown feature and cart counter. 
  12. Cart counter text color: Apply color to the number of cart counter.

ADVANCED SETTINGS


  1. Show option value of variant: Show short form of product variant. For example: blue/small.
  2. Show custom properties: Recommend to enable this option if you're selling product with extra options.
  3. Note box: Display note box on the cart to allow customers leaving message for seller.
  4. Cart upsells: Display the upsell feature in cart by Product recommendation of Shopify or Shopify Search & Discovery app.
  5. Annoucement: Show a banner with countdown timer to announce your campaign or encourage customer to quick checkout.
  6. Shipping goal: Allow setting goal for cart that your customers will get Free shipping once a specific cart goal amount is reached.
  7. Edit variants: Allow customers to edit product variants in cart.
  8. Estimate shipping rate: Allow customers to estimate shipping costs before checking out. 
  9. Discount code box: Allow customers to add discount code. Discount will be calculated and applied on the Checkout page.
  10. Gift wrapping: Show an add-on service to offer gift wrapping item with checkbox layout.
  11. Shipping protection: Show an add-on service to offer shipping protection item with toggle button layout.
  12. Confirmation box: Display the confirmation checkbox. You could enable this option if you want customers to verify or accept something such as Terms & Conditions.
  13. Trust badge: Allow customers to upload image to show trust badge at the bottom of the cart.
  14. Express payment: Show payment button on the Slide Cart.
  15. Sticky button: set up the sticky button of our app.

1. Note box


  1. Enable note box: Tick on this option to enable the feature.
  2. Show note box as side features: Allow note box to be shown as a button at the Cart footer.
  3. Note label text: Add title below the note icon.
  4. Note placeholder: Add content to the note placeholder.
  5. Note title: Add content to display as a note title.
  6. Save button text: Enter content to the Save button.

2. Cart Upsells


  1. Enable advanced cart upsell: Tick on this option to enable the Cart upsells.
  2. Upsell label: Enter the title of the Cart upsell
  3. Upsell button text: Enter the name of the Add button
  4. Upsell display type: Select the type of the Cart upsell
  5. Upsell product card type: Change the Cart upsell layout
  6. Show next upsell product: Tick on this option to show a part of next item.
Info
If you want to set up the product in the Cart upsell by yourself, please refer to this article.

3. Annoucement


  1. Show cart countdown/cart announcement: Tick on this option to show the cart announcement.
  2. Announcement, countdown message: Message is displayed during timer counting backward.
  3. Apply countdown timer: Set up countdown duration.
  4. Action after countdown expired: Set action after the countdown timer expired:
    1. Reset time: The countdown timer will be reset after expiring.
    2. Clear cart: Added product will be cleared from the cart after expiring.
    3. Do nothing.

4. Shipping Goal


  1. Enable shipping goal: Tick on this option to enable the shipping bar
  2. General goal value: Type a total cart amount for the shipping bar
  3. Goal Reminder message: Enter the message in the “Goal reminder message” to motivate your customers to buy more and get free shipping.
  4. Goal Achieved Message: Enter the message when customers reach the goal.
Alert
You should keep the {amount} tag, it is used to display the amount of money that your customers need to buy more to enjoy free shipping.
  1. Enable shipping goals for different countries: You can tick on this option to add different total amount based on the different countries.
    1. Country: Type the country code that you want to apply the goal
    2. Goal value: Add the total amount for this country
    3. Add region: Add more countries to add different goals.
    4. Update: Click this button to save the settings. For example:


5. Edit variants



selectedImg
  1. Edit variant title: Enter the title for the Edit variant box
  2. Add to cart label: Enter the button name
  3. Unavailable title: Show the title when the variant is unable to change
  4. Sold out label: Enter the button name when the variant is sold out

6. Estimate shipping rate




  1. Shipping title: Enter the title for the Calculate shipping rate box
  2. Shipping label: Enter the title below the icon
  3. Calculate shipping rate button text: Enter the apply button title
  4. Empty shipping rate text: Enter a message to show up when there is no shipping rate for that region 
  5. Available shipping rate text: Show up when finding out the shipping rate box for the selected region

7. Discount code box




  1. Discount code title: Enter a title for Discount code box
  2. Discount code label: Enter the title below the icon
  3. Discount description: Enter a description for the Discount code box
  4. Discount placeholder: Enter the placeholder to the discount text box
  5. Discount save button text: Enter the title for the Apply discount button
  6. Show discount code next to icon: Tick on this option to show the discount code name when it is applied
  7. Invalid discount code message: Show up when the discount is invalid to apply

8. Gift wrapping

  1. Select gift wrapping product: Pick a gift wrapping product. You can refer to this article to learn how to set up a gift wrapping item.
  2. Gift message placeholder: Enter the description for the Gift message box
  3. Gift wrapping option: Choose an option to apply the price when adding the gift wrapping.
  4. Gift wrapping checkbox text: Enter a message on the Slide Cart. Please don't remove the {priceOfWrapping} param.

9. Shipping protection


  1. Select shipping protection product: Pick a Shipping protection item. You can refer to this article to learn how to set up a Shipping protection product
  2. Shipping protection title: Add a title for Shipping protection box
  3. Shipping protection description: Add a description below the Shipping protection title
Info
By default, the Shipping protection will be added automatically. If you want to turn it off by default, please contact the support team through live chat.

10. Confirmation box


  1. Enable Confirmation checkbox: Tick on this option to enable the feature
  2. Confirmation checkbox message: Leave the confirmation message in the text field. Or you can keep the default message content and insert your link by pasting it in the tag ‘paste your link here'. 
For example: I agree to the <a href='Qikify - Shopify Expert - Top Shopify services and Shopify apps’> Terms and Conditions </a>

Notes
Insert your URL by using HTML:
<a href="url">link text</a>
the <a> element is the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text will send the reader to the specified URL address. Or using Convert text to HTML tool to customize text.

11. Trust badge


  1. Enable Trust badge: Tick on this option to show the Trust Badge
  2. Trust badge image: Upload an image directly or paste the image link to show the image. 
Info
If you want to increase the image size, please contact the support team through the live chat to receive an immediate assistance.

12. Express payment


  1. Enable Express payment: Tick on this option to enable the feature.
Info
Please kindly follow this article to know how to set up the other payment buttons.

13. Sticky button


  1. Always hide sticky cart button: Tick on this option to hide the sticky cart button on storefront. You've hidden sticky cart, you should using theme buttons to open drawer
  2. Hide sticky cart button when cart is empty: It will show up when the cart has an item
  3. Enable draggable button: Tick on this option so that your customers could hold and drag the sticky cart button to another place on your storefront
  4. Button icon: Change the icon of the sticky cart button. If you need to use your custom icon, please contact the support team through the live chat to receive an immediate assistance.
  5. Position on desktop/position on mobile: Select the default position on desktop/mobile version.

Info
If you need any assistance or have any questions, please don't hesitate to contact our support team through the live chat or send us a ticket. We'll respond to you as soon as possible.

    • Related Articles

    • [Version 2] How to set up Sticky Add to cart?

      GENERAL SETTINGS Only show sticky add to cart when "Add to cart" button disappear: Enable this option so that the Sticky Add to cart only displays whenever the Add-to-cart button of your theme disappear. Only show sticky add to cart when user scroll ...
    • Design Quick View Button

      Icon Enable 'Show button icon' mode to display Quick View button icon. Choose the icon you want to display from the list. Button on Desktop Text To show text on button, switch 'Show button text' on. When button text is shown, the default text is ...
    • Sticky Cart Version 1.0 vs Version 2.0 - What Makes Version 2.0 Different?

      What’s new in Sticky Cart 2.0? New Interface Be designed based on the Shopify Interface that helps to create a consistent user experience for merchants Up to 15 new features Updated more advanced features to help sellers create high converting stores ...
    • [Version 2] How to set up cart upsell?

      There are 2 ways that you can use to display product recommendations in the slide cart to help customers discover products and boost your revenue: Method 1: Auto recommend by Shopify Shopify auto-generate upsell product recommendations based on the ...
    • [Version 2] How to set up free shipping?

      Offering free standard shipping is one of the best ways to generate more buyers on Shopify. Therefore, Sticky Cart ver 2 has updated Free Shipping Progressive Bar in Cart Drawer. It is used to improve your online store effectiveness and stimulate ...