Table of Contents picking up Amazon product grid

That’s because “Products from Amazon” is within a headline tag. Probably h3. And TOC’s automatically gather headlines. Modify your template and remove those tags.

Cheers,
Sascha

Thanks for your reply. I choose the heading size for TOC and it’s H2. Which is what I need for SEO purposes too.

Which template, TOC or Amazon? Not possible for TOC – it runs throughout my site.

Need something to change with Amazon.

Of course the AALB template ??

I looked into the ProductGrid and ProductCarousel template (don’t know which one you’re using), and both have their headlines as h2.

So, if you change that into h3 you should be fine.

Phew!

How do I change the headings? There are no physical headings for Amazon on the page so they must come from the plugin (can’t see anything in Amazon settings).

Thanks!

Read the documentation about how to clone the standard templates and to create custom templates from them.

• This reply was modified 7 years, 4 months ago by superninchen.

Dear @twoscottsabroad,

As @superninchen stated you have to create a custom template & do the customizations as per your specific needs. Resolving this thread for now. Feel free to open this thread in case this doesn’t answer your query.

Where would I find documentation?

At the bottom of the About page of the plugin, there’s a link.

Found the documentation in FAQ

https://s3.amazonaws.com/aalb-public-resources/documents/AssociatesLinkBuilder-UserGuide.pdf

I’ve not touched HTML on my site before. I’m self-taught for website building and WordPress, apologies. I can follow instruction if you could advise me on the following:

___________________________

This is the cloned template – Can I just delete’products from Amazon’?

