Jump to content

customise product selection boxes.

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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%;
}
}

image.thumb.png.f9fcef17c17a29aaef286b7435ba4fc8.png

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.

image.thumb.png.b3abd27b7969130933046e1b9f7857ea.png

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;
}
}

image.thumb.png.e61af2b99512734421c6a54a4a3ed521.png

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

image.thumb.png.410e3f662d78000dceff5a864d7042bd.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.