Cart customization.
dharmik
Last Update 10 เดือนที่แล้ว
First, click on 'Customize' on the left-side menu. Alternatively, in the Dashboard page, navigate to the 'App Setup' section and click on the 'Customize Cart' option. On the right side, you will see the 'Go to Customize' button. Click on the 'Go to Customize' button.
There are two sections: the 'Widgets' section, where you can customize different widgets for your cart setup, and the 'Color Settings' section, where you can adjust the colors of your all widgets.
Color Settings
Go to the 'Color Settings' section, and then click on the 'Cart' section to set the colors for the Cart.
You can customize the appearance of the 'Cart' to your liking.
Widgets
On the right side of this Customize page, you will find the 'Widgets' section. In this section, you can see 'Cart Widgets'. Click on the 'Cart Widgets'.
(1) Cart upsell
In the 'Cart Upsell', click the eye icon to reveal/hide the 'Cart Upsell'.
Next is 'Select product type', there are three options available for product upsell.
1. Shopify Recommendation: This option provides product recommendations from Shopify`s algorithm, which uses data to determine which products are most valuable or relevant to your customers.
2. Specific Product: This option allows you to manually choose which products to display in your cart widget.
3. Abandoned Product: This option displays products that were previously added to the customer`s cart but were not purchased for some reason.
Next is 'Product rows.' In this field, you can use these options to set two or more products in a row in the cart.
Next is 'Discount type', there are four options available for product upsell discount.
1. No Discount: This option will not provide any discount when the customer adds the product to the cart.
2. Percentage: This option applies a discount in percentage that you set on the product when the customer adds it to the cart.
3. Fixed Amount per Item: This option applies a fixed discount amount for each item when the customer adds it to the cart. This discount applies each time the customer increases the quantity of the product.
4. Fixed Amount: This option applies a fixed discount amount only once when the customer adds the product to the cart.
After selecting 'Percentage' as the discount type for the progress bar upsell, you can specify the discount value in percentage that will be applied when the offer value is reached.
After selecting the 'Fixed Amount per Item' as the discount type for the upsell products, you can specify the fixed discount amount for each item when the customer adds it to the cart. This discount will be applied each time the customer increases the quantity of the product.
After selecting the 'Fixed Amount' as the discount type for the upsell products, this option applies a fixed discount amount only once when the customer adds the product to the cart.
Next is 'Discount code name.' In this field, you can change the name of the discount code that will be visible after the customer accepts any offer.
Next is 'Button Text,' you can change the button text according to your needs and language preference.
Next is 'Show Compare Price.' Check the 'Show Compare Price' checkbox to display the compare price. If you want to hide the compare price, uncheck the 'Show Compare Price' checkbox. This checkbox allows you to control whether or not the compare price is displayed in the upsell.
(2) Show cart icon
In the 'Show cart icon', click on the eye icon to reveal/ hide the 'Show cart icon'.
You can customize the 'Cart icon color', 'Cart icon background color', and select a 'new icon' or 'upload an icon'.
Choose the 'Cart icon position' to adjust its appearance on your store.
In the 'Cart icon position offsets' you will find two fields: the first one is for adjusting the 'X offset' (left and right spacing), and the second one is for adjusting the 'Y offset' (top and bottom spacing). You can use these fields to customize the spacing according to your preferences.
(3) Show Announcement bar
In the 'Show Announcement bar', click the eye icon to reveal/hide the 'Announcement bar'.
In the 'Show Announcement bar', you see the 'Announcement bar title' text editor. This is where you can change the text for the Announcement bar title in the Cart widget. Feel free to change the text to fit your store better or match the language you prefer.
(4) Show timer bar
In the 'Show timer bar', click on the eye icon to reveal/hide the 'Show timer bar'.
Use this option to change the text displayed in the timer bar.
Note: Do not remove {{timer-value}}, as this value is used to show the timing. If you remove this value, the timer will not be displayed. Additionally, if you want to reset this value, simply copy the value below in the text editor and paste it into the text field. The timer will be reset.
To set the duration of your timer offer, enter the number of minutes in the field. The timer widget will automatically calculate and display the corresponding minutes and seconds remaining until the offer ends.
In the Timer Bar expire actions, there are three options available:
1. Reset Timer: The timer will start again and continue counting down.
2. Hide Timer: The timer will stop counting, and the timer widget will be hidden. The offer will remain available, but the timer display will be hidden.
3. Hide Timer & Show Message: The timer will stop counting, and a message will be displayed to inform the customer that the offer has expired.
After selecting 'Reset Timer,' the timer will start again and continue counting down, providing customers with the full duration of the offer.
After selecting 'Hide Timer,' the timer will stop counting, and the timer widget will be hidden. The offer will still be available, but the timer display will be hidden.
After selecting 'Hide Timer & Show Message,' the timer will stop counting, and a message will be displayed to inform the customer that the offer has expired.
Next is 'Timer bar expire message', Use this option to edit the text shown when the timer bar expires.
(5) Show compare price
In the 'Show compare price', click the eye icon to reveal/hide the 'Compare price'.
(6) Order calculation section
In the 'Order calculation section', click the eye icon to reveal/hide the 'Order calculation section'.
You can check or uncheck the 'Show apply discount section' checkbox. If you check this box, it will display the Apply Discount section in the cart widget, and if you uncheck it, the Apply Discount section will be hidden.
in the 'Order calculation section'. you'll see the 'Apply button text' field available in this. Use this field to change the Apply button text according to your language and other needs.
This is the text that will appear on the button that customers click to apply the discount.
In the 'Order calculation section', you'll see the 'Add coupon code placeholder' field. You can change the text of the 'Add coupon code' placeholder to your language and other needs.
In the 'Order calculation section'. you'll see the 'Coupon code validation msg' text editor field available in this section. This text will be displayed when customers enter an incorrect or invalid coupon code. You can modify this message according to your language and other needs.
In the 'Order calculation section'. you'll see the 'Cart Sub total text' field available in this section. Use this field to change the Cart Sub total text according to your language and other needs.
In the 'Order calculation section', you'll see the 'Discount name text' field available in this section. Use this field to change the Discount name text according to your language and other needs.
In the 'Order calculation section', you'll see the 'Cart total text' field available in this section. Use this field to change the Cart total text according to your language and other needs.
In the 'Cart empty text' text editor field, use this field to change the cart empty text message. You can modify msg according to your language and other needs.
After that, click the 'Save' button, and your changes will appear in your store.