Add a second button to image with text- impulse theme

Store Design
1

hi there- I’d like to be able to add a second button to the “image with text” snippet on my front page.

Where it shows Click here to book now i’d like that to be an extra button next to buy a kit.

cocktailsbycand_0-1637077641337.png
cocktailsbycand_0-1637077641337.png2132×1040 433 KB

Thanks so much for any help!

code (i think this is the right bit?) is here:

{%- if section.settings.divider -%}{%- endif -%}

  {%- capture image_layout -%}
    

      

        {%- if section.settings.image != blank -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank %}{% endif -%}
          

            {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            
          

          {%- if section.settings.button_label != blank and section.settings.button_link != blank %}{% endif -%}
        {%- else -%}
          

            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          

        {%- endif -%}
      

    

  {%- endcapture -%}

  
    {%- if section.settings.layout == 'left' -%}
      {{ image_layout }}
    {%- endif -%}

    

      {%- if section.settings.subtitle != blank -%}
        

{{ section.settings.subtitle }}

      {%- endif -%}
      {%- if section.settings.title != blank -%}
        

{{ section.settings.title | escape }}

      {%- endif -%}
      {%- if section.settings.text != blank -%}
        {{ section.settings.text }}

      {%- endif -%}
      {%- if section.settings.button_label != blank -%}
        
          {{ section.settings.button_label }}
        
      {%- endif -%}
    

    {%- if section.settings.layout == 'right' -%}
      {{ image_layout }}
    {%- endif -%}
  

{%- if section.settings.divider -%}
{%- endif -%}

{% schema %}
  {
    "name": "Image with text",
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "range",
        "id": "image_width",
        "label": "Image width",
        "default": 500,
        "min": 100,
        "max": 500,
        "step": 10,
        "unit": "px"
      },
      {
        "type": "text",
        "id": "subtitle",
        "label": "Subheading",
        "default": "Improved"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "

Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.

"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label",
        "default": "Optional button"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Image on left"
          },
          {
            "value": "right",
            "label": "Image on right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}
1 Like
2

@cocktailsbycand

thank for post please try this code

{%- if section.settings.divider -%}{%- endif -%}

  {%- capture image_layout -%}
    

      

        {%- if section.settings.image != blank -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank %}{% endif -%}
          

            {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            
          

          {%- if section.settings.button_label != blank and section.settings.button_link != blank %}{% endif -%}
        {%- else -%}
          

            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          

        {%- endif -%}
      

    

  {%- endcapture -%}

  
    {%- if section.settings.layout == 'left' -%}
      {{ image_layout }}
    {%- endif -%}

    

      {%- if section.settings.subtitle != blank -%}
        

{{ section.settings.subtitle }}

      {%- endif -%}
      {%- if section.settings.title != blank -%}
        

{{ section.settings.title | escape }}

      {%- endif -%}
      {%- if section.settings.text != blank -%}
        {{ section.settings.text }}

      {%- endif -%}
      {%- if section.settings.button_label != blank -%}
        
          {{ section.settings.button_label }}
        
      {%- endif -%}
{%- if section.settings.button_label2 != blank -%}
        
          {{ section.settings.button_label2 }}
        
      {%- endif -%}
    

    {%- if section.settings.layout == 'right' -%}
      {{ image_layout }}
    {%- endif -%}
  

{%- if section.settings.divider -%}
{%- endif -%}

{% schema %}
  {
    "name": "Image with text",
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "range",
        "id": "image_width",
        "label": "Image width",
        "default": 500,
        "min": 100,
        "max": 500,
        "step": 10,
        "unit": "px"
      },
      {
        "type": "text",
        "id": "subtitle",
        "label": "Subheading",
        "default": "Improved"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "

Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.

"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label",
        "default": "Optional button"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
{
        "type": "text",
        "id": "button_label2",
        "label": "Button label 2",
        "default": "Optional button"
      },
      {
        "type": "url",
        "id": "button_link2",
        "label": "Button link 2"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Image on left"
          },
          {
            "value": "right",
            "label": "Image on right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}