Make 'Shop' button bigger header

agoedseels
Visitor
3 0 1

Hi, 

 

I want to make the 'shop' button in my header bigger. I don't know what the CSS class or selector is. Can you help me with that? 

This is my website: www.alglory.be

 

Thank you so much!

Replies 3 (3)

rishi1897
Shopify Partner
53 3 5

goto theme code > sections > image-banner.liquid

 

inside any {% style %}   {% endstyle %} tags , place the code

 

.button {

    width: 30rem !important;

    height: 4rem !important;

    font-size: 2rem !important;

}

 

please adjust these numbers according to your requirements.

Small_Task_Help
Shopify Partner
314 9 22

Hi,

 

To make the "Shop" button in your Shopify store's header bigger, you'll need to modify the theme's CSS code. Here's a general guideline on how to achieve this:

  • Log in to your Shopify admin panel.
  • From the left-hand sidebar, click on "Online Store" and then select "Themes."
  • Locate the theme you're using and click on the "Actions" button next to it. From the dropdown menu, choose "Edit code."
  • Note: It's always a good practice to create a backup of your theme before making any changes. You can do this by duplicating the theme.
  • In the code editor, find the file that controls the header. Typically, it's named header.liquid, header.liquid, or something similar.
  • Look for the CSS selector associated with the "Shop" button. It might be something like #shop-button, .shop-button, or similar. The exact selector may vary depending on your theme.
  • Once you've located the selector, you can modify the CSS properties to make the button bigger. You can increase the font size, padding, or adjust any other relevant properties.

Here's an example of how you can modify the CSS to increase the font size of the "Shop" button:

#shop-button {
  font-size: 20px; /* Adjust the value as per your requirements */
}

 

  • After making the necessary changes, click on the "Save" button to apply the modifications.
  • Preview your store to see the updated "Shop" button. If you're satisfied with the changes, click on the "Publish" button to make the changes live on your store.

Hope this will work

Click here to Contact and Get Shopify Store Help
E-mail - hi@shopifysmalltask.com
We are Shopify Store Small Tasks and Customization Experts
agoedseels
Visitor
3 0 1

Can you help me to find what the CSS selector is? 

My website is: www.alglory.be

 

Thank you!