This article explains how to customize the look and feel of the "Personalize Design" button in your Shopify store, as well as how to show or hide "Add to Cart" and "Buy Now" buttons for products available for personalization.
Styling Your Button
You have two options for styling the "Personalize Design" button in your Shopify store: using Gelato+ or CSS.
Gelato+
If you are a Gelato+ subscriber and use one of the following themes – Dawn, Debut, Studio, Craft, or Simple – you can style your button right from your Gelato dashboard. Here's how:
In your Gelato dashboard, go to the Stores section.
Click Edit Store Details.
Scroll down to the Personalization section.
From here, you can change the text, background color, border color, and text color of the "Personalize Design" button. You can also customize the "Add to Cart" and "Back to Shopping" buttons that appear in the top left and right corners of the design editor.
CSS
If you don't have a Gelato+ subscription, you can style the "Personalize Design" button using CSS. The button can be referred to in CSS via ID selector #ge-personalize.
You can find more information on how to add custom CSS here. Please refer to your Shopify theme's documentation or contact your theme developer for more details about how to do that.
For example, you can change the color of the button to black by adding the following CSS to your theme:
#ge-personalize {
color: black !important;
}
You can also customize the "Add to Cart" button using CSS. The button can be referred to in CSS via ID selector #ge-add-to-cart. For example, you can change the width, color, and font size of the "Add to Cart" button with the following CSS:
#ge-add-to-cart {
width: 50% !important;
color: black !important;
font-size: 30px;
}
Show or Hide Add to Cart and Buy Now Buttons
You can choose to show or hide the "Add to Cart" and "Buy Now" buttons on product pages that allow for personalization. This setting can be found in the Personalization section of your Gelato dashboard, as described above.
