Shopping List Button Generator

Create a customizable Listonic add-to-list button for your website. Free, no coding required.

Customize Your Button

Configure the appearance and content of your shopping list button

Contents

15px

Design

Icon

Add your own CSS to further customize the button appearance

Live Preview

Real-time
Widget is still loading. Please try clicking the button again in a moment. 

                            
                            
                            
                        

                    

                

            

        


        
        

            

                

                    
Installation Instructions

                

                

                    
                        
                    
                

            

            

                
                

                    
                    
                    
                    
                    
                


                
                

                    

                        

                            
1

                            

                                
Copy the Generated Code

                                
Click the "Copy Code" button above to copy the complete HTML and CSS code to your clipboard.

                            

                        

                        

                            
2

                            

                                
Paste into Your HTML File

                                
Open your HTML file and paste the CSS code inside the <head> section (within <style> tags) and the HTML code where you want the button to appear.

                            

                        

                        

                            
3

                            

                                
Add the Listonic Script

                                
Include the Listonic button script before the closing </body> tag to enable the add-to-list functionality.

                                
<script src="https://s3-eu-west-1.amazonaws.com/buttons.listonic.pl/v1/button.js"></script>

                            

                        

                        

                            
4

                            

                                
Test Your Button

                                
Open your page in a browser and click the button to verify it opens the Listonic add-to-list interface.

                            

                        

                    

                


                
                

                    

                        

                            
1

                            

                                
Access Your Post or Page Editor

                                
Open the WordPress admin dashboard and navigate to the post or page where you want to add the button.

                            

                        

                        

                            
2

                            

                                
Add a Custom HTML Block

                                
In the Gutenberg editor, click the "+" button and search for "Custom HTML" block. Add it where you want the button.

                            

                        

                        

                            
3

                            

                                
Paste the Complete Code

                                
Copy the "HTML + CSS" code from above and paste it into the Custom HTML block. Include both the style and button markup.

                            

                        

                        

                            
4

                            

                                
Add the Script (Optional)

                                
For full Listonic functionality, add the JavaScript to your theme's footer.php or use a plugin like "Insert Headers and Footers".

                            

                        

                    

                


                
                

                    

                        

                            
1

                            

                                
Open Theme Editor

                                
Go to Online Store → Themes → Click "Customize" or "Edit code" on your active theme.

                            

                        

                        

                            
2

                            

                                
Add CSS to Theme Styles

                                
Navigate to Assets → theme.css (or base.css) and paste the CSS code at the bottom of the file.

                            

                        

                        

                            
3

                            

                                
Add HTML to Product Template

                                
Find the product template (Sections → product-template.liquid) and paste the HTML where you want the button to appear.

                            

                        

                        

                            
4

                            

                                
Include the Script

                                
Add the Listonic script to theme.liquid before </body> or use the "Script" section in your theme settings.

                            

                        

                    

                


                
                

                    

                        

                            
1

                            

                                
Create a Component

                                
Create a new file called ListonicButton.jsx (or .tsx for TypeScript) in your components folder.

                            

                        

                        

                            
2

                            

                                
Add the Styles

                                
Copy the CSS code and either add it to a CSS module (ListonicButton.module.css) or use styled-components / inline styles.

                            

                        

                        

                            
3

                            

                                
Implement the Component

                                
Use the JavaScript tab to get the component code with proper event handlers and state management.

                                
import ListonicButton from './components/ListonicButton';

                            

                        

                        

                            
4

                            

                                
Load Listonic SDK

                                
Add the Listonic script to your public/index.html or load it dynamically in useEffect.

                            

                        

                    

                


                
                

                    

                        

                            
1

                            

                                
Create a Vue Component

                                
Create a new file called ListonicButton.vue in your components directory.

                            

                        

                        

                            
2

                            

                                
Add Template and Styles

                                
Use the HTML code in the <template> section and CSS code in <style scoped>.

                            

                        

                        

                            
3

                            

                                
Register the Component

                                
Import and register the component in your parent component or globally in main.js.

                                
import ListonicButton from '@/components/ListonicButton.vue';

                            

                        

                        

                            
4

                            

                                
Load External Script

                                
Load the Listonic script in your index.html or use the mounted() lifecycle hook to load it dynamically.

                            

                        

                    

                

            

        

    


    
    

    
    
Code copied to clipboard!