Shopify themes, liquid, logos, and UX
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:
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
The product pages each have their own template in .json. Any way we can still add a button somehow? No liquid code here...
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!
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.
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.
<button type="submit" name="add" class="btn add-to-cart">{{ 'products.product.add_to_cart' | t }}</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 %}
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).\
Once you've made these changes, click Save.
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.
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 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
}
},
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?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024