How can I change specific menu item color and alignment on product pages?

Store Design
, ,
1

Hello, can you please tell me how can I make the “sale” in permanent red on desktop and mobile?

Is there a way to change the background color of “add to cart” button on product pages?

Also, in the product page, I have 3 segments which are showing in the middle of the page but I want them left aligned, how can I fix that? Please see attached.

Thanks in advance.

2
  1. In the code editor, find and open the theme.scss.liquid file under the “Assets” directory.
  2. Scroll to the bottom of the file or wherever you prefer to add custom CSS code.
  3. Add the following CSS code to change the color of the “sale” text:
.product-price__sale {
  color: red; /* Change to your desired color */
}
​
3

Hello @cocoanddee

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product-form__submit {
    background: blue !important;
}
4

Hi @cocoanddee .

I understand that you want to change this follwoing:

  1. Make the “sale” in permanent red on desktop and mobile (the word sale is on the header menu?)

  2. Change the background color of “add to cart” button on product pages. (which color you want to use?)

  3. In the product page, I have 3 segments which are showing in the middle of the page but I want them left aligned. (can you be more specific which product pages is this?

Try this for #1 and 2. If im right. Thanks!

  • 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 “theme.scss.liquid, styles.scss.liquid or base.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:
  • And Save.
span.header__active-menu-item {
    color: red;
}

button#ProductSubmitButton-template--18806226845995__main {
    background-color: red;
}
5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.header__menu-item[href="/collections/sale"] {
  color: red; /* Replace 'red' with your desired color */
 }
.product-form__submit {
  background: #5a31f4 !important;
  border-color: #5a31f4 !important;
  color: #fff !important;
}
.collapsible-content-wrapper-narrow {
  margin-left: 23%;
}

ZestardTech_0-1686044908030.png
ZestardTech_0-1686044908030.png1509×794 143 KB

ZestardTech_1-1686044920485.png
ZestardTech_1-1686044920485.png1585×539 256 KB

ZestardTech_2-1686044937145.png
ZestardTech_2-1686044937145.png1629×550 117 KB

6

Thank you for your reply. Much appreciated! Everything works fine except the collapsible items are still in the middle and not left aligned? Please see attached.

7

Thanks for your help. The collapsible items are on all product pages. Please see attached. I need it left aligned.

8

Collapsible items are “Fast and free shipping” and “30 days extended returns”

9

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.collapsible-content-wrapper-narrow {
    margin-left: 20.5%!important;
}
10

Thank you for your reply. That sort of works. Is it possible to make this collapsible item width smaller and place it under the item description instead just under the “share” link?

11

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.collapsible-content-wrapper-narrow {
    max-width: 40.4rem!important;
}
.collapsible-content-wrapper-narrow {
    margin-right: 18.5%!important;
}

ZestardTech_0-1686649890936.png
ZestardTech_0-1686649890936.png1889×739 137 KB

12

Perfect! Thanks a lot!

13

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.