Overriding the Shoppable Recipe Button Styling

This article provides an overview on how you can override you Shoppable Recipe button styling to further customize the look and feel for your site or to support a page that needs different styling from your default. To know where to set your default Shoppable Recipe button styles, see this guide here.

Understanding the Install Code Snippet

Once you create your Shoppable Recipe widget, you'll be provided with an installation script that will need to be inserted on your recipe page where you would like the button to load. The installation script looks like the following:

</button>

</div>

The script has different components, and the important one to note in order to update button styling for the first two approaches is the last component in purple.

<div id="destini-snippet"> Main div tag wrapper

<script /> Script tag that retrieves our snippet functionality

<link /> Link tag that retrieves the default button styles

<button id="addtocartbutton" /> Button tag for the actual 'Buy Recipe' button

</div>

Adding Custom Styles via Your CSS Stylesheet

Now that you have the Button ID, the most common approach to overriding your Shoppable Recipes button styling would be by adding custom styling via a CSS selector in your site's stylesheet, referencing the button#addtocartbutton. An example of that could look like the following:

#destini-snippet button#addtocartbutton {

font-family: 'Roboto', sans-serif;

font-size: 14px;

min-width: 190px;

line-height: 32px;

text-transform: uppercase;

background: #fcbb01 !important;

color: #fff !important;

font-weight: 700!important;

border: 2px solid #fff !important;

box-shadow: 9px 9px 0 #6eae41 !important;

padding: 4px 56px;

border-radius: 0;

}

#destini-snippet button#addtocartbutton:hover {

background-color: #fff !important;

color: #fcbb01 !important;

border-color: #fcbb01 !important;

}

This example would render the following:

Initial Styling

Hover Styling

Assigning a Button Class

The 2nd approach you could take to overriding the Shoppable Recipe button styling would be by assigning a custom class attribute to the <button /> HTML. This is most commonly used if you want the Recipe button to render like an existing class of buttons you already have within your stylesheet. An example of this could look like the following:

If assigning a unique class to the Recipe button, you will then need to add custom styling via a CSS selector in your stylesheet, referencing that #addtocartbutton.class-name. An example of that could look like the following::

#addtocartbutton.recipe-button-custom-class {

font: 400 12px/1.4em "Montserrat",sans-serif;

font-weight: 700;

letter-spacing: .5px;

text-decoration: none;

text-transform: uppercase;

border-radius: 6px;

border: 2px solid rgba(0,0,0,0);

color: #fff;

cursor: pointer;

background: #515051;

}

#addtocartbutton.primary-button-class:hover {

color: #515051;

background: #fff;

border: 1px solid #515051;

}

This example would render the following:

Initial Styling

Hover Styling

Inheriting Your Site's Default Button Styling

A 3rd approach you can use if you'd prefer to have the Shoppable Recipe button inherit your site's default button styling, for instance if you have a design system or style library, can be done by simply removing the following from the installation script:

<link rel="stylesheet" />

This approach will no longer reference the default button styling stored in Destini's system but rather inherit your site's button styling.

Button Styling Options

The CSS properties you might want to override are the following:

color: for the text color of the button

font-family, font-size, font-weight: for the text styling of the button

border, border-radius: for setting the width, type, and color of the button borders

background, background-color: for setting the color of the button background

box-shadow: allows you to set a shadow (solid or gradient) for the element

For more information on a particular property or to see more potential options, this W3 Schools article here is a good reference.

Other Things to Note

The pseudo-class “:hover” is used to set the styles of the button when it’s being hovered with the mouse pointer. You can set an alternative style and behavior when this happens.
It's possible for some custom styles to not be set correctly, which can occur because the CSS accessor doesn't have enough specificity. In that case you can just add !important to the CSS line to overwrite the default style.