Creating Drop-Down List for Sizes and Colors on Product Page in Brooklyn Theme

Zach_Goldstein
Tourist
45 0 2

Hi,

Is it possible to create a drop-down list for sizes and colors on the product page in the Brooklyn Theme, as opposed to having all the options visible at all times? I think this would be helpful to save space on the screen and make things look cleaner. Any suggestions/thoughts would be greatly appreciated. Here is my website just in case (publicrecapparel.com). As you can see, I think if I can kill some of the space being currently used for the sizes and colors, my accordion will show up higher on the page which will be easier for the user.

Thanks,

Zach

Alex135
Astronaut
1890 1 448

In product.liquid, you will find a comment block that will give you instructions on how to do that.

{% comment %}

  *IMPORTANT:*
  This theme uses a customized version of `option_selection.js` to support using radio inputs for
  color and size variants. The custom version is in `variant_selection.js`.

  If you wish to enable the default dropdowns for size and color
  you can change the liquid asset tag below from:

  {{ 'variant_selection.js' | asset_url | script_tag }}

  to

  {{ 'option_selection.js' | shopify_asset_url | script_tag }}

  If you use the default `option_selection.js` the labels for the dropdowns will
  appear outside the dropdown.

  You will also need to change `.radio-wrapper` to `.selector-wrapper` below.

{% endcomment %}

 

0 Likes
Zach_Goldstein
Tourist
45 0 2

Awesome, worked perfectly. Once again hugely helpful Alex. Question, can you point me in the right direction to edit some of the formating for the dropdown (font size, color of the dropdown, exact placement, etc.)? Also, I'd love to move my header up "All Day Every Day Pant" so it is in line with the top of the product photo.

Thanks in advance for any help.

Zach

0 Likes
Alex135
Astronaut
1890 1 448

Open Assets/timber.scss.liquid.  Look for and delete.

.product-single__meta {
  padding-top: 45px;
}

To edit the drop down menus, you'll need to be familiar with CSS.  There are two types of elements that you will want to style:  select and option.

0 Likes
Zach_Goldstein
Tourist
45 0 2

Great, thanks so much Alex. The padding change worked perfectly. I'll spend some more time googling for editing the drop down menus. Sounds like that might be above me for now.

One more question, is there a way to move all of the contents on the product page up so there is less space between the header and the assets? If you can see my website (http://publicrecapparel.com/products/all-day-every-day-pant) on your desktop, there is a lot of white space between the header and the product images / text. If I could move that up, then you'd be able to see the accordion even better when landing.

Thanks as always for being so helpful!

Zach

0 Likes
Alex135
Astronaut
1890 1 448

In timber.scss.liquid, you'll find:

.main-content {
  display: block;
  padding-top: $contentTopMarginSmall;       // Padding when viewing from tablet/mobile

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;
  }

  @include at-query($min, $large) {
    padding-top: $contentTopMargin;          // Padding when viewing from desktop
  }
}

Change the values for padding-top.

0 Likes
Zach_Goldstein
Tourist
45 0 2

Thanks Alex. I've changed to: 

 @include at-query($min, $large) {
    padding-top: 40px;
  }

And it is working on my product page, but the header on the homepage is now too high. Any thoughts?

Also, there are two big changes that I'm trying to incorporate. I'm still googling and trying to do them myself, but I have a feeling I won't be able to figure them out on my own. Could I pay you a small fee to incorporate them? Are you for hire?

Thanks,

Zach

0 Likes
Zach_Goldstein
Tourist
45 0 2

Hi Alex,

I changed the padding back because I didn't want to leave the website looking funky for too long, but I'm guessing you know what I meant from my last message. Let me know if you want me to change it back so you can see what I was talking about.

Thanks,

Zach

0 Likes
Alex135
Astronaut
1890 1 448

Try this.  You can make changes to the values after you've tried it.

.main-content {
  display: block;
  padding-top: $contentTopMarginSmall;

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;
  }

  .template-index & {
    @include at-query($min, $large) {
      padding-top: $contentTopMargin;
    }
  }
}

 

0 Likes
Zach_Goldstein
Tourist
45 0 2

Hi Alex,

That worked! Thanks so much! Any idea how to kill some of the extra space between the title and copy on the about, contact, and blog pages (directly below the accent line and above the start of the paragraph text)?

Thanks,

Zach

0 Likes