How can I customize my add to cart button for variant and non-variant products?

Store Design
1

Hi,

I’d like to add a call to action for my products of “add to bag” on products without variants and “browse” on products with variants.

please help

store is https://clarksonreptiles.com/collections/merchandise

2

Hi @KevinC84

Please follow these step to make a Call to Action button:

Create a new file within the sections folder of your theme, and paste the code below into this file. Save file as call-to-action.liquid


  ## {{ section.settings.text-box }}

  
    {{ section.settings.linktext }}
  

{% schema %}
{
  "name": "Call to action",
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    },
    {
      "id": "link",
      "type": "url",
      "label": "Link URL"
    },
    {
      "id": "linktext",
      "type": "text",
      "label": "Link text",
      "default": "Click here"
    }
  ]
  ,
  "presets": [
    {
      "name": "Call to Action",
      "category": "Promotional"
    }
  ]
}
{% endschema %}
  1. Navigate to the Theme Editor and select “Add section.” Within the Promotional category, there will be an option for “Call to Action.” A heading, link, and link text can be assigned in this section.

I hope that it is useful for you.

3

Where is the “sections folder?” Do you go to “themes” > “customize?”

4

Hi @KevinC84

Please follow these steps to find sections folder:

  1. Go to the Shopify Admin

  2. Select Online Store

  3. Click on 3 dots “…” near Customize button

  4. Select Edit code

  5. In the Edit code, you will see the “Sections” folder

I hope that it’s useful for you.

5

I was able to make and save the file in the sections folder but i am confused on step #2. Is theme editor the same as “customize?” It looks like when i go to this, i can add a section but only to the homepage.
I attached a screen shot to show you what i’m seeing.

Thanks a lot for your help

6

Hi @KevinC84

Please follow this video to create a section in your collection: https://www.loom.com/share/2167273736dd46fe937ea322b2498c19.

You can edit the title, link the product or collection in it or the text of the button. Hopefully, this will can help you solve the issue.

Note: Because this is a default button with no CSS, its appearance is not good. The style depends on you.