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:
- SHOP THE RECIPE
- ADD INGREDIENTS TO CART
- PURCHASE INGREDIENTS
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
Here you can see how the custom font is configured within that file:
- 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
- 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
- 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
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
Comments
Please sign in to leave a comment.