This CSS template will help you to beautify the X-Delivery feature (using the Modern Gradient & Box Shadow concept) as shown in the images below.
(Use Category configuration as a home screen in X-Delivery Settings > Home screen)
In this template we have included 17 inner pages of the X-Delivery module.
- Well-structured professional CSS code with comments.
We have used CSS Variables in this code, so it’s very easy to customize it. Suppose you want to change the gradient color scheme in all the pages, then you just need to change the hex color code here only, instead of changing it at many places.
$xdelivery-gradient-color1: #7537E7;
$xdelivery-gradient-color2: #35C9FF;
Main Category List Page: Here in this page we have applied the search bar border radius, gradient background to section divider title with border radius, categories list item box shadow with border radius, category title bold font etc.
Main Category Grid Page: Here in this page we have applied the search bar border radius, gradient background to section divider title with border radius, rounded border radius to categories images, hide the description etc.
Products List Page: Here in this page we have applied the modern gradient background to the category title with fancy border radius, product titles bold font, product list item box-shadow with border radius etc.
Products Grid Page: Here in this page we have applied the modern gradient background to the category title with fancy border radius, product titles bold font, hide the product description etc.
Product View Page: Here in this page we have applied the modern gradient background to the add to cart button & description section divider, product image & description box-shadow with fancy border radius, product titles bold font with background color & box-shadow, button border radius & box-shadow etc.
Cart Page: Here in this page we have applied the modern gradient background to section divider titles, list item margin, box-shadow & border radius, proper text align, gradient checkout button with text uppercase, box-shadow, border radius etc.
My Account Login Page: Here in this page we have applied the login button gradient background with border radius, text uppercase etc.
Add Address Page: Here in this page we have applied the list item margin, box-shadow with border radius, gradient button background with border radius etc.
Edit Address Page: Here in this page we have applied the list item margin, box-shadow with border radius, proper text align, gradient button background with border radius etc.
Checkout Page: Here in this page we have applied the list item margin, box-shadow with border radius, gradient background to section divider titles with border radius, proper text align, gradient button background with border radius etc.
Confirmation Page: Here in this page we have applied the list item margin, box-shadow with border radius, gradient background to section divider titles with border radius, gradient button background with border radius etc.
Order Success Page: Here in this page we have applied the list item margin, box-shadow with border radius, gradient background to section divider titles with border radius, proper text align, gradient button background with border radius etc.
Wishlist Page: Here in this page we have applied the list item margin, box-shadow with border radius, proper text align, remove button background with border radius etc.
My Account Page: Here in this page we have applied the links margin, box-shadow with border radius, user details box-shadow with fancy border radius etc.
My Address Page: Here in this page we have applied the card box-shadow with border radius, title bold font, edit & delete button background with border radius etc.
Orders List Page: Here in this page we have applied the card box-shadow with border radius, gradient background to order titles & status, view details button background with border radius etc.
Order Details Page: Here in this page we have applied the list item margin, box-shadow with border radius, gradient background to section divider titles with border radius, proper text align, button box-shadow with border radius etc.
Notes:
- After purchase, you will get a CSS code which you can copy-paste in Colors Section > Advanced Customization CSS / SCSS Section.
- After purchase, you will get a zip file, just unzip it, you will find a txt file for CSS Code and a PDF File for instructions for CSS Codes Collection Module.
- You don’t have to upload this zip file anywhere.
- This is a CSS Template so support is only for any bug/error in the code. Customizations / Modifications are not included in the FREE support. If you need any additional changes, we will charge a nominal fee for our efforts and time.