Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

customise product selection boxes.



  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

You mean reduce height, round border?

Posted Images

4 answers to this question

Recommended Posts

  • 0
8 hours ago, sundayseltzer said:

hi @tuanphan yes reduce height and round the corners. thanks

I don't see variant dropdown?

To apply for Quantity, add this to Home > Design > Custom CSS

.product-quantity-input input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-radius: 5px !important;
    border-width: 2px !important;


Link to post
  • 0

Also, some feedback your site.

1. Tablet. 

I think you can increase variant dropdown with, it will be better.

Add this to Home > Design > Custom CSS

/* variant dropdown size */
@media screen and (max-width:991px) and (min-width:768px) {
.ProductItem-details .product-variants {
    width: 100%;


2. Tablet. Footer is not very good, some text is break new line in ugly position.

I think you can increase column width, or change to 2 columns/row with Row 1: Contact Info + Socials - Row 2: Sponsorship - T & C.

What do you think? I will give the code.


3. Tablet. Home products button not align. If you want align, add this to Home > Design > Custom CSS

/* Align home products button */
@media screen and (max-width:991px) and (min-width:768px) {
.homepage a.product-title {
    min-height: 50px;


4. Some other problems, you can fix above then let me know, I will continue sending the code.

  • 4.1. Tablet menu has 2 items only. I think you can convert to normal menu (need custom code!)
  • 4.2. Tablet: Click Shop > It show Drinks, Merch >> I suggest you can show both 2 items under Shop, without clicking (I solved this for 2 members, if you want, I will give the code here).
  • 4.3. Similar 4.2, on Mobile
  • 4.4. Product Detail show number 1/3 on thumbnail. You can add Arrow Slider, customers will find it easier to navigate to the images. (use below code)

4.4. Add to Home > Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;

here is result


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...