Goal: Add a “Subscribe & Save” button under the Add to cart button, but only on selected product pages in the Shopify Sense theme (example: Kale Krush).
Proposed approaches:
Key terms: Metafield (custom product field for per-product data), product handle (URL-friendly product ID), JSON template (config-driven product layout).
Status: No confirmed solution yet; the requester needs concrete code for their JSON template setup.
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
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.
Hey @talsworld ,
To add a subscription button below the “Add to Cart” button on specific product pages in the Sense theme,
Follow these steps:
Go to shopify admin > settings > Custom data > product
Click “Add defination” and set:
Name: Subscription Button
Namespace and Key: custom.subscription_button
content type: single line text
For products where you want the subscription button, add the value:
Follow these steps :
Online Store > themes > Edit code on the Sense theme
open the main-product.liquid (or product.liquid) file under Sections
Find where the “Add to Cart” button is, usually under:
{% if product.metafields.custom.subscription_button %}
Subscribe and Save
{% 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
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.
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.
Find your Sense theme and click Actions > Edit code.
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.
{% if product.handle == 'kale-krush' or product.handle == 'another-product-handle' %}
Subscribe & Save
{% 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).\
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
The product pages each have their own template in .json. Any way we can still add a button somehow? No liquid code here…
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
}
},
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:
Go to Setting > Custom data > Product in your Shopify admin.
Click Add Defination.
Name it something like Subscribe Button URL.
Set the Namespace and key to custom.subscribe_button.
Set the Content type to Single line text.
Save the metafield definition.
Assign the Metafield Value to Relevant Products:
Go to Products in Shopify and open the product you want (e.g., Kale Krush).
Scroll down to Metafield.
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.
Online Store > Themes > Edit Code
Open the relevant product template, e.g., product.kale-krush.json.
Find the section or block where the “Add to Cart” button is located (likely in main-product or a product form block).
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!
Hi @talsworld ,
You just need to add blocks, no need to add code at Liquid. Refer:
it works for step 2
And put what code?
Hi @talsworld ,
First, have you created your own template for it?
