How can I add another button under my "Add to cart" button on product pages? Sense theme.

[talsworld]

Hi! How would I add the ability to have a button below my Add to cart button on SOME (not all) of my product pages? I want to link people to a page to subscribe and save on certain product pages...

Theme is Sense. Example of a page I need this done on: https://www.coldpow.com/products/kale-krush

[AnneLuo]

Hi, @talsworld 

I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

[rajweb]

Hey @talsworld ,

To add a subscription button below the "Add to Cart" button on specific product pages in the Sense theme, 

Follow these steps:

1. Go to shopify admin > settings > Custom data > product

2. Click "Add defination" and set:

Name: Subscription Button

Namespace and Key: custom.subscription_button

content type: single line text

3. Save  the metafield 

For products where you want the subscription button, add the value:

Follow these steps :

1. Online Store > themes > Edit code on  the Sense theme

2.  open the main-product.liquid (or product.liquid) file under Sections

3. Find where the "Add to Cart" button is, usually under:

<button type="submit" class="product-form__submit button">Add to cart</button>

4. Insert this code below the "Add to Cart" button:

{% if product.metafields.custom.subscription_button %}
  <a href="{{ product.metafields.custom.subscription_button }}" class="button subscription-button" style="margin-top: 10px;">
    Subscribe and Save
  </a>
{% endif %}

Now, only the products with the subscription_button metafield set will display the button below the "Add to Cart" button.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[talsworld]

The product pages each have their own template in .json. Any way we can still add a button somehow? No liquid code here...

[rajweb]

Hey @talsworld ,

Sure! Since you're using the Sense theme with individual JSON templates, we can still add the button by using product metafiled and a bit of customization within the product templates. The approach involves adding a block to your product template and using conditional visibility in Shopify’s theme editor.

Follow these steps:

Set Up a Metafield to Control the Button's URL:

1. Go to Setting > Custom data > Product in your Shopify admin.

2. Click Add Defination.

3. Name it something like Subscribe Button URL.

4. Set the Namespace and key to custom.subscribe_button.

5. Set the Content type to Single line text.

6. Save the metafield definition.

Assign the Metafield Value to Relevant Products:

1. Go to Products in Shopify and open the product you want (e.g., Kale Krush).

2. Scroll down to Metafield.

3. In the new Subscribe Button URL metafield, paste the subscription page link you want (leave it empty for products where no button should appear)  and save the product.

Add a Button Block to the Product Template via JSON File

Since you’re using JSON-based templates, we can add a block that dynamically displays based on the metafield.

1. Online Store > Themes > Edit Code 

2. Open the relevant product template, e.g., product.kale-krush.json.

3. Find the section or block where the "Add to Cart" button is located (likely in main-product or a product form block).

4. Add a new block entry for the button inside the section. Here’s an example:

{
  "type": "button",
  "name": "Subscribe & Save Button",
  "settings": {
    "label": "Subscribe & Save",
    "link": "{{ product.metafields.custom.subscribe_button }}",
    "button_style": "primary"
  },
  "when": {
    "field": "product.metafields.custom.subscribe_button",
    "operator": "is_not_empty"
  }
}

Enable the Block in the Theme Editor:

1. go to online store > themes 

2. Click Customize on the Sense theme.

3. Navigate to the product page template where you made the change (e.g., Kale Krush).

4. Add the new Subscribe & Save Button block if it's not already visible.

Let me know if this works!

[EvinceDev]

Hello @talsworld , 
To add a "Subscribe and Save" button below the "Add to Cart" button on specific product pages in your Shopify store using the Sense theme, you can follow these steps. This requires editing the theme's liquid code and adding a condition to display the button only on certain product pages.

Steps:

1. Identify the Template File for Product Pages

In Shopify, product pages are typically rendered using the product.liquid or main-product.liquid template (depending on your theme). The Sense theme might have a specific file structure, but the goal is to find the template where the "Add to Cart" button is located.

2. Navigate to Your Shopify Theme Editor

1. From your Shopify Admin, go to Online Store > Themes.
2. Find your Sense theme and click Actions > Edit code.

3. Find the Product Template

Look for the file where product pages are rendered. In most cases, it's under:

Sections/product.liquid

Sections/main-product.liquid

You will find the code for the "Add to Cart" button there.

4. Add a Custom Button Below the Add to Cart Button

1. Locate the code for the "Add to Cart" button. It should look like this:

<button type="submit" name="add" class="btn add-to-cart">{{ 'products.product.add_to_cart' | t }}</button>
​

• Right after this code, add the following custom HTML for the "Subscribe and Save" button:

{% if product.handle == 'kale-krush' or product.handle == 'another-product-handle' %}
   <a href="/pages/subscribe-and-save" class="btn btn-subscribe">Subscribe & Save</a>
{% endif %}
​

• Replace /pages/subscribe-and-save with the actual URL of your "Subscribe and Save" page.
• Use the correct product handles in the if condition. You can find the product handle in the URL of your product page (e.g., for your page kale-krush).
•  Style the Button (Optional)

  If you want to style the button to match your theme, you can add custom CSS. Either modify existing styles or create new ones. Here's an example:

.btn-subscribe {
  background-color: #f4a261;
  color: white;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 16px;
  border-radius: 5px;
  display: inline-block;
  margin-top: 10px;
}
​

Add this CSS to your theme's stylesheet (theme.css or theme.scss.liquid).\

• Save Your Changes

  Once you've made these changes, click Save.

• Final Result:

  On the specific product pages where the condition matches (like "Kale Krush"), a "Subscribe and Save" button will appear below the "Add to Cart" button, linking users to the subscription page.

[namphan]

Hi @talsworld,

You can follow these steps:

- Step 1: Create a template for the products that display this button, then go to the products and select the template. Refer video

- Step 2: Add 'Custom Liquid' block and enter HTML button code for it.

Hope it is clear to you

[talsworld]

The pages do have their own templates I made way back. (.json)... I do not know what code to add to them. Something under this?

},
"buy_buttons": {
"type": "buy_buttons",
"settings": {
"show_dynamic_checkout": false,
"show_gift_card_recipient": false
}
},

[namphan]

Hi @talsworld,

You just need to add blocks, no need to add code at Liquid. Refer:

it works for step 2

[talsworld]

And put what code?

[namphan]

Hi @talsworld,

First, have you created your own template for it?