CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-guides/integrations/prestashop/button-style" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.5.2"> <title data-rh="true">Button Styling & Positioning | Simpler Developer Resources</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docs.simpler.so/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://docs.simpler.so/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://docs.simpler.so/guides/integrations/prestashop/button-style"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Button Styling & Positioning | Simpler Developer Resources"><meta data-rh="true" name="description" content="The default installation of the Simpler Prestashop module will attach the module (and the Simpler Checkout button) into the most suitable hooks that your theme offers."><meta data-rh="true" property="og:description" content="The default installation of the Simpler Prestashop module will attach the module (and the Simpler Checkout button) into the most suitable hooks that your theme offers."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.simpler.so/guides/integrations/prestashop/button-style"><link data-rh="true" rel="alternate" href="https://docs.simpler.so/guides/integrations/prestashop/button-style" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.simpler.so/guides/integrations/prestashop/button-style" hreflang="x-default"><link rel="preconnect" href="https://www.googletagmanager.com"> <script>window.dataLayer=window.dataLayer||[]</script> <script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="https://www.googletagmanager.com/gtm.js?id=GTM-M2K6J5W6",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script><link rel="stylesheet" href="/assets/css/styles.b0ca9a41.css"> <script src="/assets/js/runtime~main.cd54eb0f.js" defer="defer"></script> <script src="/assets/js/main.ed733681.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M2K6J5W6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/simpler_logo.svg" alt="Simpler Checkout Developer Docs" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/simpler_logo.svg" alt="Simpler Checkout Developer Docs" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Docs</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/category/getting-started">Guides</a><a class="navbar__item navbar__link" href="/category/design">Resources</a><a class="navbar__item navbar__link" href="/category/api">Full API Reference</a></div><div class="navbar__items navbar__items--right"><a href="https://merchant.simpler.so/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Dashboard<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/category/getting-started">Getting Started</a><button aria-label="Expand sidebar category 'Getting Started'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/guides/interface/">Custom Integrations</a><button aria-label="Expand sidebar category 'Custom Integrations'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/category/pre-built-integrations">Pre-Built Integrations</a><button aria-label="Collapse sidebar category 'Pre-Built Integrations'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/category/woocommerce">WooCommerce</a><button aria-label="Expand sidebar category 'WooCommerce'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/category/adobe-commerce-magento-2">Adobe Commerce (Magento 2)</a><button aria-label="Expand sidebar category 'Adobe Commerce (Magento 2)'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/category/opencart">OpenCart</a><button aria-label="Expand sidebar category 'OpenCart'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/category/prestashop">PrestaShop</a><button aria-label="Collapse sidebar category 'PrestaShop'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/guides/integrations/prestashop/installation">Installation Guide</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/guides/integrations/prestashop/button-style">Button Styling & Positioning</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/guides/integrations/prestashop/hooks">Hooks</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/category/cscart">CsCart</a><button aria-label="Expand sidebar category 'CsCart'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/category/third-party-integrations">Third party integrations</a><button aria-label="Expand sidebar category 'Third party integrations'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/category/pre-built-integrations"><span itemprop="name">Pre-Built Integrations</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/category/prestashop"><span itemprop="name">PrestaShop</span></a><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Button Styling & Positioning</span><meta itemprop="position" content="3"></li></ul></nav><div class="theme-doc-markdown markdown"><div class="row"><div class="col col--12 markdown"><header><h1>Button Styling & Positioning</h1></header> <p>The default installation of the Simpler Prestashop module will attach the module (and the Simpler Checkout button) into the most suitable hooks that your theme offers.</p> <p>If you want to change this or your theme does not offer the relevant hooks you can change this, either by transplanting the Simpler Checkout module to a new hook, or, if you want fine grained control on the positioning, you can call our custom hooks within your child theme.</p> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="inserting-the-button-to-a-new-position-using-the-back-office-positions-page">Inserting the button to a new position using the Back Office Positions Page<a href="#inserting-the-button-to-a-new-position-using-the-back-office-positions-page" class="hash-link" aria-label="Direct link to Inserting the button to a new position using the Back Office Positions Page" title="Direct link to Inserting the button to a new position using the Back Office Positions Page"></a></h2> <p>If your theme does not support one of our default hooks, or you want to move the button to a different hook, you can transplant the module by visiting your admin dashboard and navigating to the Design > Positions page.</p> <p>On the upper right corner you can find the "Transplant a Module" button. Click there and filter out the Simpler Checkout module, and transplant the button to your preferred hook.</p> <iframe width="80%" height="444" src="https://www.loom.com/embed/297b453439ce453899df4fe78659e557" frameborder="0" allow="autoplay; encrypted-media"></iframe> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="inserting-the-button-using-a-page-builder">Inserting the button using a page builder<a href="#inserting-the-button-using-a-page-builder" class="hash-link" aria-label="Direct link to Inserting the button using a page builder" title="Direct link to Inserting the button using a page builder"></a></h2> <p>If you're using a page builder to design your storefront, you can use their shortcode functionality to insert the button in the desired positions.</p> <p>Before you go in your page builder, you will have to enable the custom hooks in the positions page (see above). You will have to enable the 'displaySimplerProductCheckout' and 'displaySimplerCartCheckout' pages.</p> <p>In your page builder, find the element called 'shortcode' and insert it in your desired position by dragging and dropping. In the shortcode content, insert:</p> <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Product Page</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Other pages</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><p><code>{hook h='displaySimplerProductCheckout' product=$product}</code></p></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><p><code>{hook h='displaySimplerCartCheckout' cart=$cart}</code></p></div></div></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="inserting-the-button-to-a-new-position-programmatically">Inserting the button to a new position programmatically<a href="#inserting-the-button-to-a-new-position-programmatically" class="hash-link" aria-label="Direct link to Inserting the button to a new position programmatically" title="Direct link to Inserting the button to a new position programmatically"></a></h2> <p>If you're aiming to have more control over the positioning of the button, you can use custom hooks in your theme's template files.</p> <p>Before trying to adjust your theme, ensure that the <code>displaySimplerProductCheckout</code> and <code>displaySimplerCartCheckout</code> hooks are enabled in your positions page.</p> <p>You can then use the following hooks in your <a href="https://devdocs.prestashop-project.org/8/themes/reference/template-inheritance/parent-child-feature/" target="_blank" rel="noopener noreferrer">child theme</a>, and adjust them however you want.</p> <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Single Product Checkout</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Current Cart Checkout</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><p><code>//template file</code><br> <code>{hook h='displaySimplerProductCheckout' product=$product}</code></p></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><p><code>{hook h='displaySimplerCartCheckout' cart=$cart}</code></p></div></div></div></div></div></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/guides/integrations/prestashop/installation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Installation Guide</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/guides/integrations/prestashop/hooks"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Hooks</div></a></nav></div></div></div></div></main></div></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Guides</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/guides/getting-started/quick-start">Quick start</a></li><li class="footer__item"><a class="footer__link-item" href="/resources/design/positioning-guidelines">Button Positioning</a></li><li class="footer__item"><a class="footer__link-item" href="/resources/marketing/marketing-guide">Marketing Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/api/api-reference">API Reference</a></li></ul></div><div class="col footer__col"><div class="footer__title">Pre-Built Integrations</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/category/woocommerce">WooCommerce</a></li><li class="footer__item"><a class="footer__link-item" href="/category/adobe-commerce-magento-2">Adobe Commerce (Magento 2)</a></li><li class="footer__item"><a class="footer__link-item" href="/category/prestashop">Prestashop</a></li><li class="footer__item"><a class="footer__link-item" href="/category/opencart">Opencart</a></li></ul></div><div class="col footer__col"><div class="footer__title">Platform Interface</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/guides/interface">Overview</a></li><li class="footer__item"><a class="footer__link-item" href="/guides/interface/implement">Platform Interface Quickstart</a></li><li class="footer__item"><a class="footer__link-item" href="/guides/interface/javascript-sdk">Javascript SDK Reference</a></li><li class="footer__item"><a class="footer__link-item" href="/category/tutorials">Tutorials</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://www.facebook.com/simpler.so/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Facebook<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.instagram.com/simpler.so/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Instagram<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.linkedin.com/company/simplerso/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Linkedin<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Simpler Group Ltd. All rights reserved</div></div></div></footer></div> </body> </html>