Shopify themes, liquid, logos, and UX
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 -
Solved! Go to the solution
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;
}
To create a row of text buttons on your Shopify homepage similar to the example site you provided, you can follow these steps:
Access Theme Customization: Go to "Online Store" > "Themes" in your Shopify admin panel, then click "Customize" for your current theme.
Navigate to Homepage Section: Find the section on your homepage where you want to add buttons.
Add a New Content Block: If needed, add a new content block or section where you want the buttons.
Add Button Elements: Use the HTML editor to add button elements ('<a>' tags) with the desired text and links.
Style the Buttons: Customize the appearance of the buttons using CSS in the theme editor.
Link Buttons to Pages or Products: Ensure each button has a correct link using the '<a>' tag's 'href' attribute.
Preview and Publish: Preview your changes to see how the buttons look, then publish the changes to make them live on your Shopify store.
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;
}
I found these on Section Store for $9 incase anyone was also looking
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025