Your Nearest Store

{{NearestStoreData.NearestStore.StoreLocationName}}

{{NearestStoreData.NearestStore.StoreLocationName}}

{{NearestStoreData.NearestStore.StoreLocationAddress}}
{{NearestStoreData.NearestStore.StoreLocationSuburb}}, {{NearestStoreData.NearestStore.StoreLocationPostCode}}

Ph: {{NearestStoreData.NearestStore.StoreLocationPhone}}

Trading Hours

{{hour.Day}} {{hour.Hours}}

We could not determine your nearest store. Please use the search form.
My Garage
Shop by vehicle for easy access to our complete range of parts for your car. Plus sign in to your Club Plus or Trade Account now to save your vehicle for next time.
Over 50,000 Parts Available In Store or Online
Over 50,000 Parts Available
Free Delivery on Spare Parts Online or In Store
Free Shipping on Parts
Fitment 100% Guaranteed - Buy Online or In Store Today
Vehicle Fitment Guaranteed
Select Your Vehicle My Vehicles
{{Alerts.Message}}
{{Alerts.Message}}
Your vehicle limit has been reached, delete a vehicle to add another.
{{Vehicle.DisplayName | limitTo: 22}}{{Vehicle.DisplayName.length > 22 ? '...' : ''}} {{Vehicle.DisplayName}}
You have no vehicles. Click 'Add Vehicle' to add a vehicle to your list.
Read below before you start
  • The HTML for some of these items might substantially change as part of the Front-End Consolidation project. During the project, restrict custom page content to grids, buttons, headers, paragraphs and alerts. These are unlikely to change.
  • Refer to the list of allowed styling properties for the Front-End Consolidation brand theming/style guide designs.
  • Remember to think about all devices

Header 1

  h1 {
    color: ...;
    border: ...;
    font-weight: ...;
  }

Header 2

  h2 {
    color: ...;
    border: ...;
    font-weight: ...;
  }

Header 3

  h3 {
    color: ...;
    border: ...;
    font-weight: ...;
  }

Header 4

  h4 {
    color: ...;
    border: ...;
    font-weight: ...;
  }

Header 5
  h5 {
    color: ...;
    border: ...;
    font-weight: ...;
  }

Header 6
  h6 {
    color: ...;
    border: ...;
    font-weight: ...;
  }

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  p {
    color: ...;
    font-weight: ...;
  }

Link
  a {
    color: ...;
    font-weight: ...;
    text-decoration: ...;
  }

  • List item 1
  • List item 2
  li {
    color: ...;
    font-weight: ...;
    text-decoration: ...;
  }

  .btn.btn-primary {
    color: ...;
    font-weight: ...;
    text-decoration: ...;
    border: ...;
    border-radius: ...;
    background: (colours and gradients);
    text-transform: ...;
    text-shadow: ...;
    box-shadow: ...;
  }

  .btn.btn-primary:before { // rebel's arrow
    content: ...;
    display: (none if you don't want this);
    border-radius: ...;
    // positioning properties allowed, but keep to rebel's size as a maximum
  }

  .btn.btn-primary:hover {
    color: ...;
    background: (colours and gradients);
    text-shadow: ...;
    box-shadow: ...;
  }

  .btn {
    color: ...;
    font-weight: ...;
    text-decoration: ...;
    border: ...;
    border-radius: ...;
    background: (colours and gradients);
    text-transform: ...;
    text-shadow: ...;
    box-shadow: ...;
  }

  .btn.btn-primary:hover {
    color: ...;
    background: (colours and gradients);
    text-shadow: ...;
    box-shadow: ...;
  }

  .btn.btn-primary.add-to-cart {
    color: ...;
    font-weight: ...;
    text-decoration: ...;
    border: ...;
    border-radius: ...;
    background: (colours and gradients);
    text-transform: ...;
    text-shadow: ...;
    box-shadow: ...;
  }

  .btn.btn-primary.add-to-cart:before { // rebel's plus icon
    content: ...;
    display: (none if you don't want this);
    border-radius: ...;
    // positioning properties allowed, but keep to rebel's size as a maximum
  }

  .btn.btn-primary:hover {
    color: ...;
    background: (colours and gradients);
    text-shadow: ...;
    box-shadow: ...;
  }

This is a single-line warning alert
This is a single-line success alert
This is a single-line info alert
This is a single-line error alert
This is a multi-line warning alert
The icon should be vertically aligned to the center
This is a multi-line success alert
The icon should be vertically aligned to the center
This is a multi-line info alert
The icon should be vertically aligned to the center
This is a multi-line error alert
The icon should be vertically aligned to the center
This is a single-line small warning alert
This is a single-line small success alert
This is a single-line small info alert
This is a single-line small error alert
This is a single-line warning alert without an icon
This is a single-line success alert without an icon
This is a single-line info alert without an icon
This is a single-line error alert without an icon
  .alert,
  .alert.alert-error,
  .alert.alert-info,
  .alert.alert-success {
    color: ...;
    font-weight: ...;
    border: ...;
    border-radius: ...;
    background: (colours and gradients);
    text-shadow: ...;
    box-shadow: ...;
  }

Grids
can have
variable length
columns
But they need to be
factors of 12
  Styling not applicable

Form

(some help text)
Validation message
  You may choose to style the help text, field borders and the validation styling (i.e.: border colour and message colour)
  .help-block {
    color: ...;
  }
  textarea,
  input (restrict by type=text, type=password, type=number etc),
  select {
    border: ...;
    border-radius: ...;
  }
  .control-group.error .help-block {
    border-color: ...;
    color: ...;
  }

Tabs above become an accordion on mobile. Try changing the size of your browser's window.
  .tabbable .nav-tabs > li { /* all tabs */
    color: ...;
    font-weight: ...;
    border: ...;
    border-radius: ...;
    background: (colours and gradients);
    text-shadow: ...;
  }
  .tabbable .nav-tabs > li:hover { /* hovered tab */
    color: ...;
    font-weight: ...;
    border: ...;
    border-radius: ...;
    background: (colours and gradients);
    text-shadow: ...;
  }
  .tabbable .nav-tabs > li:hover { /* active tab */
    color: ...;
    font-weight: ...;
    border: ...;
    border-radius: ...;
    background: (colours and gradients);
    text-shadow: ...;
  }

Now on Sale
  Product items (same for lists, rotators and bonus buys), prices (retail, save, member), badges (pre-sales, bonus buys...), rotator arrows (coming soon)
  Allowed properties:
  color
  border
  border-radius
  font-family
  font-weight
  background
  text-transform
  text-decoration
  opacity
  box-shadow
  text-shadow
HTML for this item is prone to change substantially during the front-end consolidation project

Website header
  Website header styling
  Allowed properties:
  color
  border
  border-radius
  font-family
  font-weight
  background
  text-transform
  text-decoration
  opacity
  box-shadow
  text-shadow

Website footer
  Website footer styling
  Allowed properties:
  color
  border
  border-radius
  font-family
  font-weight
  background
  text-transform
  text-decoration
  opacity
  box-shadow
  text-shadow

Product details page
    Prices, badges (pre-sales, bonus buys), product "charateristics" (pre-sales text, dangerous text), Free shipping
    Allowed properties:
    color
    border
    border-radius
    font-family
    font-weight
    background
    text-transform
    text-decoration
    opacity
    box-shadow
    text-shadow
{{message}}