Customising Checkout

Technical Q&A
,
1

Hello!

I could use a bit of help..I would like that when someone on our e-shop checkout chooses ‘Pick up in Store’ that the payment method ‘Cash on Delivery’ disappears and when someone chooses ‘Shop by Courier’ that the payment method ‘Pay in Store’ disappears.

Can anyone help me out?

Thanks! :slightly_smiling_face:

2

Hi @svdam

I am from Mageplaza - Shopify solution expert.

To customize the checkout options in Shopify based on the selected delivery method, you’ll need to use Shopify Plus, as Shopify’s standard plans have limited checkout customization capabilities. If you’re on Shopify Plus, you can utilize the checkout.liquid file and scripts to achieve this dynamic behavior.

Here’s a general approach:

1. Create or modify checkout scripts:

Use Shopify Scripts (available on Shopify Plus) to manipulate payment options based on shipping methods.

2. Sample logic for Scripts:

When ‘Pick up in Store’ is selected: Hide ‘Cash on Delivery.’
When ‘Shop by Courier’ is selected: Hide ‘Pay in Store.’

3. Implementation Steps:

Access the Shopify Script Editor.
Write a script like:

# Shopify Script example (Ruby)
SHIPPING_METHOD_PICKUP = "Pick up in Store"
SHIPPING_METHOD_COURIER = "Shop by Courier"

PAYMENT_COD = "Cash on Delivery"
PAYMENT_STORE = "Pay in Store"

if Input.shipping_method == SHIPPING_METHOD_PICKUP
  # Hide 'Cash on Delivery'
  if Input.payment_method.name == PAYMENT_COD
    Output.payment_methods = []
  end
elsif Input.shipping_method == SHIPPING_METHOD_COURIER
  # Hide 'Pay in Store'
  if Input.payment_method.name == PAYMENT_STORE
    Output.payment_methods = []
  end
end

Note: Adjust the code with your actual shipping and payment method names.

4. Alternative (for non-Plus plans):
Limited options via JavaScript on the cart page (not as reliable since checkout pages are restricted).

Please let me know if it works as expected!

Best regards!