Hi Guys,
How to re-fomat text to columns buttons to be the as the tabs buttons as shown in the picture bellow:
Thank you,
allianceautoproducts
Topic summary
Goal: make the “View products” column buttons match the tab-style buttons—same size as the “View all” collection buttons and centered within each column.
Context and constraints:
- The requester can change colors via theme settings but not padding/margins.
- Visual references (images) show the desired look; they are central to understanding alignment and sizing.
Proposed solution (Shopify Debut theme):
- Center “View products” in feature columns by editing feature-columns.liquid to wrap the button label in a container and apply CSS (e.g., a center-btn wrapper with display:flex; and setting the .btn margin to auto) to center the button.
- Make “View all” match size/appearance by editing collection.liquid to add the same button classes used in feature-columns.liquid, ensuring consistent styling. Optionally add a specific class to fine-tune margin and padding without affecting other buttons.
Status:
- No confirmation of implementation; guidance provided with file locations and CSS approach. Discussion remains open pending the requester’s results or further questions.
What specific changes are you looking to make? Do you need help to change the color of the buttons to match color of the tabs button, or are you trying to change those paragraph columns into tabs and use the buttons to toggle them?
Hi,
Need to make all collections “view all” to be the same size of text to columnss “view products”, besides make text to columnss “view products” button in middle of the columns.
Thank you
Do you how to locate those buttons on the in the theme files?
I tired, but you can only change colors, not padding or margins
So if I understood you correctly you are trying to get something like this.
if that’s the case,
If you are able to access the code of the buttons, you can
Assuming you are using debut theme, this is how approach it:
- To center the “View products” buttons:
locate the feature-columns.liquid section and go to the button code which should look something like:
{{- block.settings.button_label | escape -}}
change that to:
{{- block.settings.button_label | escape -}}
in your css file add this code:
.center-btn{
display:flex;
}
.center-btn .btn{
margin: auto;
}
if you don’t want to mess with your css file you could also use inline css for the new div and the button.
- To make the “View All” button the same size as the others:
Locate the “collection.liquid”
find the code of the button which looks like:
{{ 'collections.general.view_all' | t }} {{ collection_name }}
add the same classes as on button from the feature-columns.liquid file to make it look like
{{ 'collections.general.view_all' | t }} {{ collection_name }}
You can also add another specific class to adjust the margin & padding of this button without affecting the other buttons.
let me know if this helps