Need Add to Cart Button, Image and Price on non product pages.

Solved

Need Add to Cart Button, Image and Price on non product pages.

sharingsunshine
Shopify Partner
18 0 1

I have a development site that is soon to go live. I am using the Dawn theme. Previously, I was using WooCommerce and on certain pages I had the following add to cart block of code in PHP. The page is at

 

https://www.theherbsplace.com/stools_can_reveal_a_lot_about_health_sp_308/

 

sharingsunshine_0-1728921241597.png

I placed this on non product pages at the top and bottom of different pages.

 

Is there a way to do this on Shopify on non product pages? If so, please tell me how to build this block of code I can reuse for different products.

Accepted Solution (1)
Shadab_dev
Shopify Partner
669 40 71

This is an accepted solution.

Okay so here is my code. Open the code editor and make a new section under sections folder and name it anything you want and paste this entire code

<style>
.section-{{section.id}}{
background: {{section.settings.bg-color}};
padding: {{section.settings.pad-tb}}px;
}
.section-{{section.id}} .product-form__submit{
width: 15% !important;
margin-top: 20px !important;
}
@media(max-width:749px){
.section-{{section.id}}{
padding: {{section.settings.pad-mob-tb}}px;
}
}
</style>

<section class="section-{{ section.id }}">
<div class="page-width">
{% for block in section.blocks %}
{% if block.settings.my-product %}
{% assign product = all_products[block.settings.my-product] %}
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<div class="product">
<img src="{{ product.featured_media | img_url }}" />
<div class="product__title" {{ product.shopify_attributes }}>
<!-- <h1>{{ product.title | escape }}</h1> -->
<a href="{{ product.url }}" class="product__title">
<h2 class="h3">
{{ product.title | escape }}
</h2>
</a>
</div>
<div id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price',
product: product,

-%}
</div>

{%- render 'buy-buttons',

product: product,
product_form_id: product_form_id,
section_id: section.id,

-%}

</div>
{% endif %}
{% endfor %}
</div>
</section>

{% schema %}
{
"name": "My Product Section",
"settings": [
{
"type": "color",
"label": "Section Background Color",
"id": "bg-color",
"default":"#ffffff"
},
{
"type": "number",
"label": "Section Padding desktop",
"id": "pad-tb",
"default":60,
"info": "This applies padding on top and bottom of the section for desktop"
},
{
"type": "number",
"label": "Section Padding Mobile",
"id": "pad-mob-tb",
"default":30,
"info": "This applies padding on top and bottom of the section for mobile"
}
],
"blocks": [
{
"type": "Product",
"name": "product block",
"settings": [
{
"type": "product",
"id": "my-product",
"label": "Choose product to show"
}
]
}
],
"presets": [
{
"name": "My Product Section",

}
]
}
{% endschema %}

after save and refresh when you open the customizer you will be able to add a product section by the name MY Product Section. I have tried adding basic stuffs to it. If you need any further assistance for customization or any other stuff please try reaching out via mail for a convenient conversation. Hope this helps your cause.

Thanks

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.

View solution in original post

Replies 19 (19)

Shadab_dev
Shopify Partner
669 40 71

On most themes and particularly free themes buy-buttons.liquid snippet file is responsible for rendering add to cart and buy now buttons. You can render that on your non product page template where you need them. 

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

Thanks for getting back to me. However, I am new to Shopify and not clear how to use the snippet for buy-buttons.liquid. Please give me an example.

Shadab_dev
Shopify Partner
669 40 71

Wherever you need the buy buttons on your page just add this code. You will have to do this from the code editor. You can try this out inserting code inside a custom liquid block this might work as well, i haven't tried this but it might work. if you need them on specific pages  from your non product pages you might have to add if conditions or new page templates. for now just add this for non-product page template. This is the code

{%- render 'buy-buttons',
block: block,
product: product,
product_form_id: product_form_id,
section_id: section.id,
show_pickup_availability: true
-%} 

If you get stuck, please contact via email for a convenient conversation. 

Thanks

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

This only shows a message of "sold out." I put the code in a liquid block on a new template. Is there another way to insert it?

Shadab_dev
Shopify Partner
669 40 71

To be honest, this is something a little bit advanced if not too much. So this will require some looking up as I haven't yet received any request as yours. 

 

But yeah this is what I do try stuffs and features and come up with a solution. I will need some time to test this out. Please try following up via email for a convenient conversation 

 

Thanks

Shadab ali

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

I understand it could be complex. However, I prefer to keep the thread intact so I understand if you want o quit helping. Thanks for  trying to help this far.

Shadab_dev
Shopify Partner
669 40 71

