How can I make my image banner text clickable and configurable?

eytanlub
Excursionist
24 0 4

Hello,

 

I have a banner with 3 images, as a slider.

I am using Dawn theme.

However, I would need the text to be clickable and also the text to be configurable as follows:

  • font size
  • position in the banner - left aligned
  • include a special character in the text.

My URL is https://porsche-rj-8273.myshopify.com/

 

Please see the required design as below:

 

Screen Shot 2023-05-22 at 15.27.08.png

Replies 2 (2)

NomtechSolution
Astronaut
1245 113 149

To make the text in your banner clickable and configurable in the Dawn theme, you'll need to make some modifications to your theme's code. Here's a step-by-step guide:

  1. Locate the banner code: In your Dawn theme, locate the code responsible for rendering the banner section. This code is typically found in the theme.liquid or a section file such as slideshow-section.liquid or hero-section.liquid.

  2. Edit the banner code: Within the banner code, you'll need to modify the HTML and Liquid code to make the text clickable and add the desired configuration options. Here's an example of how you can achieve this:

 

<div class="banner">
  <div class="banner-image">
    <!-- Add your slider code here -->
  </div>
  <div class="banner-text">
    {% for slide in section.blocks %}
      <div class="slide">
        <a href="{{ slide.settings.link }}">
          <h2 style="font-size: {{ slide.settings.font_size }}; text-align: left;">
            {{ slide.settings.text | replace: '!', '<span class="special-character">!</span>' }}
          </h2>
        </a>
      </div>
    {% endfor %}
  </div>
</div>

 

eytanlub
Excursionist
24 0 4

Hello,

 

sorry, couldnt find the banner code within the theme.liquid , neither at slideshow.liquid