How to add buttons to my 'image with features'? Spark Theme

Store Design
1

I would like to have 2 link/product buttons in these two places.
I would like to have 2 link/product buttons in these two places.1654×950 213 KB

1 Like
2

Hi @LSAccounting ,

Go to theme code edit > Sections > Image with features

Search for this text " image-with-features__item image-with-features__item–rounded image-with-features__item–has-image "

when you find the <div with this class add the button code where the div ends

Your button code may look like this

Click here

The above code is just a rough idea as you’ve provided a rough description of the requirements. You can PM me if you need my help.

1 Like
3

Hi @UmairA . Thank you for your reply. I can’t find this in the sections > image with features. I have pasted the whole code script below that I have found.

Any further tips or alternatives?

{%- liquid
assign image_is_constrained = true

if section.settings.aspect_ratio == ‘natural’
assign image_is_constrained = false
endif
-%}

{%- if section.settings.image -%}
{% render 'image' with image: section.settings.image, wrapper_class: 'image-with-features__image', disable_style: image_is_constrained, %}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- for block in section.blocks -%} {%- if block.type == 'heading' -%}

{{ block.settings.title | newline_to_br }}

{%- else -%} {% render 'image-with-features-item' with image: block.settings.image, image_shape: block.settings.image_shape, text_max_width: block.settings.text_max_width, heading: block.settings.heading, subheading: block.settings.subheading, %} {%- endif -%} {%- endfor -%}

{% schema %}
{
“name”: “t:sections.image_with_features.name”,
“tag”: “section”,
“class”: “shopify-section–stackable shopify-section–image-first”,
“settings”: [
{
“id”: “image”,
“type”: “image_picker”,
“label”: “t:sections.image_with_features.settings.image.label”
},
{
“id”: “image_width”,
“type”: “select”,
“label”: “t:sections.image_with_features.settings.image_width.label”,
“options”: [
{ “label”: “t:sections.image_with_features.settings.image_width.options__1”, “value”: “half” },
{ “label”: “t:sections.image_with_features.settings.image_width.options__2”, “value”: “two-thirds” }
],
“default”: “half”
},
{
“id”: “aspect_ratio”,
“type”: “select”,
“label”: “t:sections.image_with_features.settings.aspect_ratio.label”,
“options”: [
{ “label”: “t:sections.image_with_features.settings.aspect_ratio.options__1”, “value”: “natural” },
{ “label”: “t:sections.image_with_features.settings.aspect_ratio.options__2”, “value”: “square” },
{ “label”: “t:sections.image_with_features.settings.aspect_ratio.options__3”, “value”: “landscape” },
{ “label”: “t:sections.image_with_features.settings.aspect_ratio.options__4”, “value”: “portrait” }
],
“default”: “natural”
},
{
“type”: “select”,
“id”: “text_position”,
“label”: “t:sections.image_with_features.settings.text_position.label”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image_with_features.settings.text_position.options__1”
},
{
“value”: “right”,
“label”: “t:sections.image_with_features.settings.text_position.options__2”
}
]
},
{
“type”: “select”,
“id”: “text_alignment”,
“label”: “t:sections.image_with_features.settings.text_alignment.label”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image_with_features.settings.text_alignment.options__1”
},
{
“value”: “center”,
“label”: “t:sections.image_with_features.settings.text_alignment.options__2”
},
{
“value”: “right”,
“label”: “t:sections.image_with_features.settings.text_alignment.options__3”
}
]
},
{
“id”: “section_contrast”,
“type”: “checkbox”,
“label”: “t:sections.image_with_features.settings.section_contrast.label”,
“default”: false
}
],
“max_blocks”: 6,
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.image_with_features.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“id”: “title”,
“type”: “text”,
“label”: “t:sections.image_with_features.blocks.heading.settings.heading.label”,
“default”: “Images with Features”
},
{
“type”: “range”,
“id”: “text_max_width”,
“label”: “t:sections.image_with_features.blocks.heading.settings.text_max_width.label”,
“min”: 18,
“max”: 48,
“step”: 1,
“default”: 32
}
]
},
{
“type”: “feature”,
“name”: “t:sections.image_with_features.blocks.feature.name”,
“settings”: [
{
“id”: “image”,
“type”: “image_picker”,
“label”: “t:sections.image_with_features.blocks.feature.settings.image.label”,
“info”: “t:sections.image_with_features.blocks.feature.settings.image.info”
},
{
“id”: “image_shape”,
“type”: “radio”,
“label”: “t:sections.image_with_features.blocks.feature.settings.image_shape.label”,
“default”: “round”,
“options”: [
{ “value”: “round”, “label”: “t:sections.image_with_features.blocks.feature.settings.image_shape.options__1” },
{ “value”: “square”, “label”: “t:sections.image_with_features.blocks.feature.settings.image_shape.options__2” }
]
},
{
“id”: “heading”,
“type”: “text”,
“label”: “t:sections.image_with_features.blocks.feature.settings.heading.label”,
“default”: “Example heading”
},
{
“id”: “subheading”,
“type”: “richtext”,
“label”: “t:sections.image_with_features.blocks.feature.settings.subheading.label”,
“default”: “

Use these small paragraph blocks to feature various aspects about a product. You can add up to three of these blocks and each can have an image associated with them.

”
},
{
“type”: “range”,
“id”: “text_max_width”,
“label”: “t:sections.image_with_features.blocks.feature.settings.text_max_width.label”,
“min”: 18,
“max”: 48,
“step”: 1,
“default”: 32
}
]
}
],
“presets”: [
{
“name”: “t:sections.image_with_features.presets.name”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “feature”
},
{
“type”: “feature”
}
]
}
]
}
{% endschema %}