I will definitely look into this since you are on dawn and i could test this on my development store which provides dawn since it is free. It might take time. Will update you on this if i get a solution.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

Glad to hear it! Thanks

Shadab_dev
Shopify Partner
669 40 71

I believe I have a better idea of doing this like creating a new section which you can add on any page and also select the product of your choice to display.

 

Just confirm this one thing that just as the example link will you add just one product wherever necessary or you need to add multiple products?

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

Sounds good, one product is enough

Shadab_dev
Shopify Partner
669 40 71

Great, will update you when done

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
Shadab_dev
Shopify Partner
669 40 71

This is an accepted solution.

Okay so here is my code. Open the code editor and make a new section under sections folder and name it anything you want and paste this entire code

<style>
.section-{{section.id}}{
background: {{section.settings.bg-color}};
padding: {{section.settings.pad-tb}}px;
}
.section-{{section.id}} .product-form__submit{
width: 15% !important;
margin-top: 20px !important;
}
@media(max-width:749px){
.section-{{section.id}}{
padding: {{section.settings.pad-mob-tb}}px;
}
}
</style>

<section class="section-{{ section.id }}">
<div class="page-width">
{% for block in section.blocks %}
{% if block.settings.my-product %}
{% assign product = all_products[block.settings.my-product] %}
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<div class="product">
<img src="{{ product.featured_media | img_url }}" />
<div class="product__title" {{ product.shopify_attributes }}>
<!-- <h1>{{ product.title | escape }}</h1> -->
<a href="{{ product.url }}" class="product__title">
<h2 class="h3">
{{ product.title | escape }}
</h2>
</a>
</div>
<div id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price',
product: product,

-%}
</div>

{%- render 'buy-buttons',

product: product,
product_form_id: product_form_id,
section_id: section.id,

-%}

</div>
{% endif %}
{% endfor %}
</div>
</section>

{% schema %}
{
"name": "My Product Section",
"settings": [
{
"type": "color",
"label": "Section Background Color",
"id": "bg-color",
"default":"#ffffff"
},
{
"type": "number",
"label": "Section Padding desktop",
"id": "pad-tb",
"default":60,
"info": "This applies padding on top and bottom of the section for desktop"
},
{
"type": "number",
"label": "Section Padding Mobile",
"id": "pad-mob-tb",
"default":30,
"info": "This applies padding on top and bottom of the section for mobile"
}
],
"blocks": [
{
"type": "Product",
"name": "product block",
"settings": [
{
"type": "product",
"id": "my-product",
"label": "Choose product to show"
}
]
}
],
"presets": [
{
"name": "My Product Section",

}
]
}
{% endschema %}

after save and refresh when you open the customizer you will be able to add a product section by the name MY Product Section. I have tried adding basic stuffs to it. If you need any further assistance for customization or any other stuff please try reaching out via mail for a convenient conversation. Hope this helps your cause.

Thanks

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

Thanks for all the coding. However, this is what I am getting after adding this section to the new template I had created before.

 

sharingsunshine_0-1729101488470.png

 

 

 

sharingsunshine
Shopify Partner
18 0 1

Never mind, I didn't have a background-color. Picking a color I now see everything. Great job, thanks for the help.

Shadab_dev
Shopify Partner
669 40 71

You got me there for a sec. But all's well that ends well i guess. I am glad it worked out for you. 

 

And thank you for the tip. If you have any further queries related to design or development, you know I can do some coding. 

 

Until that time good luck on your store and your business.

 

Thanks again

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

Is there a way to use one template for multiple products on a non product page? If not, I will have to create many templates to represent each product.

Shadab_dev
Shopify Partner
669 40 71

I am not sure about this. I know you can create a product template and assign multiple products which is a silly thing to tell i believe you probably know that by now, but on a non product page I am really not sure.

 

To be honest I don't really think I understand this very well could you like explain it more in detail, may be an example site or something, anything just for a better understanding for myself.

 

Thanks

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
sharingsunshine
Shopify Partner
18 0 1

This seems to be an option - https://community.shopify.com/c/technical-q-a/using-metafields-with-quot-image-with-text-quot-sectio...

 

Or this one - https://community.shopify.com/c/shopify-discussions/how-can-i-create-multiple-products-with-customis...

 

If not, I need to create 30 templates each with different css based on the section identifier.

Shadab_dev
Shopify Partner
669 40 71

Just as the previous one, do you like just want to add multiple products on a non product page.

 

I mean if that's the case you can add multiple products from the section I made you, you will need tweak up styling a bit. 

 

But honestly, I am sorry about this but I don't seem to get your requirement properly. Please reach out via mail or whatsapp for a convenient conversation or call may be of you are ok with it.

 

WhatsApp: +91 8274902468

 

Thanks

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.