Re: How can i add a button at the bottom of a page (About us)

ameliealain · ‎02-10-2025

Hi, I would like to add a button at the end of my About us page. I would like the button to say "Ton moment de bien-être commence ici" with a link to all the products on my store. Is it possible to add a button to the bottom of a page? The store url is: https://lasagecamomille.ca/pages/qui-sommes-nous

beauxbreaux · ‎02-10-2025

Yes, you will need to create a new element but will require some coding.

When you click on Online Store in the menu and where you typically click the customize button to edit the site, instead click on the 3 dot menu next to it and select edit code.
Go down to the sections folder and click 'add new section'
name the section 'custom-button' and the default selection of 'liquid' can stay the same.

Replace the code with this:

{% schema %}
{
  "name": "Custom Button",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Click Me"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#ff6600"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "select",
      "id": "button_alignment",
      "label": "Button Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    }
  ],
  "presets": [
    {
      "name": "Custom Button",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="custom-button-wrapper custom-align-{{ section.settings.button_alignment }}">
  <a href="{{ section.settings.button_link }}" class="custom-button" style="background-color: {{ section.settings.button_color }}; color: {{ section.settings.text_color }};">
    {{ section.settings.button_text }}
  </a>
</div>

<style>
  .custom-button-wrapper {
    width: 100%;
    padding: 20px 0; /* Adds margin above and below */
  }
  .custom-align-left {
    text-align: left;
    margin-left: 20px;
  }
  .custom-align-center {
    text-align: center;
  }
  .custom-align-right {
    text-align: right;
    margin-right: 20px;
  }
  .custom-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    margin: 10px;
  }
  .custom-button:hover {
    opacity: 0.8;
  }
</style>

Make sure you save.

Now when you go back to the customizer you should see the ability to select a button now. I added in ways to change color and position. If you want to display all your collections you can use the URL: https://lasagecamomille.ca/collections

If you need the position to be tweaked a bit I can give you some CSS to add in the custom CSS section to move the button where you want it. I just added very general settings.

Beaux Barker
Developer
Buy me a Coffee ☕

ameliealain · ‎02-11-2025

Hi!

This is working well, but it only allows me to add a button to my homepage or my products. What I wish to do is to add this button to my pages (my About us page). There is no place in the editor to add CSS or any sections to my pages. Is there a way to do this?

Thank you for the help!

beauxbreaux · ‎02-11-2025

Very strange. I had just downloaded the debut theme from Github (because it is no longer on Shopify) and on mine it does allow additional sections here. Go to the main menu where where you see Online Store, Themes, Blogs, Pages... click on pages.

Click on the qui-sommes-nous page. Is all your content showing up here? If so we can probably hard code the button into this page by selecting the code editor:

If you do see the content here go ahead and click that button to see the code.

Select all the text, copy, and paste it here. What I can do is hard code the button where it needs to go and give you the updated code including the button.

Beaux Barker
Developer
Buy me a Coffee ☕

ameliealain · ‎02-12-2025

Hi,

Yes, in my page I can see the coding.

Here is the coding on this page:

La créatrice derrière les produits
<h2>Pourquoi j'ai créé La Sage Camomille?</h2>
Depuis toute petite, je suis intéressée par la fabrication de produits de soins corporels et de chandelles. Lors de mes temps libres, je faisais des masques avec des ingrédients de la cuisine ou des chandelles dans des pots de verre réutilisés.
 J’ai toujours adoré me promener en nature et admirer les plantes, c’est pourquoi il y a quelques années, j’ai décidé de commencer des études en herboristerie. J’ai continué à créer des produits à la maison, mais cette fois-ci en ajoutant des plantes médicinales dans mes recettes, puisque j'ai découvert tous les bienfaits que les plantes pouvaient nous apporter. J’ai adoré le processus de création qui rejoignait ma passion pour les produits de soins faits à la main et la nature. J’ai commencé à donner des onguents, des baumes et d'autres petits produits naturels en cadeau à mes proches pour leur permettre de profiter des bienfaits des plantes eux aussi. 
En 2021, voyant l'intérêt des gens pour les produits naturels que je fabriquais, j'ai décidé de créer La Sage Camomille. Je désirais permettre à plus de gens de profiter d’odeurs qui rappellent la nature et des ingrédients bénéfiques pour la peau. 
Lors de la création de nouveaux produits La Sage Camomille, j’adore m’inspirer du changement entre les saisons et de la beauté de la nature, des plantes et des paysages qui nous entourent. Une nouvelle collection de produits est créée à chaque saison pour profiter des odeurs et des plantes qui s’agencent bien durant ce moment de l’année. Je choisis avec soin des odeurs qui rappellent la nature, puisque la nature apporte du réconfort à plusieurs et nous aide à nous sentir bien. 
<div style="text-align: left;"><img src="https://cdn.shopify.com/s/files/1/0582/9433/7743/files/IMG_5714_1_1_1024x1024.jpg?v=1737476805" style="margin-top: 50px; margin-bottom: 16px; float: none;"></div>
<h2>Ma mission : Inspirer les gens à prendre soin d’eux</h2>
Avec La Sage Camomille, je désire créer des produits qui s’ajoutent facilement à la routine quotidienne pour que ma clientèle puisse prendre soin d’elle et profiter de petits moments de bien-être à chaque jour. Je veux offrir des produits qui apportent un sentiment de bien-être grâce aux odeurs réconfortantes qui rappellent la nature et aux ingrédients bénéfiques pour la peau. J’adore prendre soin des gens autour de moi avec les plantes et j’espère donc pouvoir aider ma clientèle à prendre soin d’elle aussi grâce aux produits.
<h2>Les valeurs qui m’inspirent dans la fabrication</h2>
La nature est remplie de couleurs, de textures et d’odeurs uniques. J’essaie de recréer ces magnifiques éléments dans la fabrication des produits pour que les gens puissent profiter de cette beauté, même à la maison. Les odeurs sont inspirées de la nature pour donner un sentiment de bien-être et de réconfort aux gens, pour les faire sentir bien comme s’ils étaient au cœur de la nature. Les ingrédients sélectionnés sont tous très doux pour la peau et encourangent la santé de celle-ci.
Les produits sont fabriqués et décorés avec soin et intention, pour que l’amour versé dans les produits inspirent ma clientèle à s’aimer elle-même, à se prioriser et à prendre soin d’elle aussi.
Le respect de la nature fait partie de la création de chaque produit. Les plantes sont soigneusement récoltées pour leur permettre de continuer de pousser et de se développer à long terme. La santé de la planète et le bien-être de tous est très important aussi, c’est pourquoi les emballages des produits sont choisis avec soins et sont tous recyclables ou réutilisables.
NATURE ♡ BEAUTÉ ♡ INTENTION ♡ DOUCEUR ♡ RÉCONFORT ♡ BIEN-ÊTRE
<div style="text-align: center;"> </div>
<div style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0582/9433/7743/files/IMG_7282_f9d38441-864e-4bb3-9674-9de34996ca5a..." style="margin-top: 35px; margin-bottom: 16px; float: none;"></div>
<h2 style="text-align: left;">Tout ce qu’il te faut pour un moment de bien-être</h2>
Laisse-toi inspirer par les produits de La Sage Camomille et ajoute des moments de bien-être dans ta routine quotidienne. Les odeurs réconfortantes amèneront la nature dans ta maison et t'aideront à prendre soin de toi.
<a href="https://lasagecamomille.ca/collections/tous-produits-artisanaux" title="Tous les produits - La Sage Camomille" rel="noopener" target="_blank">Ton moment de bien-être t'attends ici!</a>

Re: How can i add a button at the bottom of a page (About us)

How can i add a button at the bottom of a page (About us)

Community Blog Articles