Image with Text Button - Capital Theme

[Caroline83]

Hi everyone! I hope you can help.

I'd like to add a Button to the Image with Text section on the Capital Theme - please could someone tell me what code to use and where to insert the code? 

I'd like the button to look exactly as below:

Centred below the text

Button background #333333 with font colour #FFFFFF

Font: Century Gothic Regular.  

Text and button all centred within the space.

Thank you very much!

[sahilsharma9515 · Accepted solution]

Hi @Caroline83 Welcome to the Shopify community, without looking into your theme files, it's not possible to provide you the exact code and where exactly you need to add that code, but I can provide you the base code so that you can edit it according to your theme and then use it.

• Identify Image with Text Section: In your Shopify admin panel, go to "Online Store" > "Themes" > "Customize" for the Capital Theme. Navigate to the page or section where you want to add the button.

• Edit Section Code: In the theme customization interface, there should be an option to edit the section code for the Image with Text section. Look for an option like "Edit code" or "Edit section."

• Add Button Code: Within the section code, find the section responsible for displaying the text and image. You'll need to add HTML markup for the button below the text. Here's an example:

<div class="image-with-text-section">
  <!-- Existing code for image and text -->
  <p>Your text goes here</p>
  <a href="#" class="custom-button">Button Text</a>
</div>

Replace "Your text goes here" with your actual text content and "Button Text" with the text you want on the button.

• Add CSS Styling: To style the button as per your requirements, you'll need to add custom CSS. Here's an example of how you can style the button:

.custom-button {
  display: block;
  margin: 0 auto; /* Center the button */
  background-color: #333333;
  color: #FFFFFF;
  font-family: "Century Gothic", sans-serif;
  font-weight: normal;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}

.custom-button:hover {
  background-color: #555555;
}

• Save Changes: After adding the button code and CSS styling, save your changes in the theme editor.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Caroline83]

Thank you for your time Sahil! 

This did work. However, I eventually settled on a different solution that I found in an older discussion. I'm now struggling to add a margin/space between the button and the text above. Full details of issue with the code I'm using can be found in this community post.