Checkout page to become more visually compact

  • Posts: 37
  • Thank you received: 2
  • Hikashop Business Hikashop Essential
2 weeks 2 days ago #365535

-- HikaShop version -- : 5.0.3
-- Joomla version -- : 4.4.3
-- PHP version -- : 8.1

HI,

I would like to modify the checkout page to become more visually compact like a shopify page - I don't want to change the order of things like shopify. I have attached to you two images, one of my hikashop site and one from shopify.

May you can give me some suggestions in CSS? At the moment it is so spread out it is a little unpleasant.

Best regards,
Dimitris

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 83303
  • Thank you received: 13468
  • MODERATOR
2 weeks 2 days ago #365536

Hi,

You can restrict the width available to make it more compact:

div#hikashop_checkout {
    max-width: 600px;
    margin: auto;
}
.hikashop_checkout_login .hkc-lg-8 {
    width: 100%;
}
.hikashop_checkout_login .hkc-lg-4 {
    width: 350px;
    margin: auto;
}
This results in this:
imgur.com/a/Vo3c1UM

The following user(s) said Thank You: guro

Please Log in or Create an account to join the conversation.

Time to create page: 0.056 seconds
Powered by Kunena Forum