Solved

Row of Text Buttons or Pills with Slider

Ryanp
Explorer
61 3 21

Does anybody Have any information on how to do a row of text buttons on the homepage. Button group...It also has a slider if it has more buttons that will fit in container.. Same thing as this site here - 

 

1000021330.jpg

Accepted Solution (1)
Ryanp
Explorer
61 3 21

This is an accepted solution.

I found it. Using custom liquid section add HTML code and CSS.

 

<div class="btn-group">

  <button>Apple</button>

  <button>Samsung</button>

  <button>Sony</button>

</div>

 

CSS:

.btn-group button {

  background-color: #04AA6D; /* Green background */

  border: 1px solid green; /* Green border */

  color: white; /* White text */

  padding: 10px 24px; /* Some padding */

  cursor: pointer; /* Pointer/hand icon */

  float: left; /* Float the buttons side by side */

}

 

.btn-group button:not(:last-child) {

  border-right: none; /* Prevent double borders */

}

 

/* Clear floats (clearfix hack) */

.btn-group:after {

  content: "";

  clear: both;

  display: table;

}

 

/* Add a background color on hover */

.btn-group button:hover {

  background-color: #3e8e41;

}

View solution in original post

Replies 3 (3)

topnewyork
Trailblazer
246 26 35

To create a row of text buttons on your Shopify homepage similar to the example site you provided, you can follow these steps:

  1. Access Theme Customization: Go to "Online Store" > "Themes" in your Shopify admin panel, then click "Customize" for your current theme.

  2. Navigate to Homepage Section: Find the section on your homepage where you want to add buttons.

  3. Add a New Content Block: If needed, add a new content block or section where you want the buttons.

  4. Add Button Elements: Use the HTML editor to add button elements ('<a>' tags) with the desired text and links.

  5. Style the Buttons: Customize the appearance of the buttons using CSS in the theme editor.

  6. Link Buttons to Pages or Products: Ensure each button has a correct link using the '<a>' tag's 'href' attribute.

  7. Preview and Publish: Preview your changes to see how the buttons look, then publish the changes to make them live on your Shopify store.

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Ryanp
Explorer
61 3 21

This is an accepted solution.

I found it. Using custom liquid section add HTML code and CSS.

 

<div class="btn-group">

  <button>Apple</button>

  <button>Samsung</button>

  <button>Sony</button>

</div>

 

CSS:

.btn-group button {

  background-color: #04AA6D; /* Green background */

  border: 1px solid green; /* Green border */

  color: white; /* White text */

  padding: 10px 24px; /* Some padding */

  cursor: pointer; /* Pointer/hand icon */

  float: left; /* Float the buttons side by side */

}

 

.btn-group button:not(:last-child) {

  border-right: none; /* Prevent double borders */

}

 

/* Clear floats (clearfix hack) */

.btn-group:after {

  content: "";

  clear: both;

  display: table;

}

 

/* Add a background color on hover */

.btn-group button:hover {

  background-color: #3e8e41;

}

Hello2222
Shopify Partner
7 0 0

I found these on Section Store for $9 incase anyone was also looking