<!– A 2×5 Grid Template Layout. It can be configured by the two input fields below –>
{{#Items}} <!–Section tag for iterating through the list of items–>
<div class=”aalb-pg-ad-unit” id=”{{ID}}”>
<h2 class=”aalb-pg-ad-header”>{{#AalbHeader}}{{#MarketplaceUS}}Products from Amazon.com{{/MarketplaceUS}}{{#MarketplaceFR}}Produits disponibles sur Amazon.fr {{/MarketplaceFR}}{{#MarketplaceIT}}Acquista su Amazon.it{{/MarketplaceIT}}{{#MarketplaceDE}}Produkte von Amazon.de{{/MarketplaceDE}}{{#MarketplaceES}}Producto disponible en Amazon.es{{/MarketplaceES}}{{#MarketplaceBR}}Products from Amazon.com.br{{/MarketplaceBR}}{{#MarketplaceCA}}Products from Amazon.ca{{/MarketplaceCA}}{{#MarketplaceCN}}Products from Amazon.cn{{/MarketplaceCN}}{{#MarketplaceIN}}Products from Amazon.in{{/MarketplaceIN}}{{#MarketplaceJP}}Products from Amazon.co.jp{{/MarketplaceJP}}{{#MarketplaceMX}}Products from Amazon.com.mx{{/MarketplaceMX}}{{#MarketplaceUK}}Products from Amazon.co.uk{{/MarketplaceUK}}{{/AalbHeader}}</h2> <!– Title of the ad localized according to the marketplace picked from the AalbHeader tag –>
<div class=”aalb-pg-wrapper”>
<div class=”aalb-pg-product-container”>
<ul class=”aalb-pg-product-list”>
{{#Item}} <!– Section tag for beginning of information on one item –>
{{#aalb}} <!– Section tag for picking up information on attributes for the item –>
<li class=”aalb-pg-product”>
<div class=”aalb-pg-product-image”>
<div class=”aalb-pg-product-image-wrapper”>
<!–Individual attributes are provided as variable tags as {{attribute}}. Check documentation for list of supported variable tags.–>

{{#SavingPercent}} <!– The section tag ensures that percentage savings is displayed only if it is available –>
<span class=”aalb-pg-percent-off”>
-{{SavingPercent}}%
</span>
{{/SavingPercent}}

</div>
</div>
<div class=”aalb-pg-product-details”>
<div class=”aalb-pg-product-title”>

{{Title}}

</div>
<div class=”aalb-pg-product-offer-price”>
<!– The section tag for different marketplaces ensures localization of static text. –>
{{#MarketplaceUS}}Price{{/MarketplaceUS}}{{#MarketplaceFR}}Prix{{/MarketplaceFR}}{{#MarketplaceIT}}Prezzo{{/MarketplaceIT}}{{#MarketplaceDE}}Preis{{/MarketplaceDE}}{{#MarketplaceES}}Precio{{/MarketplaceES}}{{#MarketplaceBR}}Price{{/MarketplaceBR}}{{#MarketplaceCA}}Price{{/MarketplaceCA}}{{#MarketplaceCN}}Price{{/MarketplaceCN}}{{#MarketplaceIN}}Price{{/MarketplaceIN}}{{#MarketplaceJP}}Price{{/MarketplaceJP}}{{#MarketplaceMX}}Price{{/MarketplaceMX}}{{#MarketplaceUK}}Price{{/MarketplaceUK}}: <span class=”aalb-pg-product-offer-price-value”>{{CurrentPrice}}</span>
</div>
{{#StrikePrice}} <!– The section tag ensures that strike price is displayed only if it is available –>
<div class=”aalb-pg-product-list-price”>
<!– The section tag for different marketplaces ensures localization of static text. –>
{{#MarketplaceUS}}Was{{/MarketplaceUS}}{{#MarketplaceFR}}Ancien prix{{/MarketplaceFR}}{{#MarketplaceIT}}Da{{/MarketplaceIT}}{{#MarketplaceDE}}statt{{/MarketplaceDE}}{{#MarketplaceES}}Precio recomendado{{/MarketplaceES}}{{#MarketplaceBR}}Was{{/MarketplaceBR}}{{#MarketplaceCA}}Was{{/MarketplaceCA}}{{#MarketplaceCN}}Was{{/MarketplaceCN}}{{#MarketplaceIN}}Was{{/MarketplaceIN}}{{#MarketplaceJP}}Was{{/MarketplaceJP}}{{#MarketplaceMX}}Was{{/MarketplaceMX}}{{#MarketplaceUK}}Was{{/MarketplaceUK}}: <span class=”aalb-pg-product-list-price-value”>{{StrikePrice}}</span>
</div>
{{/StrikePrice}}
{{#Prime}} <!– The section tag ensures that prime icon is displayed only if it is available –>
<div class=”aalb-pg-product-prime-icon”>
<i class=”icon-prime-all”></i>
</div>
{{/Prime}}
</div>

{{/aalb}}
{{/Item}}

</div>
</div>
</div>
{{/Items}}

_____________________________

Here’s the CSS – how can I centre the grid and remove the large white space appearing underneath the grid (assuming that is padding?)

.aalb-pg-ad-unit {
position: relative;
overflow: hidden;
padding: 22px 40px;
}

.aalb-pg-ad-unit * {
box-sizing: content-box;
box-shadow: none;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
outline: 0;
padding: 0;
}

.aalb-pg-ad-unit.pull-left {
float: left;
}

.aalb-pg-ad-unit.pull-right {
float: right;
}

.aalb-pg-ad-unit.pull-left .aalb-pg-product, .aalb-pg-ad-unit.pull-right .aalb-pg-product {
width: 185px !important;
}

.aalb-pg-ad-unit a {
box-shadow: none !important;
}

.aalb-pg-ad-unit a:hover {
color: #c45500;
}

.aalb-pg-ad-unit .aalb-pg-ad-header {
padding-left: 3px;
padding-bottom: 9px;
font-size: 17px;
font-weight: normal;
color: #111111;
}

.aalb-pg-ad-unit .aalb-pg-product-list {
/* Remove the border-top to remove the horizontal line after the Ad Header*/
border-top: 2px solid #f7f7f7;
overflow: hidden;
}

.aalb-pg-product {
/* Make width 205px as defined in updateLayout() function in ProductGrid.mustache and height 290px to make li as grid and contain height of stretching cell */
height: 290px;
width: 205px;
padding-top: 22px;
padding-bottom: 22px;
float: left;
list-style: none;
text-align: center;
}

.aalb-pg-product-image {
display: table;
width: 150px;
height: 150px;
margin: 0 auto;
text-align: center;
}

.aalb-pg-ad-unit .aalb-pg-product-image-wrapper {
display: table-cell;
vertical-align: middle;
}

.aalb-pg-ad-unit .aalb-pg-product-image a {
position: relative;
display: inline-block;
vertical-align: middle;
}

.aalb-pg-ad-unit .aalb-pg-product-image img {
max-width: 150px;
max-height: 150px;
vertical-align: bottom;
}

.aalb-pg-ad-unit .aalb-pg-percent-off {
display: block;
width: 32px;
height: 27px;
padding-top: 5px;
position: absolute;
top: -16px;
right: -16px;
color: #ffffff;
font-size: 12px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background-color: #a50200;
background-image: -webkit-linear-gradient(top, #cb0400, #a50200);
background-image: linear-gradient(to bottom, #cb0400, #a50200);
}

.aalb-pg-ad-unit.hide-percent-off-badge .aalb-pg-percent-off {
display: none;
}

.aalb-pg-product-details {
max-width: 205px;
margin: 11px 10px 0 10px;
text-align: left;
}

.aalb-pg-ad-unit .aalb-pg-product-title a {
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
color: #111111;
text-decoration: none;
}

.aalb-pg-ad-unit.no-truncate .aalb-pg-product-title a {
text-overflow: initial;
white-space: initial;
}

.aalb-pg-ad-unit .aalb-pg-product-offer-price {
font-size: 13px;
color: #111111;
}

.aalb-pg-ad-unit .aalb-pg-product-offer-price-value {
color: #AB1700;
font-weight: bold;
}

.aalb-pg-ad-unit .aalb-pg-product-list-price {
font-size: 13px;
color: #565656;
}

.aalb-pg-ad-unit .aalb-pg-product-list-price-value {
text-decoration: line-through;
}

.aalb-pg-ad-unit .aalb-pg-product-prime-icon .icon-prime-all {
background: url(“https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png&#8221;) no-repeat;
display: inline-block;
margin-top: -1px;
vertical-align: middle;
background-position: -192px -911px;
background-size: 560px 938px;
width: 52px;
height: 15px;
}

.aalb-pg-ad-unit .aalb-pg-product-offer-price,
.aalb-pg-ad-unit .aalb-pg-product-list-price,
.aalb-pg-ad-unit .aalb-pg-product-prime-icon {
display: inline-block;
margin-right: 2px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.aalb-pg-ad-unit .aalb-pg-product-prime-icon .icon-prime-all {
background: url(“https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png&#8221;) no-repeat;
display: inline-block;
margin-top: -1px;
vertical-align: middle;
background-position: -192px -911px;
background-size: 560px 938px;
width: 52px;
height: 15px;
}
}

/* css for mobile devices when device width is less than 441px*/
@media screen and (max-width: 440px) {
.aalb-pg-ad-unit {
padding: 0;
max-width: 100%;
}

.aalb-pg-product {
max-width: 100%;
padding-top: 22px;
padding-bottom: 22px;
margin: 0 auto;
list-style: none;
float: none;
}

.aalb-pg-product-image {
margin: 0 auto;
}
}

• This reply was modified 7 years, 2 months ago by TwoScotsAbroad.

Amazon – can you reply please? Request was over 1 week ago.

Instead of waiting for weeks you could have tried it yourself and be done by now.

As I already explained, the text “Products from Amazon” is embedded in a headline tag. Hence it is listed in your TOC. To have your TOC *not* list the unwanted heading you must remove the headline tag from the code in the template.
<h2 class=”aalb-pg-ad-header”>{{#AalbHeader}}{{#MarketplaceUS}}Products from Amazon.com{{/MarketplaceUS}}{{#MarketplaceFR}}Produits disponibles sur Amazon.fr {{/MarketplaceFR}}{{#MarketplaceIT}}Acquista su Amazon.it{{/MarketplaceIT}}{{#MarketplaceDE}}Produkte von Amazon.de{{/MarketplaceDE}}{{#MarketplaceES}}Producto disponible en Amazon.es{{/MarketplaceES}}{{#MarketplaceBR}}Products from Amazon.com.br{{/MarketplaceBR}}{{#MarketplaceCA}}Products from Amazon.ca{{/MarketplaceCA}}{{#MarketplaceCN}}Products from Amazon.cn{{/MarketplaceCN}}{{#MarketplaceIN}}Products from Amazon.in{{/MarketplaceIN}}{{#MarketplaceJP}}Products from Amazon.co.jp{{/MarketplaceJP}}{{#MarketplaceMX}}Products from Amazon.com.mx{{/MarketplaceMX}}{{#MarketplaceUK}}Products from Amazon.co.uk{{/MarketplaceUK}}{{/AalbHeader}}</h2>
See the first tag and the last?
<h2 class= …> and </h2>
These are said headline tags, which mark the text between them as a headline.

You could either remove them entirely, which would result in losing their formatting. Or you could replace the “h2” part with “div” to still be able to apply the style “aalb-pg-ad-header”.

Just deleting the text “Products from Amazon” won’t be of much use, as you still would have a headline in your TOC, only without text. Even worse.

To play around with things like that I always make a copy of the template I wish to edit and experiment with it until I have the desired result. Just assign the new template in the shortcode of your amazon link. If something goes wrong with your template edit you can still get back to the original template so that your page doesn’t get messed up.

HTH,
Sascha

• This reply was modified 7 years, 2 months ago by superninchen.