Editing Product Pages: Brooklyn Theme

Solved
Highlighted
Excursionist
28 0 7

Hey guys! I'm having some issues with my product pages and was hoping someone could help me out.

I'm using the Brooklyn theme and have drop down menus for my variants. Right now, the titles are on top on each drop down menu and take up a lot of space (pictured below). I want to move the titles so they are inside the drop down menu and show as the default option (so instead of seeing the variant option, customers will see the title).

I also want to make the boxes longer and the heading smaller so they fit better across the page.

Capture.PNG

Can anyone help with this? Thank you in advance.

0 Likes
Highlighted

Hi KimberMiller,

What is your store URL so I can look at this for you.

Are you comfortable / confident with inserting code into your theme to make this happen?

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like
Highlighted
Shopify Partner
106 13 15

Hi,

Please share your URL.

 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
1 Like
Highlighted
Excursionist
28 0 7

The URL is www.shoplilyrose.co and the password is kna. I am comfortable with adding code.

Thank you!

0 Likes
Highlighted

This is an accepted solution.

Hi Kimbermiller,

Without trying to rewrite the theme, the easiest way to get results is to do the following;

Goto

Online store >> themes >> use the 'actions' menu to choose 'edit-code' in your active / live theme

Then find the bold heading 'Assets" and click that to open file names

Choose 'themes.scss.liquid' and a wall of code text will open on the right

Scroll all the way to the bottom and add the below

/* remove label on product page for variants */
.template-product .radio-wrapper .single-option-radio__label { display: none !important; }

/* product title size on product pages */
.template-product  .product-single__title {
    font-size: 1.571em !important;
}

Which will give the result

lily-variants.jpg

 

Now that code, the "1.571em"   is the font size of the heading. Adjust up/down as you like. Default is 2.571em for all devices.

The code will remove the variant headings only. To make the 'heading' part of the drop menu as above, without lots of rewrites, just goto the product and make THE FIRST VARIANT OPTION "Year" then 2019,2020,2021.  Then add a variant option called "mommy size" then small,medium,large,extra-large. etc etc

So basically the heading is a variant, its sneaky quick to get it into the menu like you want. And much simplier.

Hope this helps everyone    :)

 

 

h

 

 

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like
Highlighted
Excursionist
28 0 7

Thank you so much! That worked.

One more question - is there a way to add a border? 

0 Likes
Highlighted

This is an accepted solution.

Like this ?

border.jpg

 

 

use this code add the end of the file like above

/* border around variant option on product page */
.template-product .radio-wrapper {
border: #b76e79 solid 1px; }

Experiment with the #b76e79  which is color

1px  is the thickness of the border - try 10 px  LOL

solid can be dotted dash double solid   --  and a few more, google "css border style "

Have fun :)

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like
Highlighted
Excursionist
28 0 7

That's perfect. Thank you!!

0 Likes