Reposting again want to add 3 button on dawn homepage

Store Design
,
1

adding this post again because didn’t get help on first one i want to add 3 button on dawn homepage like the image i have shared if any one know please help me .

Untitled.png
Untitled.png1366×768 104 KB

2

Hello Sobia,

Step 1. Add a section named “Custom liquid”.

Step 2. Click the section and in the custom Liquid input copy and paste this code.

Step 3. Scroll down the sections settings. In the CUSTOM CSS input copy and paste this code.

.buttons-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4px;
}
.button-wrapper {
  background: #54595f08;
  padding: 4px;
  border-radius: 4px;
}
.button-link {
  background: #083767;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  display: block;
  padding: 16px 24px;
  text-align: center;
  font-size: 18px;
  transition: all 0.2s linear;
}
.button-link:hover {
  background: #edab65;
  color: #083767;
}

Hope this helps.

3

@dannyelo thank you so much it is working can you tell me where i can add the page link to these buttons ?

4

You are welcome!

Sure. You can add the link in the href attribute inside the tags. I put a placeholder there. Now is href=“#”

Change the # sign.

Best,
5

@dannyelo thank you its working if i have to add these buttons on all other pages it is not working what should i do for that ?

6

it is showing this error

Untitled.png
Untitled.png1366×768 133 KB

7

@dannyelo this is working thank you so much for the help

8

You are welcome!

9

@dannyelo sorry to bother again it is looking like this on mobile view how we can set that in mobile view the button

Untitled.png
Untitled.png1366×701 93.1 KB

10

Hello!

Please change the grid-template-columns prperty to this.

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

Let me know if this works for you!

11

@dannyelo then this 3rd button on home page is going down

can we do something like it will show in row aloso look good on mobile

Untitled.png
Untitled.png1366×768 130 KB

12

Can you add this to the css?

@media screen and (max-width: 967px) {
  .buttons-section {
    grid-template-columns: 1fr;
  }
}

Or replace everything with this:

.buttons-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4px;
}
.button-wrapper {
  background: #54595f08;
  padding: 4px;
  border-radius: 4px;
}
.button-link {
  background: #083767;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  display: block;
  padding: 16px 24px;
  text-align: center;
  font-size: 18px;
  transition: all 0.2s linear;
}
.button-link:hover {
  background: #edab65;
  color: #083767;
}
@media screen and (max-width: 967px) {
  .buttons-section {
    grid-template-columns: 1fr;
  }
}

Let me know if it works for you.

13

it is same nothing changed

14

Its working for me.

Did you delete all the CUSTOM CSS and paste again?

.buttons-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4px;
}
.button-wrapper {
  background: #54595f08;
  padding: 4px;
  border-radius: 4px;
}
.button-link {
  background: #083767;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  display: block;
  padding: 16px 24px;
  text-align: center;
  font-size: 18px;
  transition: all 0.2s linear;
}
.button-link:hover {
  background: #edab65;
  color: #083767;
}
@media screen and (max-width: 967px) {
  .buttons-section {
    grid-template-columns: 1fr;
  }
}

Let me know!

15

yes they are saying Your custom CSS has reached the size limit of 500 characters. Remove some CSS to save your changes.

16

Ok, lets do this.

Create a new file in the folder /sections with the name:

custom-buttons.liquid

paste this code:


{% schema %}
  {
    "name": "Custom buttons",
    "settings": [],
    "presets": [
      {
        "name": "Custom buttons"
      }
    ]
  }
{% endschema %}
{% stylesheet %}
.buttons-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4px;
}
.button-wrapper {
  background: #54595f08;
  padding: 4px;
  border-radius: 4px;
}
.button-link {
  background: #083767;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  display: block;
  padding: 16px 24px;
  text-align: center;
  font-size: 18px;
  transition: all 0.2s linear;
}
.button-link:hover {
  background: #edab65;
  color: #083767;
}
@media screen and (max-width: 967px) {
  .buttons-section {
    grid-template-columns: 1fr;
  }
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Change the # symbols with the urls you want and save the file.

In the customizer you should be able to find a new (custom) section. with the name Custom buttons.

Add it and drag where you need it.

And that should do the job.

Please let me know

17

where i made this section in the theme editor ? or in the backend ?

18

Go to Online store > click 3 dots button (in working theme) > Edit code.

There locate your sections folder and create the file custom-buttons.liquid

19

it is working thank you so much one last thing how i can add bottom spacing in buttons ?

20

Add a padding property.

.buttons-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4px;
  /* Add this property here....... */
  padding: 20px 0;
}