Customization for Products (Combinations)

Highlighted
Tourist
13 0 0

Hi there, could anyone assist me on how to have my 3 options to be on the same line? Also, I would like the dropdown box background colour to be #000000 with the words in #FAEBD7.  Thank you in advance!

Screenshots: Untitled.png

Code: 

			<p class="line-item-property__field">
  			<label>Canned Cocktail #1</label><br>
 			<select required class="required" id="canned-cocktail-1" name="properties[Canned Cocktail #1]">
    		<option value="Orh Huey">Orh Huey</option>
    		<option value="Ju Hua">Ju Hua</option>
    		<option value="Espresso Martini">Espresso Martini</option>
    		<option value="Skittles">Skittles</option>
    		<option value="White Sangria">White Sangria</option>
    		<option value="Red Sangria">Red Sangria</option>
  			</select>
			</p>
          <p class="line-item-property__field">
  <label>Canned Cocktail #2</label><br>
  <select required class="required" id="canned-cocktail-2" name="properties[Canned Cocktail #2]">
    <option value="Orh Huey">Orh Huey</option>
    <option value="Ju Hua">Ju Hua</option>
    <option value="Espresso Martini">Espresso Martini</option>
    <option value="Skittles">Skittles</option>
    <option value="White Sangria">White Sangria</option>
    <option value="Red Sangria">Red Sangria</option>
  </select>
</p>
          <p class="line-item-property__field">
  <label>Canned Cocktail #3</label><br>
  <select required class="required" id="canned-cocktail-3" name="properties[Canned Cocktail #3]">
    <option value="Orh Huey">Orh Huey</option>
    <option value="Ju Hua">Ju Hua</option>
    <option value="Espresso Martini">Espresso Martini</option>
    <option value="Skittles">Skittles</option>
    <option value="White Sangria">White Sangria</option>
    <option value="Red Sangria">Red Sangria</option>
  </select>
</p>

 

0 Likes
Highlighted
Shopify Partner
795 124 393

Hello @GeraldLee  ,
- You can use float: left & width:33.33% properties of css to make those in 1 row.
- give likes.
-contact for store customization: candisoft100@gmail.com

0 Likes
Highlighted
Tourist
13 0 0

Sorry, what about the colour background of the dropdown menu? To align it in one line, what code is to be input? Sorry, I am not an expert at HTML and CSS coding

 

0 Likes
Highlighted

Hello @GeraldLee 

Please share your site url.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
13 0 0

Sure, my website link is www.barlorong13.com. Head to SHOP > SPIRITS > Gordon's Gin. Although this customization (3 pack) will not apply to Gordon's Gin but to another product, I have temporarily changed it for you to amend. I would like the same for Brugal 1888 Rum, same case as above. But this is a customization for a 6 pack.

Again, these customizations will not apply to these products but to an upcoming product in the works. Thank you!

0 Likes
Highlighted
Tourist
13 0 0

Hi there, any updates on this issue?

I've placed a temporary password on the site: testtest123

0 Likes
Highlighted
Shopify Partner
55 9 11

Hi For Colors, Please apply following css

.product-single p.line-item-property__field select {
    background: #0000;
    color: #FAEBD7;
}

Your searchbar text color is dark too to fix that use following css 

.header-bar__module input[type="search"] {
    color: #FAEBD7!Important;
}

image.png

 

image.png

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted
Tourist
13 0 0

Thank you Robin! Do you know where to input these codes? 

0 Likes
Highlighted

@GeraldLee,

Please add above code at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
13 0 0

Thank you! However, the issue for having all 3 options to be on the same line has not been solved. Do you have a solution? 

An example of what I would like the page to look is :https://shop.rondenoculinarydesigns.com/products/rondeno-spice-collection-3-pack

Currently it looks like this: 
Untitled.png

0 Likes