Would like to show variant title and move location for variant selection

Store Design
, , ,

Topic summary

A user wants to display the variant option title (“24V 100W Solar Panels (Optional)”) on their product page and reposition the variant selector to the left side of the page.

Current Issue:

  • Variant label not appearing on product page
  • Variant selector needs to be moved to left alignment
  • User is running theme version “Dsl-version-7.1”

Solution Provided:
A community member shared CSS code to resolve both issues:

  1. Navigate to Shopify Admin → Online Store → Themes → Actions → Edit code
  2. Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  3. Add the following CSS at the bottom:
.product-form__item label {
  display: contents !important;
}
.shopify-payment-terms {
  padding-bottom: 1rem !important;
}

The solution includes a screenshot showing the expected result with the variant label visible and properly positioned.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have added variants to a product but the variant option title does not show on the product page (attached screenshot) Variant Label is 24V 100W Solar Panels (Optional). I would like for it to also be moved to the left ( example attached). Can I do this in the settings of my theme or does it require a change in the code.

Thanks!

Kelly

Screenshot 2023-11-25 at 3.42.02 PM.png
Screenshot 2023-11-25 at 3.42.02 PM.png1502Ă—1530 204 KB

Screenshot 2023-11-25 at 3.36.08 PM.png
Screenshot 2023-11-25 at 3.36.08 PM.png1472Ă—1162 73.2 KB

Screenshot 2023-11-25 at 3.40.06 PM.png
Screenshot 2023-11-25 at 3.40.06 PM.png1394Ă—1070 81.7 KB

1 Like
2

Hi @Kelly_Stratton

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Hello,

My store is live and published. Sorry. Would you be able to make a suggestions. I can provide more information if needed.

1 Like
4

Hello,

Do you have any expertise in the area?

5

The URL of the publish store is okay. I cant share some solution if I cant inspect it.Thanks!

6

Website url is:

https://portablepowerplus.com/

Thanks!

1 Like
7

@Kelly_Stratton

It would be great if you could share the product URL on which you are facing the issue, also share the name of the theme you are using currently it’s showing “Dsl-version-7.1”.

8

Hi @Kelly_Stratton

Sorry for the late reply, most of the times I miss the notification.

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.selector-wrapper.js.product-form__item label {
    display: contents !important;
}
shopify-payment-terms {
    padding-bottom: 1rem !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!