• Ifra Saqlain

  • February 09, 2022 05:06
  • Edited

  Community Moderator

  

  

  @Morris Coyle, you can add blocks on the homepage and put the classes and HTML structure from category blocks, see below how I did, pick the below code, and paste it at your homepage.

  In this code, you can write your box title, box description (Optional), add a custom URL in the anchor tag which redirect the box directly wherever you want.

  
  
  
  Article Name/Box Title
  < span class = " blocks-item-description”>选项al - add or not
  
  
  
  
  
  Article Name/Box Title
  < span class = " blocks-item-description”>选项al - add or not
  
  
  
  
  
  Article Name/Box Title
  < span class = " blocks-item-description”>选项al - add or not
  
  
  
  
  
  Article Name/Box Title
  < span class = " blocks-item-description”>选项al - add or not
  
  
  

  Screenshot for the same:

  

  Output:

  

  If any confusion do let me know :)

  Thanks

  Team

• Cara Rebernick

  • September 07, 2022 16:23
  • Edited

  Hi Ifra,

  I tried doing the above, and it all worked except I'd like the custom urls to not be added to the help center url. Is that possible? For example, I want a category button to lead to honelearners.zendesk.com but instead it leads tohttps://help.honehq.com/hc/www.honelearners.zendesk.com. Any thoughts on how I can fix this?

  Thanks!

• Ifra Saqlain

  • September 07, 2022 18:51

  Community Moderator

  

  

  HeyCara Rebernick:)

  Use the code below:

  $(document).ready(function(){
  
  if ($('.blocks-item > a > span:contains("CATEGORY NAME ONE")')) {
  $(".blocks-item > a").attr("href", "amazon.com");
  }
  
  else if ($('.blocks-item > a > span:contains("CATEGORY NAME TWO")')) {
  $(".blocks-item > a").attr("href", "google.com");
  }
  });
  
  
  
  Note: RemoveCATEGORY NAMEONEand write yourcategory namefor which you wanna addcustom url.
  Removeamazon.comand write yourURL.

  If any confusion feel free to ask.

  Thanks

• Agente Sucursal

  • December 16, 2022 12:05

  Hi Ifra!

  I'm trying to do this but it doesn't work since we have two languages in our help center. How can I implement the page links in this scenario?

  Thank you in advace.

• Ifra Saqlain

  • December 18, 2022 12:57
  • Edited

  Community Moderator

  

  

  HeyRocio Andújar, you can check the href value of your blocks via JS code:

  Blocks are same, but href values are different for different languages.

  For Danish
  
  $('a[href^="/hc/da/categories/11695152081172-generel"]').attr("href", "google.com");
  
  $('a[href^="/hc/da/categories/11695154093332-forfremmet"]').attr("href", "amazon.com");
  
  
  For English
  
  $('a[href^="/hc/en-us/categories/360002539551-General"]').attr("href", "https://wordpress.com/");
  
  $('a[href^="/hc/en-us/categories/4404022102548-promoted"]').attr("href", "//www.ying8.net/in/#georedirect");
  
  
  
  Output:
  
  Danish -
  
  
  
  
  English -
  
  

  There are more ways but I used this. If any issue let me know :)

  Thanks

• Mason Bjerke

  • February 14, 2023 16:53

  HeyIfra Saqlain,

  Where does the following go? Is it in script.js or in the home_page.hbs? I am having the same issue as Cara:

  $(document).ready(function(){
  
  if ($('.blocks-item > a > span:contains("CATEGORY NAME ONE")')) {
  $(".blocks-item > a").attr("href", "amazon.com");
  }
  
  else if ($('.blocks-item > a > span:contains("CATEGORY NAME TWO")')) {
  $(".blocks-item > a").attr("href", "google.com");
  }
  });
  
  
  
  Note: RemoveCATEGORY NAMEONEand write yourcategory namefor which you wanna addcustom url.
  Removeamazon.comand write yourURL.

• Ifra Saqlain

  • February 14, 2023 17:11

  Community Moderator

  

  

  @Mason Bjerke, that snippet will be add to script.js file at the end of all code of that file.

  $(document).ready(function(){
  
  if ($('.blocks-item > a > span:contains("CATEGORY NAME ONE")')) {
  $(".blocks-item > a").attr("href", "amazon.com");
  }
  
  else if ($('.blocks-item > a > span:contains("CATEGORY NAME TWO")')) {
  $(".blocks-item > a").attr("href", "google.com");
  }
  });

• Amanda Barber

  • May 26, 2023 01:07

  Trying to have our Training Hub category redirect to another website rather than the section in Zendesk, but have been rather unsuccessful. Using the Obscu template and have this in the home_page.hbs file:
  
  

  

