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

Alex135
Astronaut
1890 1 448

Edit these values:

.section-header {
  margin-bottom: 30px;

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

 

0 Likes
Zach_Goldstein
Tourist
45 0 2

Hi Alex,

Sorry for the delay in responding, I was traveling this afternoon/evening. Just getting back in front of the computer and incorporated the changes as you showed me. It worked! Thank you so much for all your help!

Zach

0 Likes
Jeff_C1
Tourist
12 0 1

Alex,

Could you please help me edit these font families?

https://db.tt/OQTynZSa

Thank you so much!

Jeff

0 Likes
Alex135
Astronaut
1890 1 448

@Jeff Cheng -- Try adding the following to end of your CSS file.

.selector-wrapper label, .selector-wrapper select {
    font-family: ______;
}

I hope this helps.

0 Likes
Max_Peter
New Member
3 0 0

Sorry to jump in here, just have similar question:
Is it possible to use the original varaint options look (not drop down) but just format them to be under each other and not next to each other? (see here: https://www.dropbox.com/s/ouslfuhjl0pqhxs/Screenshot%202015-11-03%2011.27.44.png?dl=0)

Thanks!

0 Likes
Alex135
Astronaut
1890 1 448

@Max Peter -- Open Assets/theme.scss.liquid.  Look for the following and make changes at the indicated lines (<<<).

.single-option-radio {
  border: 0;
  padding-top: 0;
  position: relative;
  background-color: $colorBody;

  input {
    @include visuallyHidden;

    .lt-ie9 & {
      position: relative;
      height: auto;
      width: auto;
      clip: initial;
    }
  }

  label {
    @include accentFontStack;
    position: relative;
    display: table;                      <<<
    line-height: 1;
    padding: 9px 11px;
    margin: 3px auto 1px;                <<<
    font-size: em(13px);
    font-style: normal;
    background-color: $colorBody;
    border: 1px solid $colorBody;

I hope this helps.

0 Likes
Max_Peter
New Member
3 0 0

Thank you Alex! Did the job perfectly!

0 Likes
Michael_Anderse
New Member
35 0 0

Hi Alex,

I´ve done exactly as you suggested for the dropdown to no avail. The product variants simply don´t show up. Any pointers why? I had Langify installed which adds a LOT of .liquid tags to the product.liquid.

I reverted back to the original product.liquid and made the 2 changes but it´s not working.

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

Thanks,

 

Michael

0 Likes
tj15
New Member
1 0 0

hey do you know how to do this on the debut theme. It comes up like: S/M/L as one singular test but would like to change it into a drop down menu

0 Likes