Calling an Alternative Product Form for Custom Product Template

Store Design
1

Hello! I am using the Flex theme and have created a custom template. I want this new template to have a unique ‘Add to Cart’ button, but am having a hard time calling the correct form in my new template.

I’ve created the product.custom.json template, plus a product__main-custom.liquid section, and a product__form-custom.liquid snippet but am unable to tie them all together to display the custom ‘add to cart’ button.

My custom template looks like the below so far. Any help would be much appreciated!

{
  "sections": {
    "breadcrumbs": {
      "type": "product__breadcrumb",
      "disabled": true,
      "settings": {
        "width": "standard",
        "padding_top": 20,
        "padding_bottom": 20,
        "css_class": "",
        "custom_css": ""
      }
    },
    "main": {
      "type": "product__main-custom",
      "blocks": {
        "2454949b-801c-4476-a332-29ce45fb095b": {
          "type": "form",
          "settings": {
            "show_payment_button": false
          }
        }
      },
      "block_order": [
        "2454949b-801c-4476-a332-29ce45fb095b"
      ],
      "settings": {
        "product_images_position": "right",
        "set_product_height": false,
        "product_height": 500,
        "video_looping": false,
        "gallery_arrows": true,
        "enable_zoom": false,
        "enable_product_lightbox": false,
        "slideshow_speed": 0,
        "slideshow_transition": "slide",
        "display_thumbnails": true,
        "thumbnail_position": "bottom-thumbnails",
        "enable_thumbnail_slider": true,
        "width": "standard",
        "padding_top": 40,
        "padding_bottom": 20,
        "animation": "fadeIn",
        "css_class": "",
        "custom_css": ".price {\nmargin-top: 20px !important;\nfont-size: 22px;\nwidth: 100%;\n} \n\n.shopify-installments {\nmargin-left: 0px !important;\nmargin-bottom: 0px !important;\n}\n\n.purchase-details {\nmargin-top: -45px !important;\n}\n\n.product-text {\nmargin-top: 20px;\nfont-size: 14px;\ncolor: #F0B323;\n}"
      }
    },
    "recommendations": {
      "type": "product__recommendations",
      "disabled": true,
      "settings": {
        "show_product_recommendations": false,
        "product_recommendations_style": "grid",
        "product_recommendations_heading": "You may also like",
        "products_per": 3,
        "recommended_products_limit": 6,
        "align_height": false,
        "collection_height": 200,
        "width": "standard",
        "padding_top": 20,
        "padding_bottom": 20,
        "animation": "none",
        "css_class": "",
        "custom_css": ""
      }
    }
  },
  "order": [
    "breadcrumbs",
    "main",
    "recommendations"
  ]
}
2

Hi @MeganBee ,

The add-to-cart button is being rendered using iframe. If you are trying to customized it, will not affect since only the owner of the iframe can override the settings. I would suggest create your own html add-to-cart button but put a type=“submit.”

Regarding the template, you have to assign the template to the product. You have to have the theme live before you can see the template. You can refer to the video below on how to customize your product page and assign the template.

3

Hi @made4Uo ,

Thanks so much for your response. I do understand that I need to apply the template to a published product and have done so, and so I am able to see the template.

Regarding the button—am I correct that I would create the html button as a snippet and then include that snippet in the template.json file? Where would I include that snippet?

Thank you!

4

Hi @MeganBee ,

Did you assign the template to a certain product? You can only view this template to that product. For the code snippet, I would suggest to place it inside the product.liquid under the Section folder. Sorry I am not familiar with flex theme.