Buttons and Badges
< Back to Buttons and Badges

Houzz Button for your website

Allow your website visitors to add photos of products and spaces to Ideabooks easily with the Houzz Button.


Hint: a valid image URL starting with http://

Preview (warning: could not load image) :




Please provide a title




Please provide a category
We found a Houzz Button embedded on this page that is associated with another Houzz account.

Please update the page with your code below.

 Houzz Button Code Paste this code along side your other social share buttons.
Houzz Button Embed Code Template
<a class="houzz-share-button"
   data-url="http://www.yoursite.com/product/page/ "
   data-hzid=""
   data-title="Product Title as it will be seen inside Houzz "
   data-img="http://yoursite/path/to/product/image.jpg "
   data-desc="Product description text "
   data-category="Category keywords "
   data-showcount="1 "
   href="https://www.houzz.com">Houzz</a>
<script>...</script>

The Houzz Button embed code consists of an <a> tag followed a <script> tag. Customize the Title, Image and Description of your products as it appears in Houzz via the following HTML5 custom data attributes.

The embed code MUST exist in the static HTML of the product page in order for our backend servers to verify your ownership of the website and to associate the product to your Houzz profile.

Available Attributes

  • data-url - Canonical URL of your product. If you already have products listed in Houzz, make sure the URLs match exactly to prevent duplicate listings and maintain accuracy of the Ideabook count.
  • data-hzid - A unique identifier that verifies you own this web page.
  • data-title - Title of the product.
  • data-img - URL of hi-res product image.
  • data-desc - Brief description of the product.
  • data-category - Keywords to help categorize the product. (ie. 'Wall Sconces')
  • data-showcount - A value of 1 shows the Ideabook count of this product. A value of 0 hides the count.
Website Ownership
Your Houzz Website Identifier (HZID):

We look for this unique identifier in the HTML of your product pages to associate the product page inside Houzz to your profile. In order to prevent other websites from using your unique ID in their webpages, you will need to specify which domains you own by modifying your profile's Website Button Settings.

List of approved domains (modify):
Houzz Button Embed Code Template for Big Commerce
<a class="houzz-share-button"
   data-url="%%GLOBAL_CurrentProductLink%%"
   data-hzid=""
   data-title="%%GLOBAL_ProductName%%"
   data-img="%%GLOBAL_InitialZoomImage%%"
   data-showcount="1"
   href="https://www.houzz.com">Houzz</a>
<script>...</script>
  1. Copy the templated HTML code above.
  2. Log into your BigCommerce dashboard.
  3. Click the "Design" link at the top of the page.
  4. Click the "Browse Template Files..." button to access all of your layouts, panels and snippets.
  5. Find the layout, panel or snippet you would like the button to appear in and open the file in the online editor.
  6. Paste the Houzz Button HTML code and Save the file.
Houzz Button Embed Code Template for Shopify
<a class="houzz-share-button"
   data-url="{{ shop.url }}{{ product.url }}"
   data-hzid=""
   data-title="{{ product.title | strip_html }}"
   data-img="{{ product.featured_image | product_img_url: 'original' }}"
   data-desc="{{ product.deescription | strip_html }}"
   data-showcount="1"
   href="https://www.houzz.com">Houzz</a>
<script>...</script>
  1. Copy the templated HTML code above.
  2. Log into your Shopify dashboard.
  3. Click the "Themes" tab on the left.
  4. Click the "Template Editor" to access all of your layout and template files.
  5. Find the layout, template or snippet you would like the button to appear in and open the file in the online editor.
  6. Paste the Houzz Button HTML code and Save the file.