Adding multiple buttons to slideshow homepage block in Impact Theme

[scottb3Media]

Hi All,

I'm trying to add an additional button to the image slideshow on my home page. I'm hoping to emulate a similar layout to the attached image. Right now I have a single button on the slide show saying shop now- I'd like to have three horizontal buttons directing users to unique product pages.

[DaisyVo]

Hi @scottb3Media 

To add multiple buttons to the slideshow on your homepage in the Impact theme, you’ll need to edit your theme’s code. This involves working with Liquid (Shopify’s templating language) and CSS. I’ll guide you step-by-step so you can achieve a layout similar to the attached image with three horizontal buttons.

1. Backup Your Theme

Before you start, always make a backup of your theme to avoid losing your work if something goes wrong.
Go to Online Store > Themes > Actions > Duplicate to create a backup.

2. Locate the Slideshow Code

• Go to Online Store > Themes > Actions > Edit Code.
• In the code editor, find the slideshow section file. It’s usually in Sections and named something like slideshow.liquid or image-banner.liquid.

3. Add HTML for Additional Buttons

Find the existing button code (look for <a> or a class like btn). Copy and duplicate the code twice to create additional buttons. Update the text and links for each button. Example:

<div class="slideshow-buttons">

  <a href="/collections/collection1" class="btn">Shop Now</a>

  <a href="/collections/collection2" class="btn">View More</a>

  <a href="/collections/collection3" class="btn">Discover</a>

</div>

4. Style the Buttons with CSS

To align the buttons horizontally, you’ll need to update your theme’s CSS.

• Go to Assets > base.css or a similar file.
• Add the following code to style and align the buttons:

.slideshow-buttons {

  display: flex;

  gap: 10px;

  justify-content: center; /* Aligns buttons horizontally in the center */

}

.slideshow-buttons .btn {

  padding: 10px 20px;

  background-color: #000; /* Customize the color */

  color: #fff;

  text-decoration: none;

  border-radius: 5px;

  transition: background-color 0.3s ease;

}

.slideshow-buttons .btn:hover {

  background-color: #555; /* Hover effect */

}

5. Test and Adjust

Preview your changes by clicking Preview Theme in the editor. Check the placement and style of the buttons. Adjust the CSS if necessary to match the layout in your reference image.

6. Optional: Add Customization in Theme Editor

If you want the flexibility to add or change buttons from the Shopify admin without editing the code every time:

• Add inputs for additional buttons in schema within the same slideshow.liquid file. Example:

{

  "type": "url",

  "label": "Button 2 Link",

  "id": "button_2_link"

}

Then, use the {{ section.settings.button_2_link }} variable to dynamically insert the link.

If you’re not comfortable with code or need help, let me know, and I can explain further or assist you with the details.

If you need any other assistance, I am willing to help.
Best regards,
Daisy.