Going live with Shoppable Recipe Widgets

Once you've created your Shoppable Recipe Widgets (guide found here), in order to go live you will need to configure your recipe settings and then implement your installation scripts. Follow the guide below.


Customizing your Shoppable Recipe Button & Widget

Access your Shoppable Recipe settings by selecting your name in the top right corner of the Recipe Book dashboard and selecting the 'Settings' link


Once on the Settings page, you have the following customization options for your Recipe Widget


1. Button Fill

The button fill allows you to select the background color of your Recipe Button

2. Button CTA

The button Call to Action is defaulted to 'BUY RECIPE' but this can be overwritten to a different CTA that you believe will resonate with your consumers. Some other examples include:


3. Button & Widget Font

The font selected will be visible within the Recipe Button as well as within the Recipe Widget. There are two options for fonts, either a standard font or custom font. 


Standard Fonts

Select from one of the standard fonts supported in the dropdown.


Custom Fonts

Alternatively, you have the option to configure a custom font by selecting the 'Set Custom Font' button, adding the font name in the input field and saving that within the modal. 


When configuring a custom font, there are a few things to be aware of

  • You do not need to load your font file. Rather, the custom font name will be configured and referenced within the CSS file that's included in the installation script mceclip4.png

Here you can see how the custom font is configured within that file:mceclip5.png

  • The preview of the button within the Settings page will not reflect the custom font, as it does not have access to the font file                    mceclip7.png
  • The preview of the button within the Recipe Snippet Preview page will not reflect the custom font, as it does not have access to the font file mceclip6.png
  • Once your Recipe Widget installation script is loaded on your site, the button will inherit your custom font as the font file is loaded there


(example font file within a site's source file)

4. Button Font Color

The button font color allows you to select the text color within your Recipe Button mceclip11.png

Once you've made all of your Recipe Button selections, make sure to click the 'Save' button



Note, if you change the Recipe Button settings after you've already installed a Recipe Widget on your site, those updates will go through automatically without having to re-install the script. The only reason settings changes will not go through automatically is if the Recipe Button styling is being intentionally overwritten on your site. 


Implementing Shoppable Recipe Widgets

To implement a Shoppable Recipe Widget, the install script will need to be loaded on the given recipe page on your site. There are two ways to access install scripts within the Recipe Book dashboard. 

1. Accessing a single Recipe Widget install script

Navigate to the 'Recipes' tab in the Recipe Book dashboard


Select the hamburger icon on the given recipe row


Select the Installation Script link


The Installation Script modal will open-up and you can simply select the 'COPY CODE' button to copy the script to your clipboard



2. Accessing all active Recipe Widget install scripts

Navigate to the 'Recipes' tab in the Recipe Book dashboard


Select the 'Download Implementation File' button



Once selected, a csv file will download that will include all of the installation scripts for your active Recipe Widgets



Once you have your installation scripts, the person who manages your site will need to install those code snippets on the recipe page where you would like the Recipe Widget button to load.

Was this article helpful?
0 out of 0 found this helpful