• Ifra Saqlain

  • May 26, 2023 07:04
  • Edited

  Community Moderator

  

  

  Hi Amanda Barber,

  I tried it and it's working, I add {{isnt}} condition in anchor tag, see the screenshot:

  
  
  
  
  Code:
  
  {{#isnt id4404022102548}}-- My category ID, which I want to redirect to external website.
  
  
  
  {{else}}
  
  -- External URL
  
  {{/isnt}}

• Product Support

  • May 29, 2023 03:01

  That's great,Ifra Saqlain- it worked, but now my icons are not showing on the category blocks. Any ideas?

• Product Support

  • May 31, 2023 13:36

  Ifra Saqlain- any ideas for getting the icons to show up as well?

• Ifra Saqlain

  • May 31, 2023 15:49

  Community Moderator

  

  

  Hi Product Support,

  显示类别的图标,按照步骤s below:

  i). Add the script code at the bottom of your home_page.hbs file.

  
  
  Screenshot:
  
  

  ii). Add the given code inside the blocks item code.

  
  
  
  Screenshot:
  

  iii). Add CSS to style.css file at the bottom.

  /***** CSS Modifications for Category Images *****/
  .categories .blocks-item-link {
  display: flex;
  align-items: center;
  }
  
  .blocks-item img, .category-page-images, .section-page-images {
  margin-right: 20px;
  width: 32px;
  height: 32px;
  }
  
  
  Screenshot:
  
  
  
  

  iv). Add this code to document_head.hbs file.

  
  
  
  Screenshot:
  
  
  Note:These are category's ID, replace this with yours IDs.
  
  "4404022102548" : "{{asset 'img_1.png'}}",
  "360004039672" : "{{asset 'img_2.png'}}",
  "360003781252" : "{{asset 'img_3.png'}}",
  "360003781212" : "{{asset 'img_4.png'}}",
  
  
  Category ID -4404022102548
  Image Name -img_1.png
  
  

  Credit:https://community-tutorial.zendesk.com/hc/en-us/articles/115004178674-Adding-Images-in-Copenhagen-theme?_ga=2.257155657.310386109.1685456562-607324386.1685001940#bottom

  If any query feel free to ask :)

  Thanks

• Product Support

  • May 31, 2023 16:25

  I'm using a different template that seems to already have images that should appear?

  {{ help_center.name }}

  {{!-- Hero block --}}
  

  
  

  
  

  
  

  {{ t 'search' }}

  
  

  {{#if settings.translations_enable}}{{dc settings.hero_title}}{{else}}{{settings.hero_title}}{{/if}}

  
  

  {{#if settings.translations_enable}}{{dc settings.hero_info}}{{else}}{{settings.hero_info}}{{/if}}

  
  {{search instant=settings.instant_search class='search search-full' placeholder=settings.search_placeholder}}
  

  
  

  
  

  {{!-- Categories section --}}
  {{#if categories}}
  

  
  

  
  

  
  

  {{ t 'categories' }}

  
  

  {{#if settings.translations_enable}}{{dc settings.kb_title}}{{else}}{{settings.kb_title}}{{/if}}

  
  

  
  

  
  {{#each categories}}
  {{#if ../has_multiple_categories}}
  
  • 
    {{#isnt id 202700727}}
    
    {{else}}
    
    {{/isnt}}
    {{!--
    
    
    
    --}}
    {{name}}
    {{excerpt description characters=150}}
    
    
  
  {{else}}
  {{#each sections}}
  
  • 
    
    
    
    {{name}}
    
    {{excerpt description characters=150}}
    
    
  
  {{/each}}
  {{/if}}
  {{/each}}
  

  
  {{pagination}}
  

  
  

  
  

  
  

  
  {{/if}}

  
  

  
  {{!-- Promoted article block --}}
  

  
  {{#is settings.toggle_promoted_articles "yes"}}
  {{#if promoted_articles}}
  

  
  

  {{t 'promoted_articles'}}

  
  

  
  {{#each promoted_articles}}
  
  • 
    
    {{title}}
    {{#if internal}}
    " width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    
    
    
    {{/if}}
    
    
  
  {{/each}}
  

  
  

  
  {{/if}}
  {{/is}}

  {{!-- Recent article block --}}
  {{#is settings.toggle_recently_viewed_article "yes"}}
  {{recent_articles}}
  {{/is}}

  {{!-- Recent activity block --}}
  {{#is settings.toggle_recent_activity "yes"}}
  

  
  {{recent_activity}}
  

  
  {{/is}}
  

  
  

  
  

  {{!-- Get in touch section --}}
  {{#is settings.contacts_blocks "yes"}}
  

  
  

  
  

  
  

  {{#if settings.translations_enable}}{{dc settings.contacts_title}}{{else}}{{settings.contacts_title}}{{/if}}

  
  

  
  

  {{!-- Custom block 1 --}}
  {{#isnt settings.first_block_title '-'}}
  

  • 
    
    
    {{#if settings.translations_enable}}{{dc settings.first_block_title}}{{else}}{{settings.first_block_title}}{{/if}}
    {{#if settings.translations_enable}}{{dc settings.first_block_description}}{{else}}{{settings.first_block_description}}{{/if}}
    
    
  
  {{/isnt}}

  {{!-- Custom block 2 --}}
  {{#isnt settings.second_block_title '-'}}
  

  • 
    
    
    {{#if settings.translations_enable}}{{dc settings.second_block_title}}{{else}}{{settings.second_block_title}}{{/if}}
    {{#if settings.translations_enable}}{{dc settings.second_block_description}}{{else}}{{settings.second_block_description}}{{/if}}
    
    
  
  {{/isnt}}

  {{!-- Custom block 3 --}}
  {{#isnt settings.third_block_title '-'}}
  

  • 
    
    
    {{#if settings.translations_enable}}{{dc settings.third_block_title}}{{else}}{{settings.third_block_title}}{{/if}}
    {{#if settings.translations_enable}}{{dc settings.third_block_description}}{{else}}{{settings.third_block_description}}{{/if}}
    
    
  
  {{/isnt}}
  

  
  

  
  

  
  

  
  

  
  {{/is}}

• Ifra Saqlain

  • May 31, 2023 17:21

  Community Moderator

  

  

  Add this line of code inside blocks-item:

  
  
  
  Screenshot:
  
  

  Try this and let me know.

• Product Support

  • May 31, 2023 18:40

  Success - thank you so very muchIfra Saqlain!

• Ifra Saqlain

  • May 31, 2023 19:13

  Community Moderator

  

  

  Happy to hear that it worked!

Pleasesign into leave a comment.