How can I add a matching button to an existing 'image with text overlay' section?

Store Design
,
1

Hey everyone!

I was wondering if there is a way to add a button that matches the style of my other buttons, to this already exisiting section centred along with the text. The theme is Shopify theme ‘modular’

The section is ‘image with text overlay’

Thank you!

Untitled.png
Untitled.png1600×900 47.1 KB

1 Like
2

you can add a button to the ‘Image with Text Overlay’ section in your Shopify store. To do so, you’ll need to access the theme’s code and make some modifications to the HTML and CSS. Here’s a general idea of the steps you can follow:

  • Go to your Shopify store’s admin panel and navigate to the ‘Themes’ section.

  • Find the ‘Actions’ dropdown menu for the theme you’re using (modular) and select ‘Edit code’.

  • In the ‘Sections’ directory, find the file for the ‘Image with Text Overlay’ section and open it.

  • You’ll need to add the HTML for the button. Here’s an example:

Learn More

  • You can place the button anywhere you’d like within the section’s HTML.

  • Next, you’ll need to style the button to match your other buttons. You can do this by adding the following CSS to your theme’s stylesheet:

.my-button {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}

  • You can adjust the styles to match your other buttons as needed.

  • Save your changes and preview your store to see the button in the ‘Image with Text Overlay’ section.

3

@jr-rl

yes its possible can you please share full section code so i will check and let you know

4

{%- render ‘banner’,
image: section.settings.banner_image,
mobile_image: section.settings.banner_image_mobile,
height: section.settings.banner_height,
transparent_header: true,
subheading: section.settings.subheading,
heading: section.settings.title,
text: section.settings.text,
text_position: section.settings.text_position,
image_position: section.settings.image_position,
color_text: section.settings.color_text,
color_overlay: section.settings.color_overlay,
overlay_opacity: section.settings.overlay_opacity,
unique: section.id
-%}

{% schema %}
{
“name”: “Image with text overlay”,
“settings”: [
{
“type”: “image_picker”,
“id”: “banner_image”,
“label”: “Image”
},
{
“type”: “image_picker”,
“id”: “banner_image_mobile”,
“label”: “Mobile Image”
},
{
“type”: “select”,
“id”: “image_position”,
“label”: “Image position”,
“default”: “center-center”,
“options”: [
{ “label”: “Top”, “value”: “top-center” },
{ “label”: “Right”, “value”: “right-center” },
{ “label”: “Center”, “value”: “center-center” },
{ “label”: “Left”, “value”: “left-center” },
{ “label”: “Bottom”, “value”: “bottom-center” }
]
},
{
“type”: “select”,
“id”: “banner_height”,
“label”: “Height”,
“options”: [
{
“value”: “one-hundred”,
“label”: “Full screen”
},
{
“value”: “image-height”,
“label”: “Image height”
},
{
“value”: “big”,
“label”: “750px”
},
{
“value”: “normal”,
“label”: “650px”
},
{
“value”: “small”,
“label”: “550px”
}
],
“default”: “small”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Subheading”,
“default”: “Introducing”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Text block”
},
{
“type”: “richtext”,
“id”: “text”,
“label”: “Text”,
“default”: “

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

”
},
{
“type”: “select”,
“id”: “text_position”,
“label”: “Text position”,
“default”: “center”,
“options”: [
{ “label”: “Left”, “value”: “left” },
{ “label”: “Center”, “value”: “center” },
{ “label”: “Right”, “value”: “right” },
{ “label”: “Bottom left”, “value”: “bottom-left” },
{ “label”: “Bottom right”, “value”: “bottom-right” }
]
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Text”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “color_overlay”,
“label”: “Overlay”,
“default”: “#333333”
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: “Overlay opacity”,
“step”: 5,
“max”: 95,
“min”: 0,
“unit”: “%”,
“default”: 0
}
],
“presets”: [
{
“category”: “Image”,
“name”: “Image with text overlay”
}
]
}
{% endschema %}

5

When attempting to add the HTML for the button to ‘section-with-image-overlay.liquid’ I encounter an error when saving. Which part am I suppose to add this to?