How do I change the customize button design?

If you like the Customizer but want to have an entry point (the button) matching your brand personality, you can do this quite easily.

You need to make sure that you have activated the customization option for your customers on each product you would like to edit the button for.

Button Language:

To change the Button Language of the "Customize" button, you’ll need to ensure your Shopify store includes an official Shopify language selector. Here’s how to adjust it:

From your Shopify admin, go to Settings -> Languages.
Under Published languages, click Change default next to your current default language.
In the dropdown menu, select your preferred language from options including: 'en', 'fr'
This will adjust the language settings and display your preferred language on the customize button.

Button Title

If you want to change the Button Title, do the following:

1. Go into your Shopify Admin, select Products, and then select the product for which you would like to edit the button.
2. Click on the Show HTML button (<>).
3. Enter the following text above all other HTML text -<div class="btn" id="Spreadconnect'-customizable-button" style="width: 100%;">Customize me</div>
4. Then you can edit the >Customize me< to any text you would like.

For example, if you want the button to say "Customize me for $10", the HTML would look like this:

<div class="btn" id="Spreadconnect'-customizable-button" style="width: 100%;">Customize me for $10</div>

Button Layout

If you want to change the Button Layout, do the following:

1. Go into your Shopify Admin, go to Products, and then select the product for which you would like to edit the button.
2. Click on the Show HTML button (<>).
3. Enter the following text - <div class="btn" id="Spreadconnect'-customizable-button" style="width: 100%;">Customize me</div>
4. Press Save.

The Customize button has been activated. Now, you will be able to change its layout. Make sure you are in your Shopify Admin and go to:

1. Themes under Online Store on the left-hand side menu.
2. In your Current theme, go to Edit Code und Actions.
3. Look for theme.css in the assets folder.
4. Scroll down in the theme.css file and enter.
5. #Spreadconnect'-customizable-button{Your custom CSS}

There, you will be able to enter your own CSS code to design the layout as you wish.

Once you are done editing the button to your image, don't forget to reactivate it by allowing customization for each product.