Styling the button on Gelato Edit Store Details page
If you subscribe to Gelato+, and use one of the following themes (Dawn, Debut, Studio, Craft, Simple), you will be able to style the button as follow: Enter your store's settings by clicking on Edit Store Details from the Stores section in the Dashboard.
Once on the Edit Store Details page, scroll down to the Personalization section. You will be able to change the text of the button as well as the color of the button's background, border, and text.
You will also be able to do the same for the Add to Cart and Back to Shopping buttons that are displayed in the top left and right corners when your customer launches the in-store design editor during personalization.
Hide or Show the Add to Cart and Buy it now buttons for product listings that allow Personalization
In the same section, you can choose to hide or show the Add to Cart and Buy it now buttons for product listings that allow for personalization.
Non-Gelato+ Gold: Styling the button with CSS
If you do not have a Gelato+ subscription, styling the button can be done via CSS. The Personalize Design button can be referred in CSS via ID selector #ge-personalize. Please refer to the documentation of your Shopify theme or contact the theme developer for more details on how to do that.
#ge-personalize {
// any css property followed by value and !important sign: width: 30% !important;
color: black !important;
// and so on, any customization you need.}Tip: You can find more information on how to add custom CSS here.
An example of how it would look is shown below:
Similarly, the 'Add to Cart' button can be customized via CSS in your store using the following:
#ge-add-to-cart {
// any css property followed by value and !important sign:
width: 50% !important;
color: black !important;
font-size: 30px;
// and so on, any customization you need.
}