Skip to main content

Customizing the cart widget

Edit the widget to match your store

Written by Clemency Farmer

You can change the widget's colors and style, and add your own icons. Your changes show in the live preview as you make them, so you can check your work as you go along.

These settings only apply to the new version of the cart widget. In the Settings > Appearance page, you can choose which version you use in the banner at the top.

You can move to the new version by clicking Try new widget, or revert back by clicking Switch back.

Edit the settings

  1. In Settings, click Appearance.

  2. Click Settings.
    Here you can:

Change the order of the checkout methods

  1. Under Sort order, you can change the position of the Pickup, Local Delivery, and Shipping delivery options buttons.
    ​

  2. To change the sort order, left-click and drag the desired delivery option button to your preferred position in the widget.

    • The method placed on the left will be chosen as the default method in the Zapiet - Pickup + Delivery widget.

    • You can see the sort order in the widget preview on the right.

  3. Click Save.

The widget will now show the checkout methods in the new order, as shown in the live preview.

Enable checkout method pre-selection

  1. Tick Pre-select delivery option on cart page.

  2. Click Save.

The first checkout method will now be selected when customers open the cart. To turn this off, untick the setting.

Show and reposition the method icons

  1. Tick Show icons if it is unticked. You can hide the icons by unticking this setting.

  2. Choose the icon position. You can have them:

    • Beside label

    • Above label

  3. Click Save.

The widget will now show your icons in the new position, as shown in the live preview. You can hide the icons by unticking this setting.

Show or hide images of your pickup locations

  1. Tick Show store image to show an image of your pickup location next to the store information in the widget.

  2. Click Save.

  3. To add the location images, go to Locations and open your pickup location(s).

  4. Under Store image, click Add image.

  5. Choose the file you want to upload.

    • We recommend dimensions of 512 pixels x 512 pixels

    • Accepted file formats:

      • .gif, .jpg, .png, and .webp

  6. Click Save.

Customers who choose pickup will now see an image of the location in the widget.

Edit the design

  1. In Settings, click Appearance.

  2. Click Design.

    You can edit the colors, style and icons that show in the widget.

Add custom colors

  1. Next to Colors, click the Expand icon expand to open the settings.

  2. Add your Accent color, and your On-accent color for the text and icons that appear on top of it

    • You can use the color picker or enter the hex or rgba code for the exact color.

  3. Add your container background color.

  4. Add your selected background and selected text and icons colors.

  5. Add your unselected background and unselected text and icons colors.

  6. Click Save.

The widget will now show your new colors, as shown in the live preview.

Edit the widget style

  1. Next to Style, click the Expand icon expand to open the settings.

  2. Choose your Corner style. You can choose from:

    • Square

    • Soft rounded

    • Rounded

  3. Click Save.

The widget will now show your new corner style, as shown in the live preview.

Add custom icons

  1. Next to Icons, click the Expand icon expand to open the settings.

  2. Upload your custom pickup, delivery and shipping icons.
    If needed, you can click Edit SVG to edit the SVG code.

  3. Click Save.

The widget will now show your new icons, as shown in the live preview.

Notes

  • Custom icons must be SVG files.

  • The custom icons will not replace your pickup, delivery or shipping text, allowing you to translate or change the wording as needed.

Did this answer your question?

Related Articles