How can I create a row of text buttons with a slider on the homepage?

Solved

How can I create a row of text buttons with a slider on the homepage?

Ryanp
Shopify Partner
108 3 38

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
Shopify Partner
108 3 38

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
Astronaut
1302 161 218

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 Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
Ryanp
Shopify Partner
108 3 38

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
8 0 0

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